Gulum/GerbilManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT-7: AppShell 'Mehr' overflow nav (phone: 4 tabs + Mehr sheet; desktop: all 7) + de.nav.more

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Gulum
2026-06-06 00:47:07 +02:00
parent 7ab463d47e
commit a47fbef785
3 changed files with 126 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
gerbil-manager-web/src/components/AppShell.tsx
View File

@@ -1,24 +1,40 @@
import { useState } from 'react'
import { NavLink, Outlet } from 'react-router-dom'
import { de } from '../strings/de'
import './appShell.css'
const navItems = [
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: '/', label: de.nav.home, icon: '🏠', end: true },
{ to: '/rennmaeuse', label: de.nav.gerbils, icon: '🐭', end: false },
{ to: '/wuerfe', label: de.nav.litters, icon: '🍼', end: false },
{ to: '/becken', label: de.nav.enclosures, icon: '🛁', end: false },
{ to: '/kontakte', label: de.nav.contacts, icon: '📇', end: false },
{ to: '/genetik', label: de.nav.genetics, icon: '🧬', end: false },
// FEAT-7: vorerst 7. Tab; „Mehr“-Overflow für das Smartphone ist mit Kevin
// abgestimmt (FEAT-7-Konversation) und ersetzt diesen Eintrag dann.
{ to: '/statistik', label: de.nav.statistics, icon: '📊', end: false },
{ 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: '/becken', label: de.nav.enclosures, icon: '🛁' },
{ to: '/kontakte', label: de.nav.contacts, icon: '📇' },
{ to: '/statistik', label: de.nav.statistics, 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
* - Laptop (ab 768px): Seitenleiste links, Inhalt rechts
* - 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">
@@ -27,21 +43,37 @@ export default function AppShell() {
</header>
<nav className="app-nav" aria-label={de.nav.mainNavigation}>
{navItems.map((item) => (
<NavLink
key={item.to}
to={item.to}
end={item.end}
className={({ isActive }) =>
isActive ? 'nav-link nav-link--active' : 'nav-link'
}
<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">
{item.icon}
</span>
<span className="nav-label">{item.label}</span>
</NavLink>
))}
<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">