File size: 1,677 Bytes
d4f8959 | 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 | import { NavLink, useLocation } from 'react-router-dom';
import {
UploadCloud,
BarChart2,
MessageSquare,
GitCompare,
Building2,
} from 'lucide-react';
const navItems = [
{ to: '/upload', label: 'Upload', icon: <UploadCloud size={18} /> },
{ to: '/report', label: 'Report', icon: <BarChart2 size={18} /> },
{ to: '/ask', label: 'Ask', icon: <MessageSquare size={18} /> },
{ to: '/compare', label: 'Compare', icon: <GitCompare size={18} /> },
{ to: '/companies', label: 'Companies', icon: <Building2 size={18} /> },
];
export function AppLayout({ children }: { children: React.ReactNode }) {
const location = useLocation();
return (
<div className="app-layout">
<aside className="sidebar">
<div className="sidebar__brand">
<span className="sidebar__logo">FS</span>
<span className="sidebar__name">FinSight</span>
</div>
<nav className="sidebar__nav" aria-label="Main navigation">
{navItems.map((item) => {
const isActive = location.pathname.startsWith(item.to);
return (
<NavLink
key={item.to}
to={item.to}
className={`sidebar__item ${isActive ? 'sidebar__item--active' : ''}`}
>
<span className="sidebar__icon">{item.icon}</span>
<span className="sidebar__label">{item.label}</span>
</NavLink>
);
})}
</nav>
<div className="sidebar__footer">
<span className="sidebar__version">v0.1.0</span>
</div>
</aside>
<main className="main-content">{children}</main>
</div>
);
}
|