Initial commit: Activiteiten Inventaris applicatie

src/components/AdminLayout.tsx

@@ -0,0 +1,62 @@
+import { Link, Outlet, useNavigate } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+
+export function AdminLayout() {
+  const { user, logout } = useAuth()
+  const navigate = useNavigate()
+
+  async function handleLogout() {
+    await logout()
+    navigate('/login')
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <nav className="bg-bg-elevated border-b border-border sticky top-0 z-50 backdrop-blur-md">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-14 items-center">
+            <Link to="/admin/dashboard" className="text-lg font-bold text-text hover:text-accent transition-colors">
+              Activiteiten Inventaris
+            </Link>
+            
+            <div className="flex items-center gap-2">
+              <Link 
+                to="/admin/dashboard" 
+                className="px-3 py-1.5 text-sm text-text-muted hover:text-text hover:bg-bg-card rounded-md transition-colors"
+              >
+                Dashboard
+              </Link>
+              <Link 
+                to="/admin/users" 
+                className="px-3 py-1.5 text-sm text-text-muted hover:text-text hover:bg-bg-card rounded-md transition-colors"
+              >
+                Gebruikers
+              </Link>
+              <Link 
+                to="/admin/change-password" 
+                className="px-3 py-1.5 text-sm text-text-muted hover:text-text hover:bg-bg-card rounded-md transition-colors"
+              >
+                Wachtwoord
+              </Link>
+              <button 
+                onClick={handleLogout}
+                className="px-3 py-1.5 text-sm text-danger hover:bg-danger-muted rounded-md transition-colors"
+              >
+                Uitloggen
+              </button>
+            </div>
+          </div>
+        </div>
+      </nav>
+      
+      <main className="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-8">
+        <Outlet />
+      </main>
+      
+      <footer className="border-t border-border-light py-6 text-center text-text-faint text-sm">
+        Activiteiten Inventaris Systeem
+      </footer>
+    </div>
+  )
+}
+