ah-admin/Mieterportal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.7: Responsive Layout — Sidebar skaliert (lg/xl), Mobile-Ansicht bis 1024 px, Footer bricht um

Browse Source
This commit is contained in:
ah-admin
2026-10-02 14:07:57 +02:00
parent 6685d90cfd
commit a02267c732
4 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppLayout.tsx
+9 -9
View File
@@ -41,7 +41,7 @@ export default function AppLayout() {
return (
<div className="flex min-h-screen bg-slate-50 dark:bg-slate-950">
{/* Sidebar */}
<aside className="hidden w-72 flex-col bg-[#22333b] text-white md:flex">
<aside className="hidden w-64 flex-col bg-[#22333b] text-white lg:flex xl:w-72">
<div className="flex items-center gap-3 px-6 py-6">
<img src={logo} alt="Logo Hinterstein Immobilien" className="h-12 w-12 rounded-full bg-white/95 object-contain p-1" />
<div>
@@ -86,16 +86,16 @@ export default function AppLayout() {
</nav>
<div className="border-t border-white/10 p-4">
<div className="mb-2 flex items-center gap-2 px-2 text-xs text-slate-300/70">
<Building2 className="h-3.5 w-3.5" />
3 Häuser · 50 Wohnungen
<div className="mb-2 flex flex-wrap items-center gap-x-2 gap-y-1 px-2 text-xs text-slate-300/70">
<Building2 className="h-3.5 w-3.5 shrink-0" />
<span>3 Häuser · 50 Wohnungen</span>
</div>
<div className="flex items-center gap-2">
<button
onClick={abmelden}
className="flex flex-1 items-center gap-3 rounded-xl px-4 py-2.5 text-sm text-slate-200/80 transition hover:bg-white/10 hover:text-white"
className="flex min-w-0 flex-1 items-center gap-3 rounded-xl px-4 py-2.5 text-sm text-slate-200/80 transition hover:bg-white/10 hover:text-white"
>
<LogOut className="h-4 w-4" /> Abmelden
<LogOut className="h-4 w-4 shrink-0" /> <span className="truncate">Abmelden</span>
</button>
<ThemeToggle dunkelStil />
</div>
@@ -104,12 +104,12 @@ export default function AppLayout() {
{/* Mobile top bar */}
<div className="flex min-h-screen flex-1 flex-col">
<header className="sticky top-0 z-20 flex items-center gap-3 border-b bg-white/90 px-4 py-3 backdrop-blur dark:bg-slate-900/90 md:hidden">
<header className="sticky top-0 z-20 flex items-center gap-3 border-b bg-white/90 px-4 py-3 backdrop-blur dark:bg-slate-900/90 lg:hidden">
<img src={logo} alt="Logo Hinterstein Immobilien" className="h-9 w-9 rounded-full bg-white object-contain p-0.5 ring-1 ring-slate-200" />
<div className="flex-1 font-bold text-[#22333b] dark:text-amber-100">Hinterstein Immobilien</div>
<ThemeToggle />
</header>
<nav className="sticky top-[57px] z-10 flex gap-1 overflow-x-auto border-b bg-white px-2 py-2 dark:bg-slate-900 md:hidden">
<nav className="sticky top-[57px] z-10 flex gap-1 overflow-x-auto border-b bg-white px-2 py-2 dark:bg-slate-900 lg:hidden">
{alleNavItems.map(({ to, label, icon: Icon, end }) => (
<NavLink
key={to}
@@ -127,7 +127,7 @@ export default function AppLayout() {
))}
</nav>
<main className="flex-1 p-4 md:p-8">
<main className="flex-1 p-4 lg:p-8">
<Outlet />
</main>
</div>