69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import { NavLink } from 'react-router-dom';
|
|
import {
|
|
Home, Briefcase, FlaskConical, Target, TrendingUp,
|
|
SlidersHorizontal, Star, Bell, Settings, ChartNoAxesCombined,
|
|
} from 'lucide-react';
|
|
import { useAppContext } from '../../context/AppContext';
|
|
import { getPlansRoute } from '../../views/tradePlansRoutes';
|
|
|
|
const NAV = [
|
|
{ to: '/', icon: Home, label: 'Home', end: true },
|
|
{ to: '/portfolio', icon: Briefcase, label: 'Portfolio', end: false },
|
|
{ to: '/research', icon: FlaskConical, label: 'Research', end: false },
|
|
{ to: getPlansRoute(), icon: Target, label: 'Plans', end: false },
|
|
{ to: '/markets', icon: TrendingUp, label: 'Markets', end: false },
|
|
{ to: '/screener', icon: SlidersHorizontal, label: 'Screener', end: false },
|
|
{ to: '/watchlist', icon: Star, label: 'Watchlist', end: false },
|
|
{ to: '/alerts', icon: Bell, label: 'Alerts', end: false },
|
|
{ to: '/settings', icon: Settings, label: 'Settings', end: false },
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const { user, handleSignOut } = useAppContext();
|
|
const initials = user?.email
|
|
? user.email.slice(0, 2).toUpperCase()
|
|
: 'US';
|
|
|
|
return (
|
|
<aside className="trading-sidebar">
|
|
{/* Logo */}
|
|
<div className="trading-sidebar-logo" aria-label="ByteLyst trading">
|
|
<ChartNoAxesCombined size={22} />
|
|
<div className="trading-sidebar-brand">
|
|
<strong>ByteLyst</strong>
|
|
<span>Trading OS</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nav items */}
|
|
<nav className="trading-sidebar-nav">
|
|
{NAV.map(({ to, icon: Icon, label, end }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={end}
|
|
className={({ isActive }) => `trading-sidebar-link${isActive ? ' is-active' : ''}`}
|
|
>
|
|
{({ isActive }) => (
|
|
<>
|
|
<Icon size={20} strokeWidth={isActive ? 2.2 : 1.8} />
|
|
<span>{label}</span>
|
|
</>
|
|
)}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
{/* User avatar */}
|
|
<div
|
|
className="trading-sidebar-avatar"
|
|
title={`${user?.email ?? ''} — click to sign out`}
|
|
onClick={handleSignOut}
|
|
>
|
|
{initials}
|
|
<span className="trading-sidebar-avatar-status" />
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|