77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
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>
|
|
)
|
|
}
|