import { NavLink, useNavigate, useLocation } from 'react-router-dom'; import { useState, useEffect } from 'react'; interface SidebarProps { onExpandChange?: (expanded: boolean) => void; } export default function Sidebar({ onExpandChange }: SidebarProps) { const navigate = useNavigate(); const location = useLocation(); const user = JSON.parse(localStorage.getItem('qh_user') || 'null'); const [drawerOpen, setDrawerOpen] = useState(false); const [isMobile, setIsMobile] = useState(false); const [isExpanded, setIsExpanded] = useState(false); const [isDark, setIsDark] = useState(() => { return localStorage.getItem('qh_theme') === 'dark' || document.documentElement.getAttribute('data-theme') === 'dark'; }); useEffect(() => { const check = () => setIsMobile(window.innerWidth <= 768); check(); window.addEventListener('resize', check); return () => window.removeEventListener('resize', check); }, []); // Apply theme on mount and when toggled useEffect(() => { document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light'); localStorage.setItem('qh_theme', isDark ? 'dark' : 'light'); }, [isDark]); // Close drawer on route change useEffect(() => { setDrawerOpen(false); }, [location.pathname]); const handleLogout = () => { localStorage.removeItem('qh_token'); localStorage.removeItem('qh_user'); navigate('/login'); }; const toggleTheme = () => setIsDark(prev => !prev); const themeIcon = isDark ? ( ) : ( ); const allLinks = [ { section: 'Overview', items: [ { to: '/dashboard', label: 'Dashboard', icon: }, { to: '/holdings', label: 'Holdings', icon: }, ] }, { section: 'Research', items: [ { to: '/market', label: 'Markets', icon: }, { to: '/factors', label: 'Factor Analysis', icon: }, { to: '/sentiment', label: 'Sentiment', icon: }, { to: '/research', label: 'Research', icon: }, { to: '/calendar', label: 'Calendar', icon: }, ] }, { section: 'Quantitative', items: [ { to: '/strategies', label: 'Strategy Builder', icon: }, { to: '/backtests', label: 'Backtests', icon: }, ] }, { section: 'Portfolio', items: [ { to: '/portfolio', label: 'Optimization', icon: }, { to: '/marketplace', label: 'Marketplace', icon: }, ] }, ]; // Primary nav items for mobile bottom bar (5 key items) const mobileNavItems = [ allLinks[0].items[0], // Dashboard allLinks[1].items[0], // Markets allLinks[0].items[1], // Holdings allLinks[1].items[1], // Factor Analysis ]; // ── Desktop Sidebar ────────────────────────────────────────────── const desktopSidebar = ( ); // ── Mobile Bottom Tab Bar + Drawer ─────────────────────────────── const mobileNav = ( <> {/* Slide-up drawer with all nav items */} {drawerOpen && ( <>
setDrawerOpen(false)} />
{allLinks.map((group) => (
{group.section}
{group.items.map((link) => ( `sidebar-link ${isActive ? 'active' : ''}`} onClick={() => setDrawerOpen(false)} > {link.icon} {link.label} ))}
))} {/* User + Logout in drawer */}
{user && (
{(user.username || 'U').charAt(0).toUpperCase()}
{user.full_name || user.username}
{user.email}
)}
)} ); return ( <> {isMobile ? mobileNav : desktopSidebar} ); }