Ceratic/project_vollidioten_website
1
0
Fork 0
mirror of https://github.com/ceratic/project_vollidioten_website.git synced 2026-05-14 00:16:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

routing

Browse Source
This commit is contained in:
Lars Behrends
2025-12-28 17:21:30 +01:00
parent 5d44abbedc
commit 2481187fe7
10 changed files with 1240 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/Layout.tsx
View File

@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Icons } from './IconSet';
import { authService } from '../services/AuthService';
import { DiscordUser } from '../types';
@@ -12,14 +13,14 @@ interface LayoutProps {
const NavItem = ({
active,
label,
onClick
to
}: {
active: boolean;
label: string;
onClick: () => void;
to: string;
}) => (
<button
onClick={onClick}
<Link
to={to}
className={`text-sm font-medium transition-colors duration-200 px-1 py-4 border-b-2 ${
active
? 'text-textMain border-accentInfo'
@@ -27,7 +28,7 @@ const NavItem = ({
}`}
>
{label}
</button>
</Link>
);
const Layout: React.FC<LayoutProps> = ({ children, activeTab, onNavigate }) => {
@@ -59,13 +60,13 @@ const Layout: React.FC<LayoutProps> = ({ children, activeTab, onNavigate }) => {
{/* Desktop Nav */}
<nav className="hidden md:flex items-center gap-6 h-full">
<NavItem active={activeTab === 'dashboard'} label="Übersicht" onClick={() => onNavigate('dashboard')} />
<NavItem active={activeTab === 'cities'} label="Städte" onClick={() => onNavigate('cities')} />
<NavItem active={activeTab === 'players'} label="Bürger" onClick={() => onNavigate('players')} />
{/* <NavItem active={activeTab === 'organizations'} label="Organisationen" onClick={() => onNavigate('organizations')} />*/}
<NavItem active={activeTab === 'projects'} label="Unternehmen" onClick={() => onNavigate('projects')} />
<NavItem active={activeTab === 'dashboard'} label="Übersicht" to="/" />
<NavItem active={activeTab === 'cities'} label="Städte" to="/cities" />
<NavItem active={activeTab === 'players'} label="Bürger" to="/players" />
{/* <NavItem active={activeTab === 'organizations'} label="Organisationen" to="/organizations" />*/}
<NavItem active={activeTab === 'projects'} label="Unternehmen" to="/projects" />
{user?.isAdmin && (
<NavItem active={activeTab === 'admin'} label="Admin" onClick={() => onNavigate('admin')} />
<NavItem active={activeTab === 'admin'} label="Admin" to="/admin" />
)}
</nav>
</div>
@@ -99,16 +100,16 @@ const Layout: React.FC<LayoutProps> = ({ children, activeTab, onNavigate }) => {
{/* Mobile Nav Dropdown */}
{mobileMenuOpen && (
<div className="md:hidden border-t border-border bg-surface px-6 py-4 space-y-4 shadow-xl">
<div onClick={() => { onNavigate('dashboard'); setMobileMenuOpen(false); }} className="block py-2 text-textMuted hover:text-textMain">Übersicht</div>
<div onClick={() => { onNavigate('cities'); setMobileMenuOpen(false); }} className="block py-2 text-textMuted hover:text-textMain">Städte</div>
<div onClick={() => { onNavigate('players'); setMobileMenuOpen(false); }} className="block py-2 text-textMuted hover:text-textMain">Bürger</div>
<div onClick={() => { onNavigate('organizations'); setMobileMenuOpen(false); }} className="block py-2 text-textMuted hover:text-textMain">Organisationen</div>
<div onClick={() => { onNavigate('projects'); setMobileMenuOpen(false); }} className="block py-2 text-textMuted hover:text-textMain">Unternehmen</div>
<Link to="/" onClick={() => setMobileMenuOpen(false)} className="block py-2 text-textMuted hover:text-textMain">Übersicht</Link>
<Link to="/cities" onClick={() => setMobileMenuOpen(false)} className="block py-2 text-textMuted hover:text-textMain">Städte</Link>
<Link to="/players" onClick={() => setMobileMenuOpen(false)} className="block py-2 text-textMuted hover:text-textMain">Bürger</Link>
<Link to="/organizations" onClick={() => setMobileMenuOpen(false)} className="block py-2 text-textMuted hover:text-textMain">Organisationen</Link>
<Link to="/projects" onClick={() => setMobileMenuOpen(false)} className="block py-2 text-textMuted hover:text-textMain">Unternehmen</Link>
{user?.isAdmin && (
<div onClick={() => { onNavigate('admin'); setMobileMenuOpen(false); }} className="block py-2 text-red-400 hover:text-red-300">Admin</div>
<Link to="/admin" onClick={() => setMobileMenuOpen(false)} className="block py-2 text-red-400 hover:text-red-300">Admin</Link>
)}
<div onClick={() => { onNavigate('datapack'); setMobileMenuOpen(false); }} className="block py-2 text-textMain">Datapack holen</div>
<div onClick={() => { onNavigate('setup'); setMobileMenuOpen(false); }} className="block py-2 text-accentInfo font-mono text-sm border-t border-white/5 pt-4">{"Admin Setup >_"}</div>
<Link to="/datapack" onClick={() => setMobileMenuOpen(false)} className="block py-2 text-textMain">Datapack holen</Link>
<Link to="/setup" onClick={() => setMobileMenuOpen(false)} className="block py-2 text-accentInfo font-mono text-sm border-t border-white/5 pt-4">{"Admin Setup >_"}</Link>
</div>
)}
</header>