import React, { useState, useEffect } from 'react'; import { Icons } from './IconSet'; import { authService } from '../services/AuthService'; import { DiscordUser } from '../types'; interface LayoutProps { children: React.ReactNode; activeTab: string; onNavigate: (tab: string) => void; } const NavItem = ({ active, label, onClick }: { active: boolean; label: string; onClick: () => void; }) => ( ); const Layout: React.FC = ({ children, activeTab, onNavigate }) => { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [user, setUser] = useState(null); useEffect(() => { // Subscribe to auth changes const unsubscribe = authService.subscribe(setUser); return unsubscribe; }, []); return (
{/* Top Header - Website Style */}
{/* Logo */}
onNavigate('dashboard')} >
P.V.
Projekt: Vollidion
{/* Desktop Nav */}
{/* Mobile Menu Toggle */}
{/* Mobile Nav Dropdown */} {mobileMenuOpen && (
{ onNavigate('dashboard'); setMobileMenuOpen(false); }} className="block py-2 text-textMuted hover:text-textMain">Übersicht
{ onNavigate('cities'); setMobileMenuOpen(false); }} className="block py-2 text-textMuted hover:text-textMain">Städte
{ onNavigate('players'); setMobileMenuOpen(false); }} className="block py-2 text-textMuted hover:text-textMain">Bürger
{ onNavigate('organizations'); setMobileMenuOpen(false); }} className="block py-2 text-textMuted hover:text-textMain">Organisationen
{ onNavigate('projects'); setMobileMenuOpen(false); }} className="block py-2 text-textMuted hover:text-textMain">Unternehmen
{user?.isAdmin && (
{ onNavigate('admin'); setMobileMenuOpen(false); }} className="block py-2 text-red-400 hover:text-red-300">Admin
)}
{ onNavigate('datapack'); setMobileMenuOpen(false); }} className="block py-2 text-textMain">Datapack holen
{ onNavigate('setup'); setMobileMenuOpen(false); }} className="block py-2 text-accentInfo font-mono text-sm border-t border-white/5 pt-4">{"Admin Setup >_"}
)}
{/* Main Content - Page Flow */}
{children}
{/* Footer - Adds to the "Website" feel */}
); }; export default Layout;