Sidebar Test

Test der einklappbaren Sidebar-Funktionalität

Funktionen der einklappbaren Sidebar:

  • Toggle-Button: Klicken Sie auf den runden Pfeil-Button oben rechts in der Sidebar, um die Sidebar ein-/auszuklappen
  • Professionelle Icons: Im eingeklappten Zustand werden saubere, gut sichtbare Icons in normaler Größe angezeigt
  • Dark Mode Support: Die Sidebar passt sich automatisch an das gewählte Design an
  • Tooltips: Hover über die Icons zeigt die Beschriftung als Tooltip
  • Mehr Platz: Der Hauptinhalt wird automatisch breiter, wenn die Sidebar eingeklappt ist
  • Benutzereinstellung: Der Status wird pro Benutzer gespeichert
  • Responsive: Auf mobilen Geräten funktioniert die Sidebar wie gewohnt

Dark Mode Features:

  • Automatische Anpassung: Alle Farben passen sich an das Dark Theme an
  • Konsistente Farben: Verwendet die definierten Dark Mode Variablen
  • Tooltips: Auch die Tooltips haben Dark Mode Styling
  • Toggle-Button: Angepasste Schatten und Hover-Effekte

CSS-Klassen:

  • .admin-sidebar - Standard Sidebar (280px breit)
  • .admin-sidebar.collapsed - Eingeklappte Sidebar (70px breit)
  • .sidebar-toggle - Toggle-Button

JavaScript-Funktionen:

  • toggleSidebar() - Wechselt zwischen eingeklappt/ausgeklappt
  • saveSidebarState() - Speichert den Status
  • loadSidebarState() - Lädt den gespeicherten Status