Patrick Plate
80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { useTranslations } from "next-intl"
|
|
import { Cannabis, History, LayoutDashboard, LogOut, User } from "lucide-react"
|
|
|
|
import { mockPortalUser } from "@/data/mock/portal"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
import { ModeDropdown } from "@/components/layout/mode-dropdown"
|
|
|
|
const navItems = [
|
|
{ href: "/portal/dashboard", icon: LayoutDashboard, labelKey: "dashboard" },
|
|
{ href: "/portal/history", icon: History, labelKey: "history" },
|
|
{ href: "/portal/profile", icon: User, labelKey: "profile" },
|
|
] as const
|
|
|
|
export function PortalNavbar() {
|
|
const t = useTranslations("portal")
|
|
const pathname = usePathname()
|
|
|
|
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="mx-auto flex h-14 max-w-5xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
|
{/* Logo + Club Name */}
|
|
<Link
|
|
href="/portal/dashboard"
|
|
className="flex items-center gap-2 font-semibold"
|
|
>
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
|
|
<Cannabis className="h-4 w-4 text-primary" />
|
|
</div>
|
|
<span className="hidden sm:inline-block text-sm">
|
|
{mockPortalUser.clubName}
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Navigation Links */}
|
|
<nav className="flex items-center gap-1">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
"flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors",
|
|
isActive
|
|
? "bg-primary/10 text-primary"
|
|
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
|
|
)}
|
|
>
|
|
<item.icon className="h-4 w-4" />
|
|
<span className="hidden sm:inline-block">
|
|
{t(item.labelKey)}
|
|
</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
{/* Right Side: Theme + Logout */}
|
|
<div className="flex items-center gap-1">
|
|
<ModeDropdown />
|
|
<Link
|
|
href="/portal-login"
|
|
className="flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
|
|
aria-label={t("logout")}
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
<span className="hidden sm:inline-block">{t("logout")}</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|