From 101601c287aaf8fb881671386bb042ebe773dee6 Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Sun, 1 Dec 2024 10:53:04 +0100
Subject: [PATCH] NORY-8: add sidebar to the application

Moved theme toggle and logout button to the footer of the sidebar
---
 dashboard/src/app/application/page.tsx   |   3 +
 dashboard/src/app/layout.tsx             |  12 ++-
 dashboard/src/app/page.tsx               |  17 +---
 dashboard/src/app/user/page.tsx          |   3 +
 dashboard/src/components/app-sidebar.tsx | 103 +++++++++++++++++++++++
 dashboard/src/components/auth/logout.tsx |  16 ----
 6 files changed, 121 insertions(+), 33 deletions(-)
 create mode 100644 dashboard/src/app/application/page.tsx
 create mode 100644 dashboard/src/app/user/page.tsx
 create mode 100644 dashboard/src/components/app-sidebar.tsx
 delete mode 100644 dashboard/src/components/auth/logout.tsx

diff --git a/dashboard/src/app/application/page.tsx b/dashboard/src/app/application/page.tsx
new file mode 100644
index 0000000..eda2025
--- /dev/null
+++ b/dashboard/src/app/application/page.tsx
@@ -0,0 +1,3 @@
+export default async function ApplicationPage() {
+    return <></>;
+}
diff --git a/dashboard/src/app/layout.tsx b/dashboard/src/app/layout.tsx
index 9c43841..68326d3 100644
--- a/dashboard/src/app/layout.tsx
+++ b/dashboard/src/app/layout.tsx
@@ -5,6 +5,8 @@ import { cn } from '@/lib/utils';
 import { Toaster } from '@/components/ui/sonner';
 import React from 'react';
 import { ThemeProvider } from 'next-themes';
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
+import { AppSidebar } from '@/components/app-sidebar';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -53,8 +55,14 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
                 enableSystem
                 disableTransitionOnChange
             >
-                {children}
-                <Toaster/>
+                <SidebarProvider>
+                    <AppSidebar/>
+                    <SidebarTrigger className="m-2"/>
+                    <main className="w-full min-h-screen">
+                        {children}
+                        <Toaster/>
+                    </main>
+                </SidebarProvider>
             </ThemeProvider>
         </main>
         </body>
diff --git a/dashboard/src/app/page.tsx b/dashboard/src/app/page.tsx
index 3d3dd10..279b6e1 100644
--- a/dashboard/src/app/page.tsx
+++ b/dashboard/src/app/page.tsx
@@ -1,16 +1,3 @@
-'use server';
-
-import React from 'react';
-import { ThemeToggle } from '@/components/themeToggle';
-import { LogoutButton } from '@/components/auth/logout';
-
-export default async function Page() {
-    return (
-        <div className="flex flex-col min-h-screen items-center text-3xl relative space-y-4">
-            <div className="absolute flex flex-row w-fit items-center space-x-4 top-4 right-4">
-                <ThemeToggle/>
-                <LogoutButton/>
-            </div>
-        </div>
-    );
+export default async function RootPage() {
+    return <></>;
 }
diff --git a/dashboard/src/app/user/page.tsx b/dashboard/src/app/user/page.tsx
new file mode 100644
index 0000000..2beb9f6
--- /dev/null
+++ b/dashboard/src/app/user/page.tsx
@@ -0,0 +1,3 @@
+export default async function UserPage() {
+    return <></>;
+}
diff --git a/dashboard/src/components/app-sidebar.tsx b/dashboard/src/components/app-sidebar.tsx
new file mode 100644
index 0000000..d506db8
--- /dev/null
+++ b/dashboard/src/components/app-sidebar.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from '@/components/ui/sidebar';
+import { AppWindow, Home, LogOut, Moon, Sun, Users } from 'lucide-react';
+import React from 'react';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useTheme } from 'next-themes';
+import { LogoutLink } from '@/ory';
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+
+    const { setTheme } = useTheme();
+
+    const items = [
+        {
+            title: 'Home',
+            url: '/',
+            icon: Home,
+        },
+        {
+            title: 'Users',
+            url: '/user',
+            icon: Users,
+        },
+        {
+            title: 'Applications',
+            url: '/application',
+            icon: AppWindow,
+        },
+    ];
+
+    return (
+        <Sidebar variant="floating" {...props} collapsible="icon">
+            <SidebarContent>
+                <SidebarGroup>
+                    <SidebarGroupLabel>Application</SidebarGroupLabel>
+                    <SidebarGroupContent>
+                        <SidebarMenu>
+                            {items.map((item) => (
+                                <SidebarMenuItem key={item.title}>
+                                    <SidebarMenuButton asChild>
+                                        <a href={item.url}>
+                                            <item.icon/>
+                                            <span>{item.title}</span>
+                                        </a>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+                            ))}
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter>
+                <SidebarMenu>
+                    <SidebarMenuItem>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <SidebarMenuButton>
+                                    <Sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"/>
+                                    <Moon
+                                        className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"/>
+                                    <span>Change Theme</span>
+                                </SidebarMenuButton>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                                <DropdownMenuItem onClick={() => setTheme('light')}>
+                                    Light
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onClick={() => setTheme('dark')}>
+                                    Dark
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onClick={() => setTheme('system')}>
+                                    System
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </SidebarMenuItem>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton onClick={LogoutLink()}>
+                            <LogOut/>
+                            <span>Logout</span>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarFooter>
+        </Sidebar>
+    );
+}
diff --git a/dashboard/src/components/auth/logout.tsx b/dashboard/src/components/auth/logout.tsx
deleted file mode 100644
index 9c34c87..0000000
--- a/dashboard/src/components/auth/logout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client';
-
-import { LogOut } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { LogoutLink } from '@/ory';
-
-export function LogoutButton() {
-
-    const onLogout = LogoutLink();
-
-    return (
-        <Button variant="outline" size="icon" onClick={onLogout}>
-            <LogOut className="h-[1.2rem] w-[1.2rem]"/>
-        </Button>
-    );
-}