84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import { LayoutDashboard, Activity, CalendarRange, ListFilter, Settings2, UserCircle } from "lucide-react";
|
|
import { Link, useLocation } from "wouter";
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from "@/components/ui/sidebar";
|
|
import { Logo } from "@/components/logo";
|
|
|
|
const NAV = [
|
|
{ title: "Dashboard", url: "/", icon: LayoutDashboard, testid: "nav-dashboard" },
|
|
{ title: "Gamma Levels", url: "/gamma", icon: Activity, testid: "nav-gamma" },
|
|
{ title: "Expiry Matrix", url: "/expiry", icon: CalendarRange, testid: "nav-expiry" },
|
|
{ title: "Screener", url: "/screener", icon: ListFilter, testid: "nav-screener" },
|
|
{ title: "Settings & API", url: "/settings", icon: Settings2, testid: "nav-settings" },
|
|
{ title: "Account", url: "/account", icon: UserCircle, testid: "nav-account" },
|
|
];
|
|
|
|
export function AppSidebar() {
|
|
const [location] = useLocation();
|
|
return (
|
|
<Sidebar data-testid="sidebar-main">
|
|
<SidebarHeader className="px-3 pt-4 pb-3">
|
|
<Link
|
|
href="/"
|
|
className="flex items-center gap-2 px-2"
|
|
data-testid="link-home"
|
|
>
|
|
<span className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-primary/15 text-primary">
|
|
<Logo className="h-5 w-5" />
|
|
</span>
|
|
<span className="flex flex-col leading-tight">
|
|
<span className="text-sm font-semibold tracking-tight">GammaDesk</span>
|
|
<span className="text-[11px] text-muted-foreground tracking-wide uppercase">
|
|
Options Analytics
|
|
</span>
|
|
</span>
|
|
</Link>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Workspace</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{NAV.map((item) => {
|
|
const active =
|
|
item.url === "/"
|
|
? location === "/" || location === ""
|
|
: location.startsWith(item.url);
|
|
return (
|
|
<SidebarMenuItem key={item.title}>
|
|
<SidebarMenuButton asChild isActive={active} data-testid={item.testid}>
|
|
<Link href={item.url}>
|
|
<item.icon className="h-4 w-4" />
|
|
<span>{item.title}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
);
|
|
})}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarFooter className="px-3 pb-4">
|
|
<p
|
|
className="text-[11px] leading-snug text-muted-foreground"
|
|
data-testid="text-sidebar-disclaimer"
|
|
>
|
|
Analytics & education only. Not financial advice. Data is simulated
|
|
ORATS-style mock data until an API key is provided.
|
|
</p>
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
);
|
|
}
|