| 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> |
| ); |
| } |
|
|
