jappel/leistungsbilanz-ts
1
0
Fork 1
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/feature/amev-picker-and-collapsible-sidebar'

Browse source
This commit is contained in:
Julian Appel 2026-08-06 22:01:54 +02:00
commit a17e2e3f4b
11 changed files with 349 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/frontend/components/Sidebar.tsx
View file

@ -15,7 +15,12 @@ const PROJECT_SECTIONS = [
{ id: "projektgeraete", label: "Projektgeräte", icon: "⚙" },
] as const;
export function Sidebar() {
interface SidebarProps {
isCollapsed: boolean;
onToggleCollapsed: () => void;
}
export function Sidebar({ isCollapsed, onToggleCollapsed }: SidebarProps) {
const pathname = usePathname();
const projectMatch = pathname?.match(/^\/projects\/([^/]+)$/);
const activeProjectId = projectMatch ? projectMatch[1] : null;
@ -67,19 +72,31 @@ export function Sidebar() {
}, [activeProjectId]);
return (
<aside className="sidebar">
<aside className={isCollapsed ? "sidebar sidebar-collapsed" : "sidebar"}>
<div className="sidebar-brand">
<div className="sidebar-wordmark">Leistungsbilanz</div>
<div className="sidebar-bar" />
<div className="sidebar-tag">Stromkreis- &amp; Lastberechnung</div>
<div className="sidebar-brand-text">
<div className="sidebar-wordmark">Leistungsbilanz</div>
<div className="sidebar-bar" />
<div className="sidebar-tag">Stromkreis- &amp; Lastberechnung</div>
</div>
<button
aria-label={isCollapsed ? "Seitenleiste ausklappen" : "Seitenleiste einklappen"}
className="sidebar-toggle"
onClick={onToggleCollapsed}
title={isCollapsed ? "Seitenleiste ausklappen" : "Seitenleiste einklappen"}
type="button"
>
{isCollapsed ? "»" : "«"}
</button>
</div>
<nav className="sidebar-nav">
<Link
href="/projects"
className={pathname === "/projects" ? "sidebar-link active" : "sidebar-link"}
title="Alle Projekte"
>
<span className="sidebar-icon">▦</span>
Alle Projekte
<span className="sidebar-label">Alle Projekte</span>
</Link>
<div className="sidebar-section-label">Projekte</div>
@ -90,9 +107,10 @@ export function Sidebar() {
className={
project.id === activeProjectId ? "sidebar-link active" : "sidebar-link"
}
title={project.name}
>
<span className="sidebar-icon">▣</span>
{project.name}
<span className="sidebar-label">{project.name}</span>
</Link>
))}
{!projects.length ? (
@ -109,9 +127,10 @@ export function Sidebar() {
key={id}
href={`#${id}`}
className={activeSection === id ? "sidebar-link active" : "sidebar-link"}
title={label}
>
<span className="sidebar-icon">{icon}</span>
{label}
<span className="sidebar-label">{label}</span>
</a>
))}
</>