109 lines
3.8 KiB
TypeScript
109 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { LogOut } from "lucide-react";
|
|
|
|
import { authClient } from "@/lib/auth-client";
|
|
import { Button } from "@/components/ui/button";
|
|
import { DashboardThemeToggle } from "@/components/dashboard-theme";
|
|
import { dashboardNavigation } from "@/lib/dashboard-navigation";
|
|
import { useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export function DashboardSidebar() {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const [isSigningOut, setIsSigningOut] = useState(false);
|
|
const [signOutError, setSignOutError] = useState<string | null>(null);
|
|
const { data: session, isPending } = authClient.useSession();
|
|
|
|
return (
|
|
<aside className="flex w-full shrink-0 flex-col border-b bg-sidebar text-sidebar-foreground md:sticky md:top-0 md:min-h-dvh md:w-72 md:border-b-0 md:border-r">
|
|
<div className="flex h-16 items-center gap-3 border-b px-4">
|
|
<div className="flex size-9 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
|
|
W
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-semibold">WebDev Pipeline</p>
|
|
<p className="truncate text-xs text-muted-foreground">
|
|
Akquise Workspace
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<nav
|
|
className="flex gap-1 overflow-x-auto p-3 md:grid md:overflow-visible"
|
|
aria-label="Dashboard navigation"
|
|
>
|
|
{dashboardNavigation.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive =
|
|
item.href === "/dashboard"
|
|
? pathname === item.href
|
|
: pathname.startsWith(item.href);
|
|
|
|
return (
|
|
<Link
|
|
aria-current={isActive ? "page" : undefined}
|
|
className={cn(
|
|
"flex h-9 shrink-0 items-center gap-2 rounded-lg px-3 text-sm font-medium outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50",
|
|
isActive
|
|
? "bg-sidebar-primary text-sidebar-primary-foreground"
|
|
: "text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
)}
|
|
href={item.href}
|
|
key={item.href}
|
|
>
|
|
<Icon className="size-4" />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="border-t p-3 md:mt-auto">
|
|
<div className="mb-3 rounded-lg border bg-background p-3 md:block">
|
|
<p className="truncate text-sm font-medium">
|
|
{isPending ? "Lade..." : session?.user?.name ?? "Admin"}
|
|
</p>
|
|
<p className="truncate text-xs text-muted-foreground">
|
|
{session?.user?.email ?? "admin@local"}
|
|
</p>
|
|
</div>
|
|
<div className="mb-2">
|
|
<DashboardThemeToggle />
|
|
</div>
|
|
<Button
|
|
className="w-full justify-start"
|
|
variant="outline"
|
|
onClick={async () => {
|
|
setIsSigningOut(true);
|
|
setSignOutError(null);
|
|
|
|
try {
|
|
await authClient.signOut();
|
|
router.replace("/login");
|
|
router.refresh();
|
|
} catch {
|
|
setSignOutError("Abmeldung fehlgeschlagen.");
|
|
} finally {
|
|
setIsSigningOut(false);
|
|
}
|
|
}}
|
|
disabled={isSigningOut}
|
|
>
|
|
<LogOut />
|
|
{isSigningOut ? "Abmeldung läuft..." : "Abmelden"}
|
|
</Button>
|
|
{signOutError ? (
|
|
<p className="mt-2 text-xs text-destructive" role="status">
|
|
{signOutError}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|