File size: 2,861 Bytes
65d68f5 | 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 | "use client";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Menu, UserRound } from "lucide-react";
import { cn } from "@/lib/utils";
const desktopNavigation = [
{ label: "Today", href: "/tuition" },
{ label: "Learn Anything", href: "/learn-anything" },
{ label: "Study Chat", href: "/study-chat" },
{ label: "Progress", href: "/progress" },
] as const;
export interface CleanHeaderProps {
onMenuClick?: () => void;
className?: string;
}
export function CleanHeader({ onMenuClick, className }: CleanHeaderProps) {
const pathname = usePathname() ?? "";
return (
<header className={cn("flex h-16 shrink-0 items-center border-b border-[#E7E4DE] bg-[#FBFAF7] px-3 sm:px-5", className)}>
<div className="flex min-w-0 items-center gap-2">
<button
type="button"
onClick={onMenuClick}
className="inline-flex size-9 items-center justify-center rounded-lg text-[#6F6B64] transition hover:bg-[#F0EEE8] hover:text-[#171717] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#171717]/20 lg:hidden"
aria-label="Open navigation"
>
<Menu className="size-[20px]" strokeWidth={1.8} />
</button>
<Link href="/tuition" className="flex items-center gap-2.5 rounded-lg px-1.5 py-1">
<span className="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#171717]">
<Image src="/docdoe-logo-mark.png" alt="DocDoe" width={20} height={20} className="object-contain" priority />
</span>
<span className="text-[15px] font-bold text-[#171717]">DocDoe</span>
</Link>
</div>
<nav className="mx-auto hidden items-center gap-1 lg:flex" aria-label="Primary navigation">
{desktopNavigation.map((item) => {
const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
return (
<Link
key={item.href}
href={item.href}
aria-current={active ? "page" : undefined}
className={cn(
"rounded-lg px-3 py-2 text-[12px] font-semibold transition",
active ? "bg-[#171717] text-white" : "text-[#6F6B64] hover:bg-[#F0EEE8] hover:text-[#171717]",
)}
>
{item.label}
</Link>
);
})}
</nav>
<Link
href="/profile"
aria-label="Profile"
className="ml-auto inline-flex size-9 items-center justify-center rounded-lg text-[#6F6B64] transition hover:bg-[#F0EEE8] hover:text-[#171717] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#171717]/20 lg:ml-0"
>
<UserRound className="size-[18px]" strokeWidth={1.8} />
</Link>
</header>
);
}
|