From 4d65ac03603275175a28127509cee6f216b6cfb8 Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Sat, 24 Jan 2026 13:17:23 -0700
Subject: [PATCH] Refactor header navigation to hamburger menu

---
 src/components/UserHeader.tsx | 34 +++++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/UserHeader.tsx b/src/components/UserHeader.tsx
index b34e80e..94e4b87 100644
--- a/src/components/UserHeader.tsx
+++ b/src/components/UserHeader.tsx
@@ -22,7 +22,7 @@ import { fetchPreferences, fetchReminderSettings, saveReminderSettings, Reminder
 import { useNotifications } from '@/hooks/useNotifications';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Cigarette, Leaf, LogOut, Home, ChevronDown, Sun, Moon, Bell, BellOff, BellRing } from 'lucide-react';
+import { Cigarette, Leaf, LogOut, Home, ChevronDown, Sun, Moon, Bell, BellOff, BellRing, Menu } from 'lucide-react';
 import { useTheme } from '@/lib/theme-context';
 
 interface UserHeaderProps {
@@ -143,14 +143,15 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
               <Sun className="h-5 w-5 text-yellow-400 transition-transform duration-300" />
             )}
           </button>
+
+          {/* Main Navigation Menu */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button className="flex items-center gap-2 px-3 py-2 rounded-full bg-muted hover:bg-muted/80 transition-all focus:outline-none focus:ring-2 focus:ring-primary/30">
-                <Avatar className="h-8 w-8 ring-2 ring-primary/30">
-                  <AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
-                  <AvatarFallback className="bg-primary/20 text-primary text-sm">{initials}</AvatarFallback>
-                </Avatar>
-                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              <button
+                className="p-2.5 sm:p-2 rounded-full bg-muted hover:bg-muted/80 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/30 hover:scale-110 active:scale-95"
+                aria-label="Open menu"
+              >
+                <Menu className="h-5 w-5 text-muted-foreground" />
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" sideOffset={8}>
@@ -167,6 +168,25 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
                 <Leaf className="mr-3 h-4 w-4 text-green-400" />
                 <span>Track Marijuana Usage</span>
               </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="flex items-center gap-2 px-3 py-2 rounded-full bg-muted hover:bg-muted/80 transition-all focus:outline-none focus:ring-2 focus:ring-primary/30">
+                <Avatar className="h-8 w-8 ring-2 ring-primary/30">
+                  <AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
+                  <AvatarFallback className="bg-primary/20 text-primary text-sm">{initials}</AvatarFallback>
+                </Avatar>
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" sideOffset={8}>
+              <DropdownMenuItem onClick={() => handleNavigate('/')}>
+                <Home className="mr-3 h-4 w-4 text-muted-foreground" />
+                <span>Dashboard</span>
+              </DropdownMenuItem>
+
               <DropdownMenuSeparator />
               <DropdownMenuItem onClick={handleLogout} className="text-red-400 hover:text-red-300">
                 <LogOut className="mr-3 h-4 w-4" />