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 { 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>