Ronny
636228ff04
Fixed bottom nav with Home/Spiele/Rangliste/Profil tabs. Desktop keeps header nav. Admin hidden behind gear icon. Main content padded to avoid overlap with bottom nav. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
30 lines
878 B
TypeScript
30 lines
878 B
TypeScript
import { NavLink } from 'react-router-dom';
|
|
import { Home, Trophy, User } from 'lucide-react';
|
|
import styles from './BottomNav.module.css';
|
|
|
|
export default function BottomNav() {
|
|
const linkClass = ({ isActive }: { isActive: boolean }) =>
|
|
isActive ? styles.tabActive : styles.tab;
|
|
|
|
return (
|
|
<nav className={styles.bottomNav}>
|
|
<NavLink to="/" end className={linkClass}>
|
|
<Home size={20} />
|
|
<span>Home</span>
|
|
</NavLink>
|
|
<NavLink to="/spiele" className={linkClass}>
|
|
<span className={styles.emojiIcon}>⚽</span>
|
|
<span>Spiele</span>
|
|
</NavLink>
|
|
<NavLink to="/rangliste" className={linkClass}>
|
|
<Trophy size={20} />
|
|
<span>Rangliste</span>
|
|
</NavLink>
|
|
<NavLink to="/profil" className={linkClass}>
|
|
<User size={20} />
|
|
<span>Profil</span>
|
|
</NavLink>
|
|
</nav>
|
|
);
|
|
}
|