feat: implement premium responsive mobile shell and drawer
This commit is contained in:
t.indorf
@@ -0,0 +1,162 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { LogOut, Menu, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { SidebarNav } from "./sidebar-nav";
|
||||
import { UserRole } from "@prisma/client";
|
||||
|
||||
type DashboardShellProps = {
|
||||
kitaName: string;
|
||||
userName: string;
|
||||
userRole: UserRole;
|
||||
children: React.ReactNode;
|
||||
signOutAction: () => void | Promise<void>;
|
||||
};
|
||||
|
||||
export function DashboardShell({
|
||||
kitaName,
|
||||
userName,
|
||||
userRole,
|
||||
children,
|
||||
signOutAction,
|
||||
}: DashboardShellProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const displayName = userName;
|
||||
const initials = getInitials(displayName);
|
||||
|
||||
return (
|
||||
<div className="grid min-h-screen grid-cols-[256px_minmax(0,1fr)] bg-[var(--bg)] max-[760px]:grid-cols-1">
|
||||
{/* ── Desktop Sidebar ── */}
|
||||
<aside className="print:hidden sticky top-0 flex h-screen shrink-0 flex-col border-r border-[var(--hairline)] bg-[var(--surface)] max-[760px]:hidden">
|
||||
{/* Logo / Kita-Name */}
|
||||
<div className="flex h-[82px] items-center gap-3 border-b border-[var(--hairline-soft)] px-5">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-deep)] text-[13px] font-bold text-white">
|
||||
{kitaName.slice(0, 1).toUpperCase()}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-semibold leading-none text-[var(--ink)]">
|
||||
{kitaName}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[var(--ink-soft)]">Kita-Planer</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex-1 overflow-y-auto py-6">
|
||||
<SidebarNav role={userRole} />
|
||||
</div>
|
||||
|
||||
{/* Footer: User-Info + Abmelden */}
|
||||
<div className="border-t border-[var(--hairline-soft)] p-4">
|
||||
<div className="mb-3 flex items-center gap-2.5 px-1">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--accent-soft)] text-[11px] font-semibold text-[var(--accent-deep)]">
|
||||
{initials}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-xs font-semibold text-[var(--ink)]">
|
||||
{displayName}
|
||||
</p>
|
||||
<p className="truncate text-[11px] font-semibold uppercase text-[var(--ink-muted)]">
|
||||
{userRole}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<form action={signOutAction}>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-[var(--ink-soft)] hover:text-[var(--danger)]"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Abmelden
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* ── Mobile Top Header Bar ── */}
|
||||
<header className="print:hidden hidden max-[760px]:flex sticky top-0 z-40 h-16 items-center justify-between border-b border-[var(--hairline)] bg-[var(--surface)] px-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-deep)] text-[13px] font-bold text-white">
|
||||
{kitaName.slice(0, 1).toUpperCase()}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-semibold leading-none text-[var(--ink)]">
|
||||
{kitaName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
aria-label={isOpen ? "Menü schließen" : "Menü öffnen"}
|
||||
>
|
||||
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
{/* ── Mobile Sidebar Drawer/Overlay ── */}
|
||||
{isOpen && (
|
||||
<div className="print:hidden fixed inset-0 z-30 hidden max-[760px]:block">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity"
|
||||
onClick={() => setIsOpen(false)}
|
||||
/>
|
||||
{/* Drawer content */}
|
||||
<aside className="fixed bottom-0 top-16 left-0 flex w-[280px] max-w-[85vw] flex-col border-r border-[var(--hairline)] bg-[var(--surface)] shadow-2xl transition-transform">
|
||||
<div className="flex-1 overflow-y-auto py-6" onClick={() => setIsOpen(false)}>
|
||||
<SidebarNav role={userRole} />
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-[var(--hairline-soft)] p-4">
|
||||
<div className="mb-3 flex items-center gap-2.5 px-1">
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--accent-soft)] text-[11px] font-semibold text-[var(--accent-deep)]">
|
||||
{initials}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-xs font-semibold text-[var(--ink)]">
|
||||
{displayName}
|
||||
</p>
|
||||
<p className="truncate text-[11px] font-semibold uppercase text-[var(--ink-muted)]">
|
||||
{userRole}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<form action={signOutAction}>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start text-[var(--ink-soft)] hover:text-[var(--danger)]"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Abmelden
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Main Content Area ── */}
|
||||
<main className="min-w-0 overflow-y-auto max-[760px]:pt-0">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getInitials(value: string) {
|
||||
const parts = value.trim().split(/\s+/).filter(Boolean);
|
||||
if (parts.length >= 2) {
|
||||
return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
|
||||
}
|
||||
return value.slice(0, 2).toUpperCase();
|
||||
}
|
||||
Reference in New Issue
Block a user