feat: implement premium responsive mobile shell and drawer

src/app/dashboard/layout.tsx

@@ -1,11 +1,9 @@
 import type { Metadata } from "next";
-import { LogOut } from "lucide-react";
 
 import { signOut } from "@/auth";
 import { requireKitaSession } from "@/lib/auth-utils";
 import { prisma } from "@/lib/prisma";
-import { Button } from "@/components/ui/button";
-import { SidebarNav } from "@/components/dashboard/sidebar-nav";
+import { DashboardShell } from "@/components/dashboard/dashboard-shell";
 
 export const metadata: Metadata = {
   robots: {
@@ -15,11 +13,11 @@ export const metadata: Metadata = {
 };
 
 // =====================================================================
-// Dashboard-Layout · Linke Sidebar
+// Dashboard-Layout · Responsive App Shell
 // ---------------------------------------------------------------------
 // Server Component: liest kitaId aus der Session, holt den Kita-Namen
-// aus der DB und rendert das App-Shell (Sidebar + main content area).
-// Der eigentliche Seiteninhalt kommt via {children} rein.
+// aus der DB und rendert die responsive DashboardShell (mit Desktop-Sidebar
+// und Mobile-Drawer).
 // =====================================================================
 
 export default async function DashboardLayout({
@@ -35,75 +33,20 @@ export default async function DashboardLayout({
   });
   const displayName = session.user.name ?? session.user.email ?? "Kita-Planer";
 
+  async function handleSignOut() {
+    "use server";
+    await signOut({ redirectTo: "/" });
+  }
+
   return (
-    <div className="grid min-h-screen grid-cols-[256px_minmax(0,1fr)] bg-[var(--bg)] max-[760px]:grid-cols-1">
-            {/* ── 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]:relative max-[760px]:h-auto">
-        {/* 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">
-            {kita.name.slice(0, 1).toUpperCase()}
-          </div>
-          <div className="min-w-0">
-            <p className="truncate text-sm font-semibold leading-none text-[var(--ink)]">
-              {kita.name}
-            </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={session.user.role} />
-        </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)]">
-              {getInitials(displayName)}
-            </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)]">
-                {session.user.role}
-              </p>
-            </div>
-          </div>
-          <form
-            action={async () => {
-              "use server";
-              await signOut({ redirectTo: "/" });
-            }}
-          >
-            <Button
-              type="submit"
-              variant="ghost"
-              size="sm"
-              className="w-full justify-start"
-            >
-              <LogOut className="h-4 w-4" />
-              Abmelden
-            </Button>
-          </form>
-        </div>
-      </aside>
-
-      {/* ── Main Content ──────────────────────────────────────────────── */}
-      <main className="min-w-0 overflow-y-auto">
-        {children}
-      </main>
-    </div>
+    <DashboardShell
+      kitaName={kita.name}
+      userName={displayName}
+      userRole={session.user.role}
+      signOutAction={handleSignOut}
+    >
+      {children}
+    </DashboardShell>
   );
 }
 
-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();
-}

src/components/dashboard/dashboard-shell.tsx

@@ -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();
+}