From f8d0c68f8484161b7691c8defc43696d64458040 Mon Sep 17 00:00:00 2001
From: RaymondVerhoef <raymondverhoef@gmail.com>
Date: Sun, 10 May 2026 11:00:39 +0200
Subject: [PATCH] feat: initialize main application routing and responsive
 navigation layout with authentication guards

---
 src/App.jsx | 55 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 806a950..5b00847 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,15 +1,16 @@
 import React from 'react'
 import { Routes, Route, Navigate, Link } from 'react-router-dom'
+import { BookOpen, CheckSquare, LayoutDashboard, Trophy, Settings, LogOut } from 'lucide-react'
 import { useApp } from './store/AppContext'
 
 import Login from './pages/Login'
 import Dashboard from './pages/Dashboard'
 
 // Placeholder components for routing structure
-const Admin = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Admin</h1><p className="mt-4">Kennisbeheer and Source Upload.</p></div>
-const Testen = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Weektest</h1><p className="mt-4">Start your weekly test here.</p></div>
-const Leren = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Leren</h1><p className="mt-4">Start your weekly learning session.</p></div>
-const Leaderboard = () => <div className="p-8"><h1 className="text-4xl text-teal font-bold">Leaderboard</h1><p className="mt-4">See who is on top!</p></div>
+const Admin = () => <div className="p-4 md:p-8"><h1 className="text-3xl md:text-4xl text-teal font-bold">Admin</h1><p className="mt-4">Kennisbeheer and Source Upload.</p></div>
+const Testen = () => <div className="p-4 md:p-8"><h1 className="text-3xl md:text-4xl text-teal font-bold">Weektest</h1><p className="mt-4">Start your weekly test here.</p></div>
+const Leren = () => <div className="p-4 md:p-8"><h1 className="text-3xl md:text-4xl text-teal font-bold">Leren</h1><p className="mt-4">Start your weekly learning session.</p></div>
+const Leaderboard = () => <div className="p-4 md:p-8"><h1 className="text-3xl md:text-4xl text-teal font-bold">Leaderboard</h1><p className="mt-4">See who is on top!</p></div>
 
 // Protected Route Wrapper
 const ProtectedRoute = ({ children, requireAdmin }) => {
@@ -26,31 +27,51 @@ const ProtectedRoute = ({ children, requireAdmin }) => {
   }
 
   return (
-    <div className="min-h-screen bg-bg text-fg font-sans flex flex-col">
-      {/* Navigation Bar */}
+    <div className="min-h-screen bg-bg text-fg font-sans flex flex-col pb-16 md:pb-0">
+      {/* Top Navigation Bar */}
       <nav className="bg-bg-dark text-paper p-4 shadow-soft flex justify-between items-center sticky top-0 z-50">
         <Link to="/" className="flex items-center">
-          <img src="/images/logo-light.png" alt="Respellion Logo" className="h-8 object-contain" />
+          <img src="/images/logo-light.png" alt="Respellion Logo" className="h-6 md:h-8 object-contain" />
         </Link>
-        <div className="flex items-center gap-6 text-sm font-medium">
-          <Link to="/" className="hover:text-accent-soft transition-colors">Dashboard</Link>
-          <Link to="/learn" className="hover:text-accent-soft transition-colors">Leren</Link>
-          <Link to="/test" className="hover:text-accent-soft transition-colors">Testen</Link>
-          <Link to="/leaderboard" className="hover:text-accent-soft transition-colors">Leaderboard</Link>
+        
+        {/* Desktop Links */}
+        <div className="hidden md:flex items-center gap-6 text-sm font-medium">
+          <Link to="/" className="hover:text-accent-soft transition-colors flex items-center gap-2"><LayoutDashboard size={16}/> Dashboard</Link>
+          <Link to="/learn" className="hover:text-accent-soft transition-colors flex items-center gap-2"><BookOpen size={16}/> Leren</Link>
+          <Link to="/test" className="hover:text-accent-soft transition-colors flex items-center gap-2"><CheckSquare size={16}/> Testen</Link>
+          <Link to="/leaderboard" className="hover:text-accent-soft transition-colors flex items-center gap-2"><Trophy size={16}/> Leaderboard</Link>
           {state.currentUser.role === 'admin' && (
-            <Link to="/admin" className="hover:text-accent-soft transition-colors flex items-center gap-1">
-              <span className="w-2 h-2 rounded-full bg-accent inline-block"></span>
-              Admin
+            <Link to="/admin" className="hover:text-accent-soft transition-colors flex items-center gap-2">
+              <Settings size={16}/> Admin
             </Link>
           )}
           <button 
             onClick={logout}
-            className="ml-4 border border-bg-warm/30 rounded-[var(--r-pill)] px-3 py-1 hover:bg-paper/10 transition-colors"
+            className="ml-4 border border-bg-warm/30 rounded-[var(--r-pill)] px-3 py-1 hover:bg-paper/10 transition-colors flex items-center gap-2"
           >
-            Uitloggen
+            <LogOut size={14}/> Uitloggen
+          </button>
+        </div>
+        
+        {/* Mobile top-right: just logout icon */}
+        <div className="flex md:hidden items-center">
+          <button onClick={logout} className="p-2 hover:bg-paper/10 rounded-full transition-colors text-paper">
+             <LogOut size={20}/>
           </button>
         </div>
       </nav>
+
+      {/* Mobile Bottom Navigation */}
+      <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-paper border-t border-bg-warm flex justify-around items-center p-2 z-50">
+          <Link to="/" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><LayoutDashboard size={20}/><span className="text-[10px] mt-1 font-medium">Home</span></Link>
+          <Link to="/learn" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><BookOpen size={20}/><span className="text-[10px] mt-1 font-medium">Leren</span></Link>
+          <Link to="/test" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><CheckSquare size={20}/><span className="text-[10px] mt-1 font-medium">Testen</span></Link>
+          <Link to="/leaderboard" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><Trophy size={20}/><span className="text-[10px] mt-1 font-medium">Score</span></Link>
+          {state.currentUser.role === 'admin' && (
+            <Link to="/admin" className="flex flex-col items-center p-2 text-fg-muted hover:text-teal"><Settings size={20}/><span className="text-[10px] mt-1 font-medium">Admin</span></Link>
+          )}
+      </nav>
+
       <main className="flex-1 w-full max-w-[var(--max)] mx-auto">
         {children}
       </main>