sidebar working as expected

modalbox working as expected

dashboard/components/sidebar.py

@@ -3,9 +3,8 @@
 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]:
+def Sidebar(collapsed: bool = False):
     """
     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.
@@ -14,50 +13,37 @@ def Sidebar(collapsed: bool = False) -> List[Any]:
     nav_items = [
         {"label": "Übersicht",    "href": "/overview",    "icon": "mdi:view-dashboard"},
         {"label": "Termine",      "href": "/appointments","icon": "mdi:calendar"},
-        {"label": "Bildschirme", "href": "/clients",     "icon": "mdi:monitor"},
+        {"label": "Bildschirme",  "href": "/clients",     "icon": "mdi:monitor"},
         {"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(
-            [
+    if collapsed:
+        nav_links = [
+            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']}",
+                href=item["href"],
+                active="exact",
+                className="sidebar-item-collapsed",
+                id={"type": "nav-item", "index": 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"
+            for item in nav_items
+        ]
+    else:
+        nav_links = [
+            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={"type": "nav-item", "index": item["label"]},
             )
-        )
+            for item in nav_items
+        ]
 
-    # Gib nur den Inhalt zurück, nicht das äußere div
     return [
         html.Div(
             className="sidebar-toggle",
@@ -67,5 +53,20 @@ def Sidebar(collapsed: bool = False) -> List[Any]:
                 className="toggle-button",
             )
         ),
-        dbc.Nav(nav_links, vertical=True, pills=True, className="sidebar-nav")
+        dbc.Collapse(
+            dbc.Nav(
+                nav_links,
+                vertical=True,
+                pills=True,
+                className="sidebar-nav",
+            ),
+            is_open=not collapsed,
+            className="sidebar-nav",
+        ) if not collapsed else
+        dbc.Nav(
+            nav_links,
+            vertical=True,
+            pills=True,
+            className="sidebar-nav-collapsed",
+        ),
     ]