initial commit

dashboard/components/sidebar.py

@@ -0,0 +1,70 @@
+# dashboard/components/sidebar.py
+
+from dash import html
+import dash_bootstrap_components as dbc
+from dash_iconify import DashIconify
+from typing import List, Any
+
+def Sidebar(collapsed: bool = False) -> List[Any]:
+    """
+    Gibt nur den Inhalt der Sidebar zurück (ohne das äußere div mit id="sidebar").
+    Das äußere div wird bereits in app.py definiert.
+    """
+
+    nav_items = [
+        {"label": "Übersicht",    "href": "/overview",    "icon": "mdi:view-dashboard"},
+        {"label": "Termine",      "href": "/appointments","icon": "mdi:calendar"},
+        {"label": "Einstellungen","href": "/settings",    "icon": "mdi:cog"},
+        {"label": "Benutzer",     "href": "/users",       "icon": "mdi:account"},
+    ]
+
+    nav_links = []
+    
+    for item in nav_items:
+        # Die ID muss in den Callbacks exakt so referenziert werden:
+        link_id = {"type": "nav-item", "index": item["label"]}
+        
+        # ✅ NavLink erstellen
+        nav_link = dbc.NavLink(
+            [
+                DashIconify(icon=item["icon"], width=24),
+                html.Span(item["label"], className="ms-2 sidebar-label"),
+            ],
+            href=item["href"],
+            active="exact",
+            className="sidebar-item",
+            id=link_id,
+        )
+        
+        # ✅ Conditional List Construction - keine append() nötig
+        if collapsed:
+            tooltip = dbc.Tooltip(
+                item["label"],
+                target=link_id,
+                placement="right",
+                id=f"tooltip-{item['label']}",
+            )
+            link_components = [nav_link, tooltip]
+        else:
+            link_components = [nav_link]
+        
+        # ✅ Alle Komponenten in einem div-Container
+        nav_links.append(
+            html.Div(
+                children=link_components,
+                className="nav-item-container"
+            )
+        )
+
+    # Gib nur den Inhalt zurück, nicht das äußere div
+    return [
+        html.Div(
+            className="sidebar-toggle",
+            children=html.Button(
+                DashIconify(icon="mdi:menu", width=28),
+                id="btn-toggle-sidebar",
+                className="toggle-button",
+            )
+        ),
+        dbc.Nav(nav_links, vertical=True, pills=True, className="sidebar-nav")
+    ]