Gulum
162a0fafb1
- AppShell.tsx: Start-Eintrag (/) aus PRIMARY entfernt; /rennmaeuse ist nun erste Kachel und Landing Page - App.tsx: index-Route → <Navigate to="/rennmaeuse" replace>; HomePage-Import entfernt - HomePage.tsx: gelöscht (nicht mehr referenziert, via git wiederherstellbar) - de.ts: nav.home + pages.home entfernt (nur von AppShell/HomePage genutzt) - e2e/navigation.spec.ts: HomePage-Assertions → de.pages.gerbils.title Gate: build ✓ eslint ✓ vitest 82/82 ✓ e2e 120/120 ✓
93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
import { useState } from 'react'
|
|
import { NavLink, Outlet } from 'react-router-dom'
|
|
import { de } from '../strings/de'
|
|
import './appShell.css'
|
|
|
|
interface NavItem {
|
|
to: string
|
|
label: string
|
|
icon: string
|
|
end?: boolean
|
|
}
|
|
|
|
// Primary items are always visible in the phone bottom bar; secondary items
|
|
// move into the "Mehr" sheet on phones and appear inline in the desktop sidebar.
|
|
const PRIMARY: NavItem[] = [
|
|
{ to: '/rennmaeuse', label: de.nav.gerbils, icon: '🐭' },
|
|
{ to: '/wuerfe', label: de.nav.litters, icon: '🍼' },
|
|
{ to: '/genetik', label: de.nav.genetics, icon: '🧬' },
|
|
]
|
|
const SECONDARY: NavItem[] = [
|
|
{ to: '/gehege', label: de.nav.enclosures, icon: '🏜️' },
|
|
{ to: '/kontakte', label: de.nav.contacts, icon: '📇' },
|
|
{ to: '/abgabe', label: de.nav.forSale, icon: '🏡' },
|
|
// INBOX-1: Anfragen-Posteingang
|
|
{ to: '/anfragen', label: de.nav.requests, icon: '📨' },
|
|
{ to: '/statistik', label: de.nav.statistics, icon: '📊' },
|
|
// FEAT-13: Abgabeverträge + Zuchtprofil
|
|
{ to: '/vertraege', label: de.nav.contracts, icon: '📄' },
|
|
{ to: '/einstellungen', label: de.nav.settings, icon: '⚙️' },
|
|
// WEB-0b: CMS-Verwaltung der öffentlichen Webseite
|
|
{ to: '/webseite', label: de.nav.website, icon: '🌐' },
|
|
{ to: '/hilfe', label: de.nav.help, icon: '❓' },
|
|
]
|
|
|
|
const linkClass = ({ isActive }: { isActive: boolean }) =>
|
|
isActive ? 'nav-link nav-link--active' : 'nav-link'
|
|
|
|
/**
|
|
* App-Grundgerüst, mobile-first:
|
|
* - Smartphone: Kopfzeile oben, Tab-Leiste unten (4 Haupt-Tabs + „Mehr“).
|
|
* - Laptop (ab 768px): Seitenleiste links mit allen Einträgen, kein „Mehr“.
|
|
*/
|
|
export default function AppShell() {
|
|
const [moreOpen, setMoreOpen] = useState(false)
|
|
|
|
return (
|
|
<div className="app-shell">
|
|
<header className="app-header">
|
|
<span className="app-logo" aria-hidden="true">🐭</span>
|
|
<h1 className="app-title">{de.app.title}</h1>
|
|
</header>
|
|
|
|
<nav className="app-nav" aria-label={de.nav.mainNavigation}>
|
|
<div className="nav-primary">
|
|
{PRIMARY.map((item) => (
|
|
<NavLink key={item.to} to={item.to} end={item.end} className={linkClass}>
|
|
<span className="nav-icon" aria-hidden="true">{item.icon}</span>
|
|
<span className="nav-label">{item.label}</span>
|
|
</NavLink>
|
|
))}
|
|
<button
|
|
type="button"
|
|
className={moreOpen ? 'nav-link nav-more-btn nav-link--active' : 'nav-link nav-more-btn'}
|
|
aria-expanded={moreOpen}
|
|
onClick={() => setMoreOpen((o) => !o)}
|
|
>
|
|
<span className="nav-icon" aria-hidden="true">☰</span>
|
|
<span className="nav-label">{de.nav.more}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className={moreOpen ? 'nav-secondary nav-secondary--open' : 'nav-secondary'}>
|
|
{SECONDARY.map((item) => (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
className={linkClass}
|
|
onClick={() => setMoreOpen(false)}
|
|
>
|
|
<span className="nav-icon" aria-hidden="true">{item.icon}</span>
|
|
<span className="nav-label">{item.label}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
|
|
<main className="app-main">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|