feat: implement standard-compliant sidebar with comprehensive tests

Implement a new sidebar component based on DaisyUI Drawer pattern without
custom CSS variants. The sidebar supports desktop (expanded/collapsed states)
and mobile (overlay drawer) with full accessibility compliance.

Sidebar Implementation:
- Refactor sidebar component with sidebar_header, menu_item, menu_group,
  sidebar_footer sub-components
- Add logo (mila.svg) with size-8 (32px) always visible
- Implement toggle button with icon swap (chevron-left/right) for desktop
- Add nested menu support with details/summary (expanded) and dropdown
  (collapsed) patterns
- Implement footer with language selector (expanded-only), theme toggle,
  and user menu with avatar
- Update layouts.ex to use drawer pattern with data-sidebar-expanded
  attribute for state management

CSS & JavaScript:
- Add CSS styles for sidebar state management via data-attribute selectors
- Implement SidebarState JavaScript hook for localStorage persistence
- Add smooth width transitions (w-64 ↔ w-16) for desktop collapsed state
- Add CSS classes for expanded-only, menu-label, and icon visibility

Documentation:
- Add sidebar-analysis-current-state.md: Analysis of current implementation
- Add sidebar-requirements-v2.md: Complete specification for new sidebar
- Add daisyui-drawer-pattern.md: DaisyUI pattern documentation
- Add umsetzung-sidebar.md: Step-by-step implementation guide

Testing:
- Add comprehensive component tests for all sidebar sub-components
- Add integration tests for sidebar state management and mobile drawer
- Extend accessibility tests (ARIA labels, roles, keyboard navigation)
- Add regression tests for duplicate IDs, hover effects, and tooltips
- Ensure full test coverage per specification requirements

assets/js/app.js

@@ -73,6 +73,43 @@ Hooks.ComboBox = {
   }
 }
 
+// SidebarState hook: Manages sidebar expanded/collapsed state
+Hooks.SidebarState = {
+  mounted() {
+    // Restore state from localStorage
+    const expanded = localStorage.getItem('sidebar-expanded') !== 'false'
+    this.setSidebarState(expanded)
+    
+    // Expose toggle function globally
+    window.toggleSidebar = () => {
+      const current = this.el.dataset.sidebarExpanded === 'true'
+      this.setSidebarState(!current)
+    }
+  },
+  
+  setSidebarState(expanded) {
+    // Convert boolean to string for consistency
+    const expandedStr = expanded ? 'true' : 'false'
+    
+    // Update data-attribute (CSS reacts to this)
+    this.el.dataset.sidebarExpanded = expandedStr
+    
+    // Persist to localStorage
+    localStorage.setItem('sidebar-expanded', expandedStr)
+    
+    // Update ARIA for accessibility
+    const toggleBtn = document.getElementById('sidebar-toggle')
+    if (toggleBtn) {
+      toggleBtn.setAttribute('aria-expanded', expandedStr)
+    }
+  },
+  
+  destroyed() {
+    // Cleanup
+    delete window.toggleSidebar
+  }
+}
+
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: {_csrf_token: csrfToken},
@@ -104,7 +141,7 @@ window.liveSocket = liveSocket
 
 // Sidebar accessibility improvements
 document.addEventListener("DOMContentLoaded", () => {
-  const drawerToggle = document.getElementById("main-drawer")
+  const drawerToggle = document.getElementById("mobile-drawer")
   const sidebarToggle = document.getElementById("sidebar-toggle")
   const sidebar = document.getElementById("main-sidebar")