averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor header navigation to hamburger menu

Browse Source
This commit is contained in:
Avery Felts 2026-01-24 13:17:23 -07:00
parent 39a29faa2c
commit 5a82607dca
1 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/UserHeader.tsx
View File

@ -22,7 +22,7 @@ import { fetchPreferences, fetchReminderSettings, saveReminderSettings, Reminder
import { useNotifications } from '@/hooks/useNotifications'; import { useNotifications } from '@/hooks/useNotifications';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation'; 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'; import { useTheme } from '@/lib/theme-context';
interface UserHeaderProps { 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" /> <Sun className="h-5 w-5 text-yellow-400 transition-transform duration-300" />
)} )}
</button> </button>
{/* Main Navigation Menu */}
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <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"> <button
<Avatar className="h-8 w-8 ring-2 ring-primary/30"> 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"
<AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} /> aria-label="Open menu"
<AvatarFallback className="bg-primary/20 text-primary text-sm">{initials}</AvatarFallback> >
</Avatar> <Menu className="h-5 w-5 text-muted-foreground" />
<ChevronDown className="h-4 w-4 text-muted-foreground" />
</button> </button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" sideOffset={8}> <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" /> <Leaf className="mr-3 h-4 w-4 text-green-400" />
<span>Track Marijuana Usage</span> <span>Track Marijuana Usage</span>
</DropdownMenuItem> </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 /> <DropdownMenuSeparator />
<DropdownMenuItem onClick={handleLogout} className="text-red-400 hover:text-red-300"> <DropdownMenuItem onClick={handleLogout} className="text-red-400 hover:text-red-300">
<LogOut className="mr-3 h-4 w-4" /> <LogOut className="mr-3 h-4 w-4" />