Gulum
b83e96f552
Detailseite (Rennmausakte): - Neugestaltung: Hero-Foto + Overlay, Schnellfakten-Pills, Karten-Sektionen, Charakter als Chips, getabte Fotos/Gesundheit/Gewicht. - Eltern (Vater/Mutter) als Links; Charakter-Karte klappt bei Status Abgabe/Verstorben/Abgegeben ein (nur Zucht/Liebhaber offen). - Gehege wird bei abgegebenen/verstorbenen Tieren ausgeblendet (Detail + Formular). Listen: - Infinite Scroll auf allen Listen (Rennmäuse, Würfe, Gehege, Verträge, Anfragen, Kontakte) via useInfiniteList/useInfiniteSentinel; stabile Sortierung mit id-Tiebreaker (keine doppelten Keys), Back-to-top-Button. - Kontakte: Rolle-Filter (Züchter/Abnehmer) als Quick-Chips + Sticky-Header. Zucht-Nachname: - Namens-Anhängsel der Zucht in den Einstellungen + je Züchter-Kontakt (Backend-Spalten + Migration); eigene Tiere zeigen „Name + Suffix". - „Eigene Zucht" ist die Standard-Herkunft neuer Tiere. Weiteres: - Gehege-Bilder: Upload/Galerie auf der Gehege-Detailseite (Backend EnclosurePhoto + Endpoints + Migration, geteilte Dateiablage). - Toast-Rückmeldungen für alle Speichern-Aktionen. - Checkboxen durch mobile-freundliche Toggle-Schalter ersetzt. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
94 lines
3.4 KiB
TypeScript
94 lines
3.4 KiB
TypeScript
import { useState } from 'react'
|
|
import type { ReactNode } from 'react'
|
|
import { NavLink, Outlet } from 'react-router-dom'
|
|
import { de } from '../strings/de'
|
|
import GerbilIcon from './GerbilIcon'
|
|
import { BreederSuffixProvider } from './BreederSuffixProvider'
|
|
import './appShell.css'
|
|
|
|
interface NavItem {
|
|
to: string
|
|
label: string
|
|
icon: ReactNode
|
|
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: <GerbilIcon size="1.25em" /> },
|
|
{ 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: '/farbkatalog', label: de.nav.colorCatalog, 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">
|
|
<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">
|
|
<BreederSuffixProvider>
|
|
<Outlet />
|
|
</BreederSuffixProvider>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|