Initial commit

src/components/Sidebar.tsx

@@ -0,0 +1,76 @@
+import { useLocation, Link } from 'react-router-dom'
+import { useState, useEffect } from 'react'
+
+const navItems = [
+  {
+    href: '/',
+    label: 'Timeline',
+    icon: (
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+      </svg>
+    ),
+  },
+  {
+    href: '/servers',
+    label: 'Server',
+    icon: (
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+      </svg>
+    ),
+  },
+  {
+    href: '/processes',
+    label: 'Prozesse',
+    icon: (
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+      </svg>
+    ),
+  },
+]
+
+export default function Sidebar() {
+  const { pathname } = useLocation()
+  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'dark')
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+    localStorage.setItem('theme', theme)
+  }, [theme])
+
+  const toggleTheme = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'))
+
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-logo">
+        <Link to="/">
+          <img src="/logo.png" alt="AZ INTEC" />
+          <span className="logo-suffix">ion</span>
+        </Link>
+        <span className="subtitle">Prozess Scheduler</span>
+      </div>
+
+      <nav className="sidebar-nav">
+        {navItems.map(({ href, label, icon }) => (
+          <Link key={href} to={href} className={pathname === href ? 'active' : ''}>
+            {icon}
+            {label}
+          </Link>
+        ))}
+      </nav>
+
+      <div className="sidebar-footer">
+        <div className="theme-row">
+          <span>Erscheinungsbild</span>
+          <div className="theme-toggle" onClick={toggleTheme} title="Theme wechseln" />
+        </div>
+        <div className="version">
+          <img src="/logo.png" alt="" />
+          AZion v23.01
+        </div>
+      </div>
+    </aside>
+  )
+}