87 lines
2.6 KiB
JavaScript
87 lines
2.6 KiB
JavaScript
import { NavLink, useLocation } from 'react-router-dom'
|
|
import { LogOut } from 'lucide-react'
|
|
import { Avatar } from '../pages/ProfileSelect'
|
|
import { getMainNavItems } from '../config/appNav'
|
|
import { isCaptureSectionPath } from '../config/captureNav'
|
|
|
|
function sidebarLinkActive(pathname, item, routerIsActive) {
|
|
if (item.to.startsWith('/admin')) return pathname.startsWith('/admin')
|
|
if (item.to === '/capture' && isCaptureSectionPath(pathname)) return true
|
|
return routerIsActive
|
|
}
|
|
|
|
/**
|
|
* Desktop-Sidebar (≥1024px) — Sichtbarkeit via CSS (.desktop-sidebar).
|
|
*/
|
|
export default function DesktopSidebar({
|
|
isAdmin,
|
|
activeProfile,
|
|
sessionProfile,
|
|
onLogout
|
|
}) {
|
|
const loc = useLocation()
|
|
const items = getMainNavItems(isAdmin)
|
|
const tier = (activeProfile && activeProfile.tier) || sessionProfile?.tier || ''
|
|
|
|
return (
|
|
<aside className="desktop-sidebar" aria-label="Hauptnavigation">
|
|
<div className="desktop-sidebar__brand">
|
|
<div className="desktop-sidebar__logo" aria-hidden />
|
|
<div className="desktop-sidebar__title">Mitai Jinkendo</div>
|
|
</div>
|
|
|
|
<nav className="desktop-sidebar__nav">
|
|
{items.map((item) => (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
end={!!item.end}
|
|
className={({ isActive }) =>
|
|
'desktop-sidebar__link' +
|
|
(sidebarLinkActive(loc.pathname, item, isActive)
|
|
? ' desktop-sidebar__link--active'
|
|
: '')
|
|
}
|
|
>
|
|
<item.Icon size={20} strokeWidth={2} />
|
|
<span>{item.label}</span>
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="desktop-sidebar__footer">
|
|
<NavLink to="/settings" className="desktop-sidebar__user">
|
|
{activeProfile ? (
|
|
<Avatar profile={activeProfile} size={32} />
|
|
) : (
|
|
<div
|
|
style={{
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: '50%',
|
|
background: 'var(--accent)'
|
|
}}
|
|
/>
|
|
)}
|
|
<div className="desktop-sidebar__user-text">
|
|
<span className="desktop-sidebar__user-name">
|
|
{activeProfile?.name || 'Profil'}
|
|
</span>
|
|
{tier ? (
|
|
<span className="desktop-sidebar__user-tier">{tier}</span>
|
|
) : null}
|
|
</div>
|
|
</NavLink>
|
|
<button
|
|
type="button"
|
|
className="desktop-sidebar__logout"
|
|
onClick={onLogout}
|
|
title="Abmelden"
|
|
>
|
|
<LogOut size={18} />
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|