File size: 4,211 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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | "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>
);
}
|