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/css/app.css

@@ -99,4 +99,138 @@
 /* Make LiveView wrapper divs transparent for layout */
 [data-phx-session] { display: contents }
 
+/* ============================================
+   Sidebar Base Styles
+   ============================================ */
+
+/* Desktop Sidebar Base */
+.sidebar {
+  @apply flex flex-col bg-base-200 min-h-screen;
+  @apply transition-[width] duration-300 ease-in-out;
+  @apply relative;
+  width: 16rem; /* Expanded: w-64 */
+  z-index: 40;
+}
+
+/* Collapsed State */
+[data-sidebar-expanded="false"] .sidebar {
+  width: 4rem; /* Collapsed: w-16 */
+}
+
+/* ============================================
+   Text Labels - Hide in Collapsed State
+   ============================================ */
+
+.menu-label {
+  @apply transition-all duration-200 whitespace-nowrap;
+}
+
+[data-sidebar-expanded="false"] .sidebar .menu-label {
+  @apply opacity-0 w-0 overflow-hidden pointer-events-none;
+}
+
+/* ============================================
+   Toggle Button Icon Swap
+   ============================================ */
+
+.sidebar-collapsed-icon {
+  @apply hidden;
+}
+
+[data-sidebar-expanded="false"] .sidebar .sidebar-expanded-icon {
+  @apply hidden;
+}
+
+[data-sidebar-expanded="false"] .sidebar .sidebar-collapsed-icon {
+  @apply block;
+}
+
+/* ============================================
+   Menu Groups - Show/Hide Based on State
+   ============================================ */
+
+.expanded-menu-group {
+  @apply block;
+}
+
+.collapsed-menu-group {
+  @apply hidden;
+}
+
+[data-sidebar-expanded="false"] .sidebar .expanded-menu-group {
+  @apply hidden;
+}
+
+[data-sidebar-expanded="false"] .sidebar .collapsed-menu-group {
+  @apply block;
+}
+
+/* ============================================
+   Elements Only Visible in Expanded State
+   ============================================ */
+
+.expanded-only {
+  @apply block transition-opacity duration-200;
+}
+
+[data-sidebar-expanded="false"] .sidebar .expanded-only {
+  @apply hidden;
+}
+
+/* ============================================
+   Tooltip - Only Show in Collapsed State
+   ============================================ */
+
+.sidebar .tooltip::before,
+.sidebar .tooltip::after {
+  @apply opacity-0 pointer-events-none;
+}
+
+[data-sidebar-expanded="false"] .sidebar .tooltip:hover::before,
+[data-sidebar-expanded="false"] .sidebar .tooltip:hover::after {
+  @apply opacity-100;
+}
+
+/* ============================================
+   Menu Item Alignment - Center in Collapsed State
+   ============================================ */
+
+[data-sidebar-expanded="false"] .sidebar .menu > li > a,
+[data-sidebar-expanded="false"] .sidebar .menu > li > button {
+  @apply justify-center px-0;
+}
+
+/* ============================================
+   Footer Button Alignment - Center in Collapsed State
+   ============================================ */
+
+[data-sidebar-expanded="false"] .sidebar .dropdown > button {
+  @apply justify-center px-0;
+}
+
+/* ============================================
+   Mobile Drawer Width
+   ============================================ */
+
+/* Auf Mobile (< 1024px) ist die Sidebar immer w-64 (16rem) wenn geöffnet */
+@media (max-width: 1023px) {
+  .drawer-side .sidebar {
+    width: 16rem; /* w-64 auch auf Mobile */
+  }
+}
+
+/* ============================================
+   Drawer Side Overflow Fix für Desktop
+   ============================================ */
+
+/* Im Desktop-Modus (lg:drawer-open) overflow auf visible setzen
+   damit Dropdowns und Tooltips über Main Content erscheinen können */
+@media (min-width: 1024px) {
+  .drawer.lg\:drawer-open .drawer-side {
+    overflow: visible !important;
+    overflow-x: visible !important;
+    overflow-y: visible !important;
+  }
+}
+
 /* This file is for your main application CSS */