29c5d30ebb
Phase 3 - Frontend Multi-Vertical Support: - Add VerticalContext for band state management - Add BandSelector dropdown component - Create dynamic [vertical] routes for shows, songs, venues - Update navbar to use band selector and vertical-aware links - Update api-config.ts for Fediversion domain - Rebrand from Elmeg to Fediversion
227 lines
11 KiB
TypeScript
227 lines
11 KiB
TypeScript
"use client"
|
|
import { useState } from "react"
|
|
import Link from "next/link"
|
|
import { User, ChevronDown, Menu, X } 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 { BandSelector } from "@/components/layout/band-selector"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { useAuth } from "@/contexts/auth-context"
|
|
import { useVertical } from "@/contexts/vertical-context"
|
|
|
|
const browseLinks = [
|
|
{ href: "/shows", label: "Shows" },
|
|
{ href: "/venues", label: "Venues" },
|
|
{ href: "/songs", label: "Songs" },
|
|
{ href: "/performances", label: "Top Performances" },
|
|
{ href: "/tours", label: "Tours" },
|
|
{ href: "/videos", label: "Videos" },
|
|
{ href: "/leaderboards", label: "Leaderboards" },
|
|
]
|
|
|
|
export function Navbar() {
|
|
const { user, logout } = useAuth()
|
|
const { current } = useVertical()
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
|
|
|
// Build vertical-aware links
|
|
const getVerticalLink = (path: string) => `/${current.slug}${path}`
|
|
|
|
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 justify-between">
|
|
{/* Band Selector - replaces logo */}
|
|
<BandSelector />
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
|
|
<Link href={getVerticalLink("/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">
|
|
{browseLinks.map((link) => (
|
|
<Link key={link.href} href={getVerticalLink(link.href)}>
|
|
<DropdownMenuItem>{link.label}</DropdownMenuItem>
|
|
</Link>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<Link href="/about" className="transition-colors hover:text-foreground/80 text-foreground/60">
|
|
About
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* Right side - search, theme, auth */}
|
|
<div className="flex items-center gap-2">
|
|
<div className="hidden sm:block">
|
|
<SearchDialog />
|
|
</div>
|
|
<ThemeToggle />
|
|
|
|
{/* Desktop auth */}
|
|
<div className="hidden md: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>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/login">
|
|
<Button variant="ghost" size="sm">Sign In</Button>
|
|
</Link>
|
|
<Link href="/register">
|
|
<Button size="sm">Sign Up</Button>
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="md:hidden"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
>
|
|
{mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
|
<span className="sr-only">Toggle menu</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{mobileMenuOpen && (
|
|
<div className="md:hidden border-t bg-background">
|
|
<div className="container mx-auto max-w-7xl px-4 py-4 space-y-4">
|
|
{/* Mobile search */}
|
|
<div className="sm:hidden">
|
|
<SearchDialog />
|
|
</div>
|
|
|
|
{/* Mobile nav links */}
|
|
<nav className="flex flex-col space-y-2">
|
|
<Link
|
|
href="/archive"
|
|
className="px-3 py-2 rounded-md hover:bg-muted transition-colors"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Archive
|
|
</Link>
|
|
|
|
<div className="px-3 py-2 text-sm font-medium text-muted-foreground">Browse</div>
|
|
{browseLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="px-6 py-2 rounded-md hover:bg-muted transition-colors"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
|
|
<Link
|
|
href="/about"
|
|
className="px-3 py-2 rounded-md hover:bg-muted transition-colors"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
About
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* Mobile auth */}
|
|
<div className="border-t pt-4">
|
|
{user ? (
|
|
<div className="flex flex-col space-y-2">
|
|
<div className="px-3 py-2 text-sm text-muted-foreground">{user.email}</div>
|
|
{(user.role === 'admin' || user.role === 'moderator') && (
|
|
<Link
|
|
href="/mod"
|
|
className="px-3 py-2 rounded-md hover:bg-muted transition-colors"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Moderation
|
|
</Link>
|
|
)}
|
|
<Link
|
|
href="/profile"
|
|
className="px-3 py-2 rounded-md hover:bg-muted transition-colors"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Profile
|
|
</Link>
|
|
<Link
|
|
href="/settings"
|
|
className="px-3 py-2 rounded-md hover:bg-muted transition-colors"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Settings
|
|
</Link>
|
|
<button
|
|
onClick={() => { logout(); setMobileMenuOpen(false); }}
|
|
className="px-3 py-2 text-left rounded-md text-red-500 hover:bg-muted transition-colors"
|
|
>
|
|
Sign Out
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="flex gap-2">
|
|
<Link href="/login" className="flex-1" onClick={() => setMobileMenuOpen(false)}>
|
|
<Button variant="outline" className="w-full">Sign In</Button>
|
|
</Link>
|
|
<Link href="/register" className="flex-1" onClick={() => setMobileMenuOpen(false)}>
|
|
<Button className="w-full">Sign Up</Button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
)
|
|
}
|