File size: 2,587 Bytes
bc4a7e8 | 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 | "use client";
import React, { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/shared/utils/cn";
import { DOCS_TOKENS } from "./tokens";
interface NavItem {
title: string;
href: string;
children?: NavItem[];
}
interface DocsSidebarProps {
sections: NavItem[];
currentPath?: string;
className?: string;
}
export default function DocsSidebar({ sections, currentPath, className }: DocsSidebarProps) {
const pathname = usePathname();
const [collapsed, setCollapsed] = useState(false);
const isActive = (href: string) => pathname === href || currentPath === href;
return (
<div
className={cn(
"flex flex-col h-full bg-sidebar border-r border-border transition-all duration-300",
collapsed ? "w-16" : "w-64",
className
)}
>
<div className="p-4 flex items-center justify-between border-b border-border">
{!collapsed && <span className="font-bold text-text-primary">OmniRoute Docs</span>}
<button
onClick={() => setCollapsed(!collapsed)}
className="p-1 hover:bg-bg-subtle rounded transition-colors"
aria-label="Toggle Sidebar"
>
<span className="block w-4 h-0.5 bg-text-main mb-1"></span>
<span className="block w-4 h-0.5 bg-text-main mb-1"></span>
<span className="block w-4 h-0.5 bg-text-main"></span>
</button>
</div>
<div className="flex-1 overflow-y-auto p-4 space-y-6">
{sections.map((section, idx) => (
<div key={idx} className="space-y-2">
{!collapsed && (
<h3 className="text-xs font-semibold text-text-muted uppercase tracking-wider">
{section.title}
</h3>
)}
<div className="space-y-1">
{section.children?.map((item, childIdx) => (
<Link
key={childIdx}
href={item.href}
className={cn(
"flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors",
isActive(item.href)
? "bg-primary/10 text-primary font-medium"
: "text-text-main hover:bg-bg-subtle"
)}
>
<span className="truncate">{item.title}</span>
</Link>
))}
</div>
</div>
))}
</div>
</div>
);
}
|