107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
|
"use client";
|
||
|
|
import { useState } from "react";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Left sidebar navigation with collapsible sections.
|
||
|
|
* Organized by workflow phase: Research, Execution, Analytics, Settings.
|
||
|
|
*/
|
||
|
|
|
||
|
|
interface NavSection {
|
||
|
|
title: string;
|
||
|
|
icon: string;
|
||
|
|
items: { label: string; href: string }[];
|
||
|
|
}
|
||
|
|
|
||
|
|
const SECTIONS: NavSection[] = [
|
||
|
|
{
|
||
|
|
title: "Research",
|
||
|
|
icon: "📊",
|
||
|
|
items: [
|
||
|
|
{ label: "Overview", href: "/" },
|
||
|
|
{ label: "Chart Lab", href: "/chart-lab" },
|
||
|
|
{ label: "Institutional", href: "/institutional" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Execution",
|
||
|
|
icon: "⚡",
|
||
|
|
items: [
|
||
|
|
{ label: "Trade Plan", href: "/trade-plan" },
|
||
|
|
{ label: "Execution", href: "/execution" },
|
||
|
|
{ label: "Daily Focus", href: "/daily-focus" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Analytics",
|
||
|
|
icon: "🔬",
|
||
|
|
items: [
|
||
|
|
{ label: "Filings", href: "/filings" },
|
||
|
|
{ label: "Options DD", href: "/options-dd" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Settings",
|
||
|
|
icon: "⚙️",
|
||
|
|
items: [
|
||
|
|
{ label: "Profile / Auth", href: "/settings" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
export function SidebarNav() {
|
||
|
|
const pathname = usePathname();
|
||
|
|
const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
|
||
|
|
|
||
|
|
const toggleCollapse = (sectionTitle: string) => {
|
||
|
|
setCollapsed(prev => ({ ...prev, [sectionTitle]: !prev[sectionTitle] }));
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<aside className="w-52 border-r border-[#2a2b3a] bg-[#121318] flex-shrink-0 hidden lg:block">
|
||
|
|
<nav className="p-3 space-y-1">
|
||
|
|
{SECTIONS.map((section) => (
|
||
|
|
<div key={section.title} className="mb-1">
|
||
|
|
{/* Section Header */}
|
||
|
|
<button
|
||
|
|
onClick={() => toggleCollapse(section.title)}
|
||
|
|
className="w-full flex items-center justify-between px-2 py-1.5 text-xs font-semibold text-[#8a8b9a] hover:text-[#e6e7ec] transition-colors"
|
||
|
|
>
|
||
|
|
<span className="flex items-center gap-2">
|
||
|
|
<span>{section.icon}</span>
|
||
|
|
<span>{section.title}</span>
|
||
|
|
</span>
|
||
|
|
<span className="text-[10px] transition-transform duration-200" style={{ transform: collapsed[section.title] ? "rotate(-90deg)" : "none" }}>
|
||
|
|
▼
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* Section Items */}
|
||
|
|
{!collapsed[section.title] && (
|
||
|
|
<div className="ml-4 mt-1 space-y-0.5">
|
||
|
|
{section.items.map((item) => {
|
||
|
|
const isActive = pathname === item.href;
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={item.label}
|
||
|
|
href={item.href}
|
||
|
|
className={`block px-2 py-1.5 rounded-lg text-xs transition-colors ${
|
||
|
|
isActive
|
||
|
|
? "bg-[#4f8cff]/20 text-[#4f8cff] border-l-2 border-[#4f8cff]"
|
||
|
|
: "text-[#8a8b9a] hover:text-[#e6e7ec] hover:bg-[#1a1b24]"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|