feat: implement premium responsive mobile shell and drawer
This commit is contained in:
t.indorf
@@ -1,11 +1,9 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { LogOut } from "lucide-react";
|
|
||||||
|
|
||||||
import { signOut } from "@/auth";
|
import { signOut } from "@/auth";
|
||||||
import { requireKitaSession } from "@/lib/auth-utils";
|
import { requireKitaSession } from "@/lib/auth-utils";
|
||||||
import { prisma } from "@/lib/prisma";
|
import { prisma } from "@/lib/prisma";
|
||||||
import { Button } from "@/components/ui/button";
|
import { DashboardShell } from "@/components/dashboard/dashboard-shell";
|
||||||
import { SidebarNav } from "@/components/dashboard/sidebar-nav";
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
robots: {
|
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
|
// Server Component: liest kitaId aus der Session, holt den Kita-Namen
|
||||||
// aus der DB und rendert das App-Shell (Sidebar + main content area).
|
// aus der DB und rendert die responsive DashboardShell (mit Desktop-Sidebar
|
||||||
// Der eigentliche Seiteninhalt kommt via {children} rein.
|
// und Mobile-Drawer).
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
|
|
||||||
export default async function DashboardLayout({
|
export default async function DashboardLayout({
|
||||||
@@ -35,75 +33,20 @@ export default async function DashboardLayout({
|
|||||||
});
|
});
|
||||||
const displayName = session.user.name ?? session.user.email ?? "Kita-Planer";
|
const displayName = session.user.name ?? session.user.email ?? "Kita-Planer";
|
||||||
|
|
||||||
|
async function handleSignOut() {
|
||||||
|
"use server";
|
||||||
|
await signOut({ redirectTo: "/" });
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="grid min-h-screen grid-cols-[256px_minmax(0,1fr)] bg-[var(--bg)] max-[760px]:grid-cols-1">
|
<DashboardShell
|
||||||
{/* ── Sidebar ───────────────────────────────────────────────────── */}
|
kitaName={kita.name}
|
||||||
<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">
|
userName={displayName}
|
||||||
{/* Logo / Kita-Name */}
|
userRole={session.user.role}
|
||||||
<div className="flex h-[82px] items-center gap-3 border-b border-[var(--hairline-soft)] px-5">
|
signOutAction={handleSignOut}
|
||||||
<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()}
|
{children}
|
||||||
</div>
|
</DashboardShell>
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -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