added sidebar

modules/shared/data/sidebar-menu-content.ts

@@ -0,0 +1,63 @@
+import { 
+    FileTextIcon,
+        FoldersIcon,
+        KeyIcon,
+        LayoutDashboardIcon, 
+        LucideIcon, 
+        SettingsIcon, 
+        UserRoundIcon, 
+        UsersRoundIcon 
+    } 
+from "lucide-react";
+
+export type MenuItem = {
+    title: string;
+    url: string;
+    icon: LucideIcon;
+}
+
+export const adminMenu: MenuItem[] = [
+    {
+        title: "Dashboard",
+        url: "/admin/dashboard",
+        icon: LayoutDashboardIcon
+    },
+    {
+        title: "Clients",
+        url: "/admin/clients",
+        icon: UsersRoundIcon
+    },
+    {
+        title: "Settings",
+        url: "/admin/settings",
+        icon: SettingsIcon
+    }
+]
+
+export const clientMenu: MenuItem[] = [
+    {
+        title: "Dashboard",
+        url: "/client/dashboard",
+        icon: LayoutDashboardIcon
+    },
+    {
+        title: "Stammdaten",
+        url: "/client/data",
+        icon: UserRoundIcon
+    },
+    {
+        title: "Rechungen",
+        url: "/client/billing",
+        icon: FileTextIcon
+    },
+    {
+        title: "Passwörter",
+        url: "/client/passwords",
+        icon: KeyIcon
+    },
+    {
+        title: "Dokumente",
+        url: "/client/storage",
+        icon: FoldersIcon
+    }
+]

modules/shared/types/user.ts

@@ -0,0 +1,4 @@
+import { verifySession } from "@/lib/supabase/dal";
+
+
+export type Session = Awaited<ReturnType<typeof verifySession>>

modules/shared/ui/components/app-sidebar.tsx

@@ -0,0 +1,57 @@
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarHeader,
+    SidebarMenu,
+} from "@/components/ui/sidebar";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Session } from "../../types/user";
+import { adminMenu, clientMenu } from "../../data/sidebar-menu-content";
+import { LogoutButton } from "./logout-button";
+import { SidebarMenuLink } from "./sidebar-menu-link";
+import UserBadge from "./user-badge";
+
+export function AppSidebar({ session }: { session: Session }) {
+    const menu = session.isAdmin ? adminMenu : clientMenu;
+    const avatarUrl = `https://api.dicebear.com/10.x/waves/svg?seed=${encodeURIComponent(session.email)}`;
+
+    return (
+        <Sidebar>
+            <SidebarHeader className="gap-4 p-4">
+                <div className="flex min-w-0 items-center gap-3">
+                    <Avatar size="lg" className="shrink-0">
+                        <AvatarImage src={avatarUrl} alt={session.name} />
+                        <AvatarFallback>{session.name.slice(0, 2).toUpperCase()}</AvatarFallback>
+                    </Avatar>
+                    <div className="flex min-w-0 flex-col overflow-hidden">
+                        <span className="truncate text-sm font-medium">{session.name}</span>
+                        <span className="text-xs text-muted-foreground"><UserBadge session={session}/></span>
+                    </div>
+                </div>
+            </SidebarHeader>
+            <SidebarContent className="py-2">
+                <SidebarGroup>
+                    <SidebarGroupContent>
+                        <SidebarMenu className="gap-1.5">
+                            {menu.map((item) => (
+                                <SidebarMenuLink
+                                    key={item.url}
+                                    title={item.title}
+                                    url={item.url}
+                                    icon={<item.icon className="size-4.5" />}
+                                />
+                            ))}
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter className="gap-3 p-4">
+                <p className="truncate text-xs text-muted-foreground">{session.email}</p>
+                <LogoutButton />
+            </SidebarFooter>
+        </Sidebar>
+    )
+}

modules/shared/ui/components/logout-button.tsx

@@ -0,0 +1,14 @@
+import { LogOutIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { logout } from "@/modules/loginPage/actions/auth";
+
+export function LogoutButton() {
+    return (
+        <form action={logout}>
+            <Button variant="destructive" type="submit" className="w-full">
+                <LogOutIcon />
+                Logout
+            </Button>
+        </form>
+    )
+}

modules/shared/ui/components/sidebar-menu-link.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+
+export function SidebarMenuLink({
+    title,
+    url,
+    icon,
+}: {
+    title: string;
+    url: string;
+    icon: React.ReactNode;
+}) {
+    const pathname = usePathname();
+    const isActive = pathname === url;
+
+    return (
+        <SidebarMenuItem>
+            <SidebarMenuButton
+                render={<Link href={url} />}
+                isActive={isActive}
+                className="h-10 text-[0.95rem]"
+            >
+                {icon}
+                <span>{title}</span>
+            </SidebarMenuButton>
+        </SidebarMenuItem>
+    )
+}

modules/shared/ui/components/user-badge.tsx

@@ -0,0 +1,12 @@
+import { Badge } from "@/components/ui/badge"
+import { Session } from "../../types/user"
+
+const UserBadge = ({session}: {session: Session}) => {
+  return (
+    <Badge className={session.isAdmin ? "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-300" : "bg-purple-100  text-purple-700 dark:bg-purple-950 dark:text-purple-300" }>
+        {session.isAdmin ? "Admin" : "Kunde"}
+    </Badge>
+  )
+}
+
+export default UserBadge