67fbd4d152
- Add Space Grotesk and JetBrains Mono fonts - Implement light/dark mode toggle with next-themes - Update color palette to match Ersen (HSL-based tokens) - Add ThemeProvider and ThemeToggle components - Reduce border radius to 0.3rem for cleaner look
124 lines
6.4 KiB
TypeScript
124 lines
6.4 KiB
TypeScript
"use client"
|
|
import Link from "next/link"
|
|
import { Music, User, ChevronDown } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { SearchDialog } from "@/components/ui/search-dialog"
|
|
import { NotificationBell } from "@/components/notifications/notification-bell"
|
|
import { ThemeToggle } from "@/components/theme-toggle"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { useAuth } from "@/contexts/auth-context"
|
|
|
|
export function Navbar() {
|
|
const { user, logout } = useAuth()
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex h-14 items-center">
|
|
<div className="mr-4 hidden md:flex">
|
|
<Link href="/" className="mr-6 flex items-center space-x-2">
|
|
<Music className="h-6 w-6" />
|
|
<span className="hidden font-bold sm:inline-block">
|
|
Elmeg
|
|
</span>
|
|
</Link>
|
|
<nav className="flex items-center space-x-6 text-sm font-medium">
|
|
<Link href="/archive" className="transition-colors hover:text-foreground/80 text-foreground/60">
|
|
Archive
|
|
</Link>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className="flex items-center space-x-1 transition-colors hover:text-foreground/80 text-foreground/60 outline-none">
|
|
<span>Browse</span>
|
|
<ChevronDown className="h-4 w-4" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start">
|
|
<Link href="/shows">
|
|
<DropdownMenuItem>Shows</DropdownMenuItem>
|
|
</Link>
|
|
<Link href="/venues">
|
|
<DropdownMenuItem>Venues</DropdownMenuItem>
|
|
</Link>
|
|
<Link href="/songs">
|
|
<DropdownMenuItem>Songs</DropdownMenuItem>
|
|
</Link>
|
|
<Link href="/performances">
|
|
<DropdownMenuItem>Top Performances</DropdownMenuItem>
|
|
</Link>
|
|
<Link href="/tours">
|
|
<DropdownMenuItem>Tours</DropdownMenuItem>
|
|
</Link>
|
|
{/* Leaderboards hidden until community activity grows */}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<Link href="/about" className="transition-colors hover:text-foreground/80 text-foreground/60">
|
|
About
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
|
|
<div className="w-full flex-1 md:w-auto md:flex-none">
|
|
<SearchDialog />
|
|
</div>
|
|
<ThemeToggle />
|
|
<nav className="flex items-center gap-2">
|
|
{user ? (
|
|
<>
|
|
{(user.role === 'admin' || user.role === 'moderator') && (
|
|
<Link href="/mod">
|
|
<Button variant="ghost" size="sm">
|
|
Mod
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
<NotificationBell />
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon">
|
|
<User className="h-5 w-5" />
|
|
<span className="sr-only">User</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem disabled className="font-semibold">
|
|
{user.email}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<Link href="/profile">
|
|
<DropdownMenuItem>Profile</DropdownMenuItem>
|
|
</Link>
|
|
<Link href="/settings">
|
|
<DropdownMenuItem>Settings</DropdownMenuItem>
|
|
</Link>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={logout} className="text-red-500 focus:text-red-500">
|
|
Sign Out
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<Link href="/login">
|
|
<Button variant="ghost" size="sm">
|
|
Sign In
|
|
</Button>
|
|
</Link>
|
|
<Link href="/register">
|
|
<Button size="sm">
|
|
Sign Up
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|