From 08461215b0dc169cfafa7837f6b5fab168022113 Mon Sep 17 00:00:00 2001
From: wangwei <Wei.Wang@t-systems.com>
Date: Wed, 3 Jun 2026 17:05:05 +0800
Subject: [PATCH] feat: add Sidebar component with nav groups, badges, and
 theme toggle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/layout/Sidebar.tsx | 84 ++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 frontend/src/components/layout/Sidebar.tsx

diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..38b5fca
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,84 @@
+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>
+  );
+}