From 636228ff04d7f0227a169439ba28a52762735bcc Mon Sep 17 00:00:00 2001
From: Ronny <ronny975@gmail.com>
Date: Sat, 11 Apr 2026 18:59:00 +0200
Subject: [PATCH] feat: add bottom navigation bar (mobile-first)

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>
---
 frontend/src/App.module.css                  | 27 +++++++++++
 frontend/src/App.tsx                         | 12 +++--
 frontend/src/components/BottomNav.module.css | 47 ++++++++++++++++++++
 frontend/src/components/BottomNav.tsx        | 29 ++++++++++++
 frontend/src/global.d.ts                     |  6 +++
 5 files changed, 117 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/BottomNav.module.css
 create mode 100644 frontend/src/components/BottomNav.tsx

diff --git a/frontend/src/App.module.css b/frontend/src/App.module.css
index d301e70..4b91282 100644
--- a/frontend/src/App.module.css
+++ b/frontend/src/App.module.css
@@ -96,5 +96,32 @@
   max-width: 1100px;
   margin: 0 auto;
   padding: 32px 24px;
+  padding-bottom: 70px;
   width: 100%;
 }
+
+@media (min-width: 768px) {
+  .main {
+    padding-bottom: 32px;
+  }
+}
+
+/* Hide header nav on mobile */
+@media (max-width: 767px) {
+  .nav {
+    display: none;
+  }
+}
+
+/* Admin link: icon only, subtle */
+.adminLink {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+.adminLink:hover {
+  color: var(--text-secondary);
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4d88f4a..6d1731d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'react';
 import { Routes, Route, NavLink } from 'react-router-dom';
-import { Sun, Moon } from 'lucide-react';
+import { Sun, Moon, Settings } from 'lucide-react';
 import MatchesPage from './pages/MatchesPage';
 import LeaderboardPage from './pages/LeaderboardPage';
 import ProfilePage from './pages/ProfilePage';
 import AdminPage from './pages/AdminPage';
+import BottomNav from './components/BottomNav';
 import styles from './App.module.css';
 
 const IS_DEV = import.meta.env.DEV || import.meta.env.VITE_TEST_MODE === 'true';
@@ -79,7 +80,7 @@ export default function App() {
             )}
           </div>
           <nav className={styles.nav}>
-            <NavLink to="/" end className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
+            <NavLink to="/spiele" className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
               Spielplan
             </NavLink>
             <NavLink to="/rangliste" className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
@@ -88,8 +89,8 @@ export default function App() {
             <NavLink to="/profil" className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
               Mein Profil
             </NavLink>
-            <NavLink to="/admin" className={({ isActive }) => isActive ? styles.navLinkActive : styles.navLink}>
-              Admin
+            <NavLink to="/admin" className={styles.adminLink} title="Admin">
+              <Settings size={16} />
             </NavLink>
             <button
               className={styles.themeToggle}
@@ -106,12 +107,15 @@ export default function App() {
       <main className={styles.main}>
         <Routes>
           <Route path="/" element={<MatchesPage key={refreshKey} devUser={devUser} />} />
+          <Route path="/spiele" element={<MatchesPage key={refreshKey} devUser={devUser} />} />
           <Route path="/rangliste" element={<LeaderboardPage key={refreshKey} />} />
           <Route path="/profil" element={<ProfilePage key={refreshKey} />} />
           <Route path="/admin" element={<AdminPage />} />
         </Routes>
       </main>
 
+      <BottomNav />
+
       {IS_DEV && DevPanel && (
         <DevPanel
           currentUser={devUser}
diff --git a/frontend/src/components/BottomNav.module.css b/frontend/src/components/BottomNav.module.css
new file mode 100644
index 0000000..82a13e3
--- /dev/null
+++ b/frontend/src/components/BottomNav.module.css
@@ -0,0 +1,47 @@
+.bottomNav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 60px;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-top: 1px solid rgba(75, 183, 248, 0.15);
+  z-index: 100;
+}
+
+.tab, .tabActive {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 16px;
+  font-size: 11px;
+  text-decoration: none;
+  color: var(--text-muted);
+  transition: color 0.2s;
+}
+
+.tabActive {
+  color: var(--primary);
+}
+
+.tab:hover {
+  color: var(--text-secondary);
+}
+
+.emojiIcon {
+  font-size: 20px;
+  line-height: 1;
+}
+
+@media (min-width: 768px) {
+  .bottomNav {
+    display: none;
+  }
+}
diff --git a/frontend/src/components/BottomNav.tsx b/frontend/src/components/BottomNav.tsx
new file mode 100644
index 0000000..c867909
--- /dev/null
+++ b/frontend/src/components/BottomNav.tsx
@@ -0,0 +1,29 @@
+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>
+  );
+}
diff --git a/frontend/src/global.d.ts b/frontend/src/global.d.ts
index cdd65d8..8abc19e 100644
--- a/frontend/src/global.d.ts
+++ b/frontend/src/global.d.ts
@@ -4,8 +4,14 @@ interface Window {
 
 interface ImportMetaEnv {
   readonly VITE_TEST_MODE?: string;
+  readonly DEV: boolean;
 }
 
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}