Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 3x 3x 3x 69x 69x 69x 69x 504x 69x 69x 42x 1x 1x 1x 1x 1x | import { useNavigate, useLocation } from 'react-router-dom'
import { Moon, Sun, Home, Heart, BookOpen, FolderOpen, Settings } from 'lucide-react'
import { useProfile } from '../contexts/ProfileContext'
import { useMode } from '../router'
import ProfileDropdown from './ProfileDropdown'
const NAV_BASE = 'rounded-lg p-1.5 transition-colors'
const NAV_INACTIVE = `${NAV_BASE} text-muted-foreground hover:bg-muted hover:text-primary`
const NAV_ACTIVE = `${NAV_BASE} bg-muted text-primary`
export default function NavHeader() {
const navigate = useNavigate()
const location = useLocation()
const mode = useMode()
const { profile, theme, toggleTheme, logout } = useProfile()
const isActive = (path: string) => location.pathname === path
|| (path !== '/home' && location.pathname.startsWith(path))
const handleLogout = () => {
logout()
navigate('/')
}
if (!profile) return null
return (
<header className="flex items-center justify-between border-b border-border px-4 py-3">
<button
onClick={() => navigate('/home')}
className="text-xl font-medium text-primary hover:opacity-80 transition-opacity"
>
Cookie
</button>
<div className="flex items-center gap-1">
{/* Home */}
<button
onClick={() => navigate('/home')}
className={isActive('/home') ? NAV_ACTIVE : NAV_INACTIVE}
aria-label="Home"
aria-current={isActive('/home') ? 'page' : undefined}
>
<Home className="h-5 w-5" />
</button>
{/* All Recipes */}
<button
onClick={() => navigate('/all-recipes')}
className={isActive('/all-recipes') ? NAV_ACTIVE : NAV_INACTIVE}
aria-label="All recipes"
aria-current={isActive('/all-recipes') ? 'page' : undefined}
>
<BookOpen className="h-5 w-5" />
</button>
{/* Favorites */}
<button
onClick={() => navigate('/favorites')}
className={isActive('/favorites') ? `${NAV_BASE} bg-muted text-accent` : `${NAV_BASE} text-muted-foreground hover:bg-muted hover:text-accent`}
aria-label="View favorites"
aria-current={isActive('/favorites') ? 'page' : undefined}
>
<Heart className="h-5 w-5" />
</button>
{/* Collections */}
<button
onClick={() => navigate('/collections')}
className={isActive('/collections') || isActive('/collection') ? NAV_ACTIVE : NAV_INACTIVE}
aria-label="View collections"
aria-current={isActive('/collections') || isActive('/collection') ? 'page' : undefined}
>
<FolderOpen className="h-5 w-5" />
</button>
{/* Theme toggle */}
<button
onClick={toggleTheme}
className={`${NAV_BASE} text-muted-foreground hover:bg-muted hover:text-foreground`}
aria-label={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
>
{theme === 'light' ? (
<Moon className="h-5 w-5" />
) : (
<Sun className="h-5 w-5" />
)}
</button>
{/* Settings */}
<button
onClick={() => navigate('/settings')}
className={isActive('/settings') ? NAV_ACTIVE : NAV_INACTIVE}
aria-label="Settings"
aria-current={isActive('/settings') ? 'page' : undefined}
>
<Settings className="h-5 w-5" />
</button>
{/* Profile avatar with dropdown */}
<ProfileDropdown
profileName={profile.name}
avatarColor={profile.avatar_color}
mode={mode}
onLogout={handleLogout}
/>
</div>
</header>
)
}
|