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

@@ -0,0 +1,3 @@
+export default async function ApplicationPage() {
+    return <></>;
+}

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}
+                <SidebarProvider>
-                <Toaster/>
+                    <AppSidebar/>
+                    <SidebarTrigger className="m-2"/>
+                    <main className="w-full min-h-screen">
+                        {children}
+                        <Toaster/>
+                    </main>
+                </SidebarProvider>
             </ThemeProvider>
         </main>
         </body>

dashboard/src/app/page.tsx

@@ -1,16 +1,3 @@
-'use server';
+export default async function RootPage() {
-
+    return <></>;
-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>
-    );
 }

dashboard/src/app/user/page.tsx

@@ -0,0 +1,3 @@
+export default async function UserPage() {
+    return <></>;
+}

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

dashboard/src/components/auth/logout.tsx

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