rve/learning-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initialize main application routing and responsive navigation layout with authentication guards

Browse Source
This commit is contained in:
RaymondVerhoef
2026-05-10 11:00:39 +02:00
parent b988028cf8
commit f8d0c68f84
1 changed files with 38 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/App.jsx
View File

@@ -1,15 +1,16 @@
import React from 'react' import React from 'react'
import { Routes, Route, Navigate, Link } from 'react-router-dom' 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 { useApp } from './store/AppContext'
import Login from './pages/Login' import Login from './pages/Login'
import Dashboard from './pages/Dashboard' import Dashboard from './pages/Dashboard'
// Placeholder components for routing structure // 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 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-8"><h1 className="text-4xl text-teal font-bold">Weektest</h1><p className="mt-4">Start your weekly test here.</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-8"><h1 className="text-4xl text-teal font-bold">Leren</h1><p className="mt-4">Start your weekly learning session.</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-8"><h1 className="text-4xl text-teal font-bold">Leaderboard</h1><p className="mt-4">See who is on top!</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 // Protected Route Wrapper
const ProtectedRoute = ({ children, requireAdmin }) => { const ProtectedRoute = ({ children, requireAdmin }) => {
@@ -26,31 +27,51 @@ const ProtectedRoute = ({ children, requireAdmin }) => {
} }
return ( return (
<div className="min-h-screen bg-bg text-fg font-sans flex flex-col"> <div className="min-h-screen bg-bg text-fg font-sans flex flex-col pb-16 md:pb-0">
{/* Navigation Bar */} {/* Top Navigation Bar */}
<nav className="bg-bg-dark text-paper p-4 shadow-soft flex justify-between items-center sticky top-0 z-50"> <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"> <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> </Link>
<div className="flex items-center gap-6 text-sm font-medium">
<Link to="/" className="hover:text-accent-soft transition-colors">Dashboard</Link> {/* Desktop Links */}
<Link to="/learn" className="hover:text-accent-soft transition-colors">Leren</Link> <div className="hidden md:flex items-center gap-6 text-sm font-medium">
<Link to="/test" className="hover:text-accent-soft transition-colors">Testen</Link> <Link to="/" className="hover:text-accent-soft transition-colors flex items-center gap-2"><LayoutDashboard size={16}/> Dashboard</Link>
<Link to="/leaderboard" className="hover:text-accent-soft transition-colors">Leaderboard</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' && ( {state.currentUser.role === 'admin' && (
<Link to="/admin" className="hover:text-accent-soft transition-colors flex items-center gap-1"> <Link to="/admin" className="hover:text-accent-soft transition-colors flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-accent inline-block"></span> <Settings size={16}/> Admin
Admin
</Link> </Link>
)} )}
<button <button
onClick={logout} 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> </button>
</div> </div>
</nav> </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"> <main className="flex-1 w-full max-w-[var(--max)] mx-auto">
{children} {children}
</main> </main>