| "use client"; |
|
|
| import Image from "next/image"; |
| import Link from "next/link"; |
| import { usePathname } from "next/navigation"; |
| import { |
| BookOpen, |
| CalendarDays, |
| ChartNoAxesColumnIncreasing, |
| ChevronRight, |
| MessageSquareText, |
| UserRound, |
| X, |
| } from "lucide-react"; |
| import { useAuth } from "@/lib/auth/useAuth"; |
| import { cn } from "@/lib/utils"; |
|
|
| const navigation = [ |
| { label: "Today", href: "/tuition", icon: CalendarDays }, |
| { label: "Learn Anything", href: "/learn-anything", icon: BookOpen }, |
| { label: "Study Chat", href: "/study-chat", icon: MessageSquareText }, |
| { label: "Progress", href: "/progress", icon: ChartNoAxesColumnIncreasing }, |
| { label: "Profile", href: "/profile", icon: UserRound }, |
| ] as const; |
|
|
| function isActive(pathname: string, href: string) { |
| return pathname === href || pathname.startsWith(`${href}/`); |
| } |
|
|
| export interface CleanSidebarProps { |
| onNavigate?: () => void; |
| onClose?: () => void; |
| } |
|
|
| export function CleanSidebar({ onNavigate, onClose }: CleanSidebarProps) { |
| const pathname = usePathname() ?? ""; |
| const { user } = useAuth(); |
| const displayName = user?.name?.trim() || "Student"; |
| const initials = displayName |
| .split(/\s+/) |
| .map((word) => word[0]) |
| .join("") |
| .slice(0, 2) |
| .toUpperCase(); |
|
|
| return ( |
| <aside className="flex h-full w-full flex-col border-r border-[#E7E4DE] bg-[#FBFAF7] text-[#171717]"> |
| <div className="flex h-16 items-center gap-3 border-b border-[#E7E4DE] px-4"> |
| <span className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#171717]"> |
| <Image src="/docdoe-logo-mark.png" alt="DocDoe" width={22} height={22} className="object-contain" priority /> |
| </span> |
| <div className="min-w-0 flex-1"> |
| <p className="truncate text-[15px] font-bold">DocDoe</p> |
| <p className="text-[10px] font-medium text-[#77736C]">Private tuition workspace</p> |
| </div> |
| {onClose ? ( |
| <button |
| type="button" |
| onClick={onClose} |
| aria-label="Close navigation" |
| className="inline-flex size-9 items-center justify-center rounded-lg text-[#77736C] transition hover:bg-[#F0EEE8] hover:text-[#171717] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#171717]/20" |
| > |
| <X className="size-[18px]" strokeWidth={1.8} /> |
| </button> |
| ) : null} |
| </div> |
| |
| <nav className="flex-1 space-y-1 overflow-y-auto px-3 py-5" aria-label="DocDoe navigation"> |
| {navigation.map((item) => { |
| const active = isActive(pathname, item.href); |
| const Icon = item.icon; |
| return ( |
| <Link |
| key={item.href} |
| href={item.href} |
| onClick={onNavigate} |
| aria-current={active ? "page" : undefined} |
| className={cn( |
| "group flex min-h-11 items-center gap-3 rounded-lg px-3 text-[13px] font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#171717]/20", |
| active |
| ? "bg-[#171717] text-white" |
| : "text-[#5F5B55] hover:bg-[#F0EEE8] hover:text-[#171717]", |
| )} |
| > |
| <Icon className="size-[18px] shrink-0" strokeWidth={1.8} /> |
| <span className="truncate">{item.label}</span> |
| <ChevronRight className={cn("ml-auto size-4", active ? "text-white/65" : "text-[#B4B0A8]")} /> |
| </Link> |
| ); |
| })} |
| </nav> |
| |
| <Link |
| href="/profile" |
| onClick={onNavigate} |
| className="m-3 flex items-center gap-3 border-t border-[#E7E4DE] px-1 pt-4" |
| > |
| <span className="flex size-9 shrink-0 items-center justify-center rounded-full border border-[#DAD6CE] bg-white text-[11px] font-bold"> |
| {initials || "ST"} |
| </span> |
| <span className="min-w-0 flex-1"> |
| <span className="block truncate text-[13px] font-semibold">{displayName}</span> |
| <span className="block text-[10px] text-[#858078]">Student profile</span> |
| </span> |
| <ChevronRight className="size-4 text-[#B4B0A8]" /> |
| </Link> |
| </aside> |
| ); |
| } |
|
|
