From 41334bbd9b568d151e81e8f89e5c3253268dbead Mon Sep 17 00:00:00 2001
From: KartoffelChips <104089082+KartoffelChipss@users.noreply.github.com>
Date: Sun, 19 Apr 2026 22:54:30 +0200
Subject: [PATCH] Add user menu to navbar & update nav design

---
 frontend/src/components/nav-menu.tsx         | 31 -------
 frontend/src/components/navbar.tsx           | 87 ++++++++++++++------
 frontend/src/components/navigation-sheet.tsx | 26 ------
 3 files changed, 63 insertions(+), 81 deletions(-)
 delete mode 100644 frontend/src/components/nav-menu.tsx
 delete mode 100644 frontend/src/components/navigation-sheet.tsx

diff --git a/frontend/src/components/nav-menu.tsx b/frontend/src/components/nav-menu.tsx
deleted file mode 100644
index 167f38e..0000000
--- a/frontend/src/components/nav-menu.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { ComponentProps } from 'react';
-import {
-    NavigationMenu,
-    NavigationMenuItem,
-    NavigationMenuLink,
-    NavigationMenuList,
-    navigationMenuTriggerStyle,
-} from '@/components/ui/navigation-menu';
-import { Link } from 'react-router';
-
-export const NavMenu = (props: ComponentProps<typeof NavigationMenu>) => (
-    <NavigationMenu {...props}>
-        <NavigationMenuList className="space-x-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start data-[orientation=vertical]:justify-start">
-            <NavigationMenuItem>
-                <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-                    <Link to="/">Home</Link>
-                </NavigationMenuLink>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-                <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-                    <Link to="/analytics">Analytics</Link>
-                </NavigationMenuLink>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-                <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-                    <Link to="/settings">Settings</Link>
-                </NavigationMenuLink>
-            </NavigationMenuItem>
-        </NavigationMenuList>
-    </NavigationMenu>
-);
diff --git a/frontend/src/components/navbar.tsx b/frontend/src/components/navbar.tsx
index 85612d3..ea2f75b 100644
--- a/frontend/src/components/navbar.tsx
+++ b/frontend/src/components/navbar.tsx
@@ -1,8 +1,16 @@
 import { Logo } from '@/components/logo';
-import { NavMenu } from '@/components/nav-menu';
-import { NavigationSheet } from '@/components/navigation-sheet';
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
 import { Link } from 'react-router';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ChartLine, CircleUserRound, LogOut, Settings } from 'lucide-react';
 
 interface NavbarProps {
     userName?: string;
@@ -11,33 +19,64 @@ interface NavbarProps {
 
 const Navbar = ({ userName, profilePictureUrl }: NavbarProps) => {
     return (
-        <nav className="inset-x-4 my-6 mx-auto h-16 max-w-(--breakpoint-xl) rounded-full border bg-background">
-            <div className="mx-auto flex h-full items-center justify-between px-4">
+        <nav className="my-6 mx-auto max-w-(--breakpoint-xl) rounded-full bg-background">
+            <div className="mx-auto flex items-center justify-between px-4">
                 <Link to="/">
                     <Logo />
                 </Link>
 
-                {/* Desktop Menu */}
-                <NavMenu className="hidden md:block" />
-
                 <div className="flex items-center gap-3">
-                    <Avatar>
-                        <AvatarImage src={profilePictureUrl} alt={userName + ' profile image'} />
-                        <AvatarFallback className="rounded-lg">
-                            {userName
-                                ? userName
-                                      .split(' ')
-                                      .map((n) => n[0])
-                                      .join('')
-                                      .toUpperCase()
-                                : 'A'}
-                        </AvatarFallback>
-                    </Avatar>
-
-                    {/* Mobile Menu */}
-                    <div className="md:hidden">
-                        <NavigationSheet />
-                    </div>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Avatar>
+                                <AvatarImage
+                                    src={profilePictureUrl}
+                                    alt={userName + ' profile image'}
+                                />
+                                <AvatarFallback className="rounded-lg">
+                                    {userName
+                                        ? userName
+                                              .split(' ')
+                                              .map((n) => n[0])
+                                              .join('')
+                                              .toUpperCase()
+                                        : 'A'}
+                                </AvatarFallback>
+                            </Avatar>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent className="w-40" align="end">
+                            <DropdownMenuGroup>
+                                <DropdownMenuLabel>{userName}</DropdownMenuLabel>
+                                <DropdownMenuItem asChild>
+                                    <Link to="/account">
+                                        <CircleUserRound />
+                                        Account
+                                    </Link>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem asChild>
+                                    <Link to="/analytics">
+                                        <ChartLine />
+                                        Analytics
+                                    </Link>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem asChild>
+                                    <Link to="/settings">
+                                        <Settings />
+                                        Settings
+                                    </Link>
+                                </DropdownMenuItem>
+                            </DropdownMenuGroup>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuGroup>
+                                <DropdownMenuItem asChild>
+                                    <Link to="/logout">
+                                        <LogOut />
+                                        Log out
+                                    </Link>
+                                </DropdownMenuItem>
+                            </DropdownMenuGroup>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
                 </div>
             </div>
         </nav>
diff --git a/frontend/src/components/navigation-sheet.tsx b/frontend/src/components/navigation-sheet.tsx
deleted file mode 100644
index 776bd6c..0000000
--- a/frontend/src/components/navigation-sheet.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { Menu } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Sheet, SheetContent, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
-import { Logo } from '@/components/logo';
-import { NavMenu } from '@/components/nav-menu';
-
-export const NavigationSheet = () => {
-    return (
-        <Sheet>
-            <VisuallyHidden>
-                <SheetTitle>Navigation Menu</SheetTitle>
-            </VisuallyHidden>
-
-            <SheetTrigger asChild>
-                <Button className="rounded-full" size="icon" variant="outline">
-                    <Menu />
-                </Button>
-            </SheetTrigger>
-            <SheetContent className="px-6 py-3">
-                <Logo />
-                <NavMenu className="mt-6 [&>div]:h-full" orientation="vertical" />
-            </SheetContent>
-        </Sheet>
-    );
-};