85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
|
import { NavLink } from 'react-router-dom';
|
||
|
|
import {
|
||
|
|
LayoutDashboard, Radio, Monitor, FileText,
|
||
|
|
Shield, MessageSquare, Sun, Moon
|
||
|
|
} from 'lucide-react';
|
||
|
|
import { useTheme } from '../../contexts/ThemeContext';
|
||
|
|
|
||
|
|
interface NavItem {
|
||
|
|
to: string;
|
||
|
|
icon: React.ReactNode;
|
||
|
|
label: string;
|
||
|
|
badge?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
const mainNav: NavItem[] = [
|
||
|
|
{ to: '/', icon: <LayoutDashboard size={16} />, label: 'Overview' },
|
||
|
|
{ to: '/signals', icon: <Radio size={16} />, label: 'Regulatory Signals' },
|
||
|
|
{ to: '/status', icon: <Monitor size={16} />, label: 'System Status' },
|
||
|
|
];
|
||
|
|
|
||
|
|
const workbenchNav: NavItem[] = [
|
||
|
|
{ to: '/documents', icon: <FileText size={16} />, label: 'Documents' },
|
||
|
|
{ to: '/compliance', icon: <Shield size={16} />, label: 'Compliance Analysis' },
|
||
|
|
];
|
||
|
|
|
||
|
|
const chatNav: NavItem[] = [
|
||
|
|
{ to: '/chat', icon: <MessageSquare size={16} />, label: 'Regulation Q&A' },
|
||
|
|
];
|
||
|
|
|
||
|
|
function NavGroup({ title, items }: { title: string; items: NavItem[] }) {
|
||
|
|
return (
|
||
|
|
<div className="nav-group">
|
||
|
|
<div className="nav-group-label">{title}</div>
|
||
|
|
{items.map(item => (
|
||
|
|
<NavLink
|
||
|
|
key={item.to}
|
||
|
|
to={item.to}
|
||
|
|
end={item.to === '/'}
|
||
|
|
className={({ isActive }) => `nav-item${isActive ? ' active' : ''}`}
|
||
|
|
>
|
||
|
|
<span className="nav-icon">{item.icon}</span>
|
||
|
|
<span className="nav-label">{item.label}</span>
|
||
|
|
{item.badge !== undefined && item.badge > 0 && (
|
||
|
|
<span className="nav-badge">{item.badge}</span>
|
||
|
|
)}
|
||
|
|
</NavLink>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Sidebar() {
|
||
|
|
const { theme, toggleTheme } = useTheme();
|
||
|
|
return (
|
||
|
|
<aside className="sidebar">
|
||
|
|
<div className="sidebar-brand">
|
||
|
|
<div className="brand-mark">TS</div>
|
||
|
|
<div className="brand-text">
|
||
|
|
<div className="brand-name">Regulation Hub</div>
|
||
|
|
<div className="brand-sub">T-Systems AI</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav className="sidebar-nav">
|
||
|
|
<NavGroup title="Main" items={mainNav} />
|
||
|
|
<NavGroup title="Workbench" items={workbenchNav} />
|
||
|
|
<NavGroup title="Chat" items={chatNav} />
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div className="sidebar-footer">
|
||
|
|
<div className="sidebar-user">
|
||
|
|
<div className="user-avatar">TS</div>
|
||
|
|
<div className="user-info">
|
||
|
|
<div className="user-name">Analyst</div>
|
||
|
|
<div className="user-role">T-Systems</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button className="theme-btn" onClick={toggleTheme} title="Toggle theme">
|
||
|
|
{theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|