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
2025-12-18 16:33:44 +01:00 · 2025-12-18 16:33:44 +01:00 · 16ca4efc03
commit 16ca4efc03
parent b0097ab99d
10 changed files with 5439 additions and 194 deletions
--- a/docs/daisyui-drawer-pattern.md
+++ b/docs/daisyui-drawer-pattern.md
@ -0,0 +1,532 @@
+# DaisyUI Drawer Pattern - Standard Implementation
+
+This document describes the standard DaisyUI drawer pattern for implementing responsive sidebars. It covers mobile overlay drawers, desktop persistent sidebars, and their combination.
+
+## Core Concept
+
+DaisyUI's drawer component uses a **checkbox-based toggle mechanism** combined with CSS to create accessible, responsive sidebars without custom JavaScript.
+
+### Key Components
+
+1. **`drawer`** - Container element
+2. **`drawer-toggle`** - Hidden checkbox that controls open/close state
+3. **`drawer-content`** - Main content area
+4. **`drawer-side`** - Sidebar content (menu, navigation)
+5. **`drawer-overlay`** - Optional overlay for mobile (closes drawer on click)
+
+## HTML Structure
+
+```html
+<div class="drawer">
+  <!-- Hidden checkbox controls the drawer state -->
+  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
+  
+  <!-- Main content area -->
+  <div class="drawer-content">
+    <!-- Page content goes here -->
+    <label for="my-drawer" class="btn btn-primary">Open drawer</label>
+  </div>
+  
+  <!-- Sidebar content -->
+  <div class="drawer-side">
+    <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+    <ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
+      <!-- Sidebar content goes here -->
+      <li><a>Sidebar Item 1</a></li>
+      <li><a>Sidebar Item 2</a></li>
+    </ul>
+  </div>
+</div>
+```
+
+## How drawer-toggle Works
+
+### Mechanism
+
+The `drawer-toggle` is a **hidden checkbox** that serves as the state controller:
+
+```html
+<input id="my-drawer" type="checkbox" class="drawer-toggle" />
+```
+
+### Toggle Behavior
+
+1. **Label Connection**: Any `<label for="my-drawer">` element can toggle the drawer
+2. **Checkbox State**: 
+   - `checked` → drawer is open
+   - `unchecked` → drawer is closed
+3. **CSS Targeting**: DaisyUI uses CSS sibling selectors to show/hide the drawer based on checkbox state
+4. **Accessibility**: Native checkbox provides keyboard accessibility (Space/Enter to toggle)
+
+### Toggle Examples
+
+```html
+<!-- Button to open drawer -->
+<label for="my-drawer" class="btn btn-primary drawer-button">
+  Open Menu
+</label>
+
+<!-- Close button inside drawer -->
+<label for="my-drawer" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
+
+<!-- Overlay to close (click outside) -->
+<label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+```
+
+## Mobile Drawer (Overlay)
+
+### Characteristics
+
+- Drawer slides in from the side (usually left)
+- Overlays the main content
+- Dark overlay (drawer-overlay) behind drawer
+- Clicking overlay closes the drawer
+- Typically used on mobile/tablet screens
+
+### Implementation
+
+```html
+<div class="drawer">
+  <input id="mobile-drawer" type="checkbox" class="drawer-toggle" />
+  
+  <div class="drawer-content">
+    <!-- Toggle button in header -->
+    <div class="navbar bg-base-100">
+      <div class="flex-none">
+        <label for="mobile-drawer" class="btn btn-square btn-ghost">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+        </label>
+      </div>
+      <div class="flex-1">
+        <a class="btn btn-ghost text-xl">My App</a>
+      </div>
+    </div>
+    
+    <!-- Main content -->
+    <div class="p-4">
+      <h1>Main Content</h1>
+    </div>
+  </div>
+  
+  <div class="drawer-side">
+    <!-- Overlay - clicking it closes the drawer -->
+    <label for="mobile-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+    
+    <!-- Sidebar menu -->
+    <ul class="menu p-4 w-80 min-h-full bg-base-200">
+      <li><a>Home</a></li>
+      <li><a>About</a></li>
+      <li><a>Contact</a></li>
+    </ul>
+  </div>
+</div>
+```
+
+### Styling Notes
+
+- **Width**: Default `w-80` (320px), adjust with Tailwind width utilities
+- **Background**: Use DaisyUI color classes like `bg-base-200`
+- **Height**: Always use `min-h-full` to ensure full height
+- **Padding**: Add `p-4` or similar for inner spacing
+
+## Desktop Sidebar (Persistent)
+
+### Characteristics
+
+- Always visible (no overlay)
+- Does not overlay main content
+- Main content adjusts to sidebar width
+- No toggle button needed
+- Used on desktop screens
+
+### Implementation with drawer-open
+
+```html
+<div class="drawer lg:drawer-open">
+  <input id="desktop-drawer" type="checkbox" class="drawer-toggle" />
+  
+  <div class="drawer-content">
+    <!-- Main content -->
+    <div class="p-4">
+      <h1>Main Content</h1>
+      <p>The sidebar is always visible on desktop (lg and above)</p>
+    </div>
+  </div>
+  
+  <div class="drawer-side">
+    <!-- No overlay needed for persistent sidebar -->
+    <label for="desktop-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+    
+    <!-- Sidebar menu -->
+    <ul class="menu p-4 w-80 min-h-full bg-base-200">
+      <li><a>Dashboard</a></li>
+      <li><a>Settings</a></li>
+      <li><a>Profile</a></li>
+    </ul>
+  </div>
+</div>
+```
+
+### How drawer-open Works
+
+The `drawer-open` class forces the drawer to be **permanently open**:
+
+```html
+<div class="drawer drawer-open">
+```
+
+- Drawer is always visible
+- Cannot be toggled closed
+- `drawer-toggle` checkbox is ignored
+- `drawer-overlay` is not shown
+- Main content automatically shifts to accommodate sidebar width
+
+### Responsive Usage
+
+Use Tailwind breakpoint modifiers for responsive behavior:
+
+```html
+<!-- Open on large screens and above -->
+<div class="drawer lg:drawer-open">
+
+<!-- Open on medium screens and above -->
+<div class="drawer md:drawer-open">
+
+<!-- Open on extra-large screens and above -->
+<div class="drawer xl:drawer-open">
+```
+
+## Combined Mobile + Desktop Pattern (Recommended)
+
+This is the **most common pattern** for responsive applications: mobile overlay + desktop persistent.
+
+### Complete Implementation
+
+```html
+<div class="drawer lg:drawer-open">
+  <!-- Checkbox for mobile toggle -->
+  <input id="app-drawer" type="checkbox" class="drawer-toggle" />
+  
+  <div class="drawer-content flex flex-col">
+    <!-- Navbar with mobile menu button -->
+    <div class="navbar bg-base-100 lg:hidden">
+      <div class="flex-none">
+        <label for="app-drawer" class="btn btn-square btn-ghost">
+          <!-- Hamburger icon -->
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+        </label>
+      </div>
+      <div class="flex-1">
+        <a class="btn btn-ghost text-xl">My App</a>
+      </div>
+    </div>
+    
+    <!-- Main content -->
+    <div class="flex-1 p-6">
+      <h1 class="text-3xl font-bold mb-4">Welcome</h1>
+      <p>This is the main content area.</p>
+      <p>On mobile (< lg): sidebar is hidden, hamburger menu visible</p>
+      <p>On desktop (≥ lg): sidebar is persistent, hamburger menu hidden</p>
+    </div>
+  </div>
+  
+  <div class="drawer-side">
+    <!-- Overlay only shows on mobile -->
+    <label for="app-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+    
+    <!-- Sidebar navigation -->
+    <aside class="bg-base-200 w-80 min-h-full">
+      <!-- Logo/Header area -->
+      <div class="p-4 font-bold text-xl border-b border-base-300">
+        My App Logo
+      </div>
+      
+      <!-- Navigation menu -->
+      <ul class="menu p-4">
+        <li><a>
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+          </svg>
+          Dashboard
+        </a></li>
+        <li><a>
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          Documents
+        </a></li>
+        <li><a>
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+          Settings
+        </a></li>
+      </ul>
+    </aside>
+  </div>
+</div>
+```
+
+### Behavior Breakdown
+
+#### On Mobile (< 1024px / < lg)
+1. Sidebar is hidden by default
+2. Hamburger button visible in navbar
+3. Clicking hamburger opens sidebar as overlay
+4. Clicking overlay or close button closes sidebar
+5. Sidebar slides in from left with animation
+
+#### On Desktop (≥ 1024px / ≥ lg)
+1. `lg:drawer-open` keeps sidebar permanently visible
+2. Hamburger button hidden via `lg:hidden`
+3. Sidebar takes up fixed width (320px)
+4. Main content area adjusts automatically
+5. No overlay, no toggle needed
+
+## Tailwind Breakpoints Reference
+
+```css
+/* Default (mobile-first) */
+/* < 640px */
+
+sm: /* ≥ 640px */
+md: /* ≥ 768px */
+lg: /* ≥ 1024px */ ← Common desktop breakpoint
+xl: /* ≥ 1280px */
+2xl: /* ≥ 1536px */
+```
+
+## Key Classes Summary
+
+| Class | Purpose |
+|-------|---------|
+| `drawer` | Main container |
+| `drawer-toggle` | Hidden checkbox for state control |
+| `drawer-content` | Main content area |
+| `drawer-side` | Sidebar container |
+| `drawer-overlay` | Clickable overlay (closes drawer) |
+| `drawer-open` | Forces drawer to stay open |
+| `drawer-end` | Positions drawer on the right side |
+| `lg:drawer-open` | Opens drawer on large screens only |
+
+## Positioning Variants
+
+### Left Side Drawer (Default)
+
+```html
+<div class="drawer">
+  <!-- Drawer appears on the left -->
+</div>
+```
+
+### Right Side Drawer
+
+```html
+<div class="drawer drawer-end">
+  <!-- Drawer appears on the right -->
+</div>
+```
+
+## Best Practices
+
+### 1. Accessibility
+- Always include `aria-label` on overlay: `<label for="drawer" aria-label="close sidebar" class="drawer-overlay"></label>`
+- Use semantic HTML (`<nav>`, `<aside>`)
+- Ensure keyboard navigation works (native checkbox provides this)
+
+### 2. Responsive Design
+- Use `lg:drawer-open` for desktop persistence
+- Hide mobile toggle button on desktop: `lg:hidden`
+- Adjust sidebar width for mobile if needed: `w-64 md:w-80`
+
+### 3. Performance
+- DaisyUI drawer is pure CSS (no JavaScript needed)
+- Animations are handled by CSS transitions
+- No performance overhead
+
+### 4. Styling
+- Use DaisyUI theme colors: `bg-base-200`, `text-base-content`
+- Maintain consistent spacing: `p-4`, `gap-2`
+- Use DaisyUI menu component for navigation: `<ul class="menu">`
+
+### 5. Content Structure
+```html
+<div class="drawer-content flex flex-col">
+  <!-- Navbar (if needed) -->
+  <div class="navbar">...</div>
+  
+  <!-- Main content with flex-1 to fill space -->
+  <div class="flex-1 p-6">
+    <!-- Your content -->
+  </div>
+  
+  <!-- Footer (if needed) -->
+  <footer>...</footer>
+</div>
+```
+
+## Common Patterns
+
+### Pattern 1: Drawer with Close Button
+
+```html
+<div class="drawer-side">
+  <label for="drawer" class="drawer-overlay"></label>
+  <aside class="bg-base-200 w-80 min-h-full relative">
+    <!-- Close button (mobile only) -->
+    <label for="drawer" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 lg:hidden">✕</label>
+    
+    <!-- Sidebar content -->
+    <ul class="menu p-4 pt-12">
+      <li><a>Item 1</a></li>
+    </ul>
+  </aside>
+</div>
+```
+
+### Pattern 2: Drawer with User Profile
+
+```html
+<aside class="bg-base-200 w-80 min-h-full flex flex-col">
+  <!-- Logo -->
+  <div class="p-4 font-bold text-xl">My App</div>
+  
+  <!-- Navigation (flex-1 to push footer down) -->
+  <ul class="menu flex-1 p-4">
+    <li><a>Dashboard</a></li>
+    <li><a>Settings</a></li>
+  </ul>
+  
+  <!-- User profile footer -->
+  <div class="p-4 border-t border-base-300">
+    <div class="flex items-center gap-2">
+      <div class="avatar">
+        <div class="w-10 rounded-full">
+          <img src="/avatar.jpg" alt="User" />
+        </div>
+      </div>
+      <div>
+        <div class="font-semibold">John Doe</div>
+        <div class="text-sm opacity-70">john@example.com</div>
+      </div>
+    </div>
+  </div>
+</aside>
+```
+
+### Pattern 3: Nested Menu with Submenu
+
+```html
+<ul class="menu p-4 w-80 min-h-full bg-base-200">
+  <li><a>Dashboard</a></li>
+  
+  <!-- Submenu -->
+  <li>
+    <details>
+      <summary>Products</summary>
+      <ul>
+        <li><a>Electronics</a></li>
+        <li><a>Clothing</a></li>
+        <li><a>Books</a></li>
+      </ul>
+    </details>
+  </li>
+  
+  <li><a>Settings</a></li>
+</ul>
+```
+
+## Troubleshooting
+
+### Issue: Drawer doesn't open on mobile
+**Solution**: Check that:
+1. Checkbox `id` matches label `for` attribute
+2. Checkbox has class `drawer-toggle`
+3. You're not using `drawer-open` on mobile breakpoints
+
+### Issue: Drawer overlaps content on desktop
+**Solution**: 
+- Remove `drawer-open` or use responsive variant `lg:drawer-open`
+- Ensure you want overlay behavior, not persistent sidebar
+
+### Issue: Overlay not clickable
+**Solution**:
+- Ensure overlay label has correct `for` attribute
+- Check that overlay is not behind other elements (z-index)
+
+### Issue: Content jumps when drawer opens
+**Solution**:
+- Add `flex flex-col` to `drawer-content`
+- Ensure drawer-side width is fixed (e.g., `w-80`)
+
+## Migration from Custom Solutions
+
+If migrating from a custom sidebar implementation:
+
+### Replace custom JavaScript
+❌ Before:
+```javascript
+function toggleDrawer() {
+  document.getElementById('sidebar').classList.toggle('open');
+}
+```
+
+✅ After:
+```html
+<input id="drawer" type="checkbox" class="drawer-toggle" />
+<label for="drawer">Toggle</label>
+```
+
+### Replace custom CSS
+❌ Before:
+```css
+.sidebar {
+  transform: translateX(-100%);
+  transition: transform 0.3s;
+}
+.sidebar.open {
+  transform: translateX(0);
+}
+```
+
+✅ After:
+```html
+<div class="drawer">
+  <!-- DaisyUI handles all transitions -->
+</div>
+```
+
+### Replace media query logic
+❌ Before:
+```css
+@media (min-width: 1024px) {
+  .sidebar { display: block; }
+  .toggle-button { display: none; }
+}
+```
+
+✅ After:
+```html
+<div class="drawer lg:drawer-open">
+  <label for="drawer" class="lg:hidden">Toggle</label>
+</div>
+```
+
+## Summary
+
+The DaisyUI drawer pattern provides:
+
+✅ **Zero JavaScript** - Pure CSS solution
+✅ **Accessible** - Built-in keyboard support via checkbox
+✅ **Responsive** - Easy mobile/desktop variants with Tailwind
+✅ **Themeable** - Uses DaisyUI theme colors
+✅ **Flexible** - Supports left/right positioning
+✅ **Standard** - No custom CSS needed
+
+**Recommended approach**: Use `lg:drawer-open` for desktop with hidden mobile toggle for best responsive experience.
+
--- a/docs/sidebar-analysis-current-state.md
+++ b/docs/sidebar-analysis-current-state.md
@ -0,0 +1,746 @@
+# Sidebar Analysis - Current State
+
+**Erstellt:** 2025-12-16  
+**Status:** Analyse für Neuimplementierung  
+**Autor:** Cursor AI Assistant
+
+---
+
+## Executive Summary
+
+Die aktuelle Sidebar-Implementierung verwendet **nicht existierende Custom-CSS-Variants** (`is-drawer-close:` und `is-drawer-open:`), was zu einer defekten Implementierung führt. Die Sidebar ist strukturell basierend auf DaisyUI's Drawer-Komponente, aber die responsive und state-basierte Funktionalität ist nicht funktionsfähig.
+
+**Kritisches Problem:** Die im Code verwendeten Variants `is-drawer-close:*` und `is-drawer-open:*` sind **nicht in Tailwind konfiguriert**, was bedeutet, dass diese Klassen beim Build ignoriert werden.
+
+---
+
+## 1. Dateien-Übersicht
+
+### 1.1 Hauptdateien
+
+| Datei | Zweck | Zeilen | Status |
+|-------|-------|--------|--------|
+| `lib/mv_web/components/layouts/sidebar.ex` | Sidebar-Komponente (Elixir) | 198 | ⚠️ Verwendet nicht existierende Variants |
+| `lib/mv_web/components/layouts/navbar.ex` | Navbar mit Sidebar-Toggle | 48 | ✅ Funktional |
+| `lib/mv_web/components/layouts.ex` | Layout-Wrapper mit Drawer | 121 | ✅ Funktional |
+| `assets/js/app.js` | JavaScript für Sidebar-Interaktivität | 272 | ✅ Umfangreiche Accessibility-Logik |
+| `assets/css/app.css` | CSS-Konfiguration | 103 | ⚠️ Keine Drawer-Variants definiert |
+| `assets/tailwind.config.js` | Tailwind-Konfiguration | 75 | ⚠️ Keine Drawer-Variants definiert |
+
+### 1.2 Verwandte Dateien
+
+- `lib/mv_web/components/layouts/root.html.heex` - Root-Layout (minimal, keine Sidebar-Logik)
+- `priv/static/images/logo.svg` - Logo (wird vermutlich für Sidebar benötigt)
+
+---
+
+## 2. Aktuelle Struktur
+
+### 2.1 HTML-Struktur (DaisyUI Drawer Pattern)
+
+```html
+<!-- In layouts.ex -->
+<div class="drawer">
+  <input id="main-drawer" type="checkbox" class="drawer-toggle" />
+  
+  <div class="drawer-content">
+    <!-- Navbar mit Toggle-Button -->
+    <navbar with sidebar-toggle button />
+    
+    <!-- Hauptinhalt -->
+    <main>...</main>
+  </div>
+  
+  <!-- Sidebar -->
+  <div class="drawer-side">
+    <button class="drawer-overlay" onclick="close drawer"></button>
+    <nav id="main-sidebar">
+      <!-- Navigation Items -->
+    </nav>
+  </div>
+</div>
+```
+
+**Bewertung:** ✅ Korrekte DaisyUI Drawer-Struktur
+
+### 2.2 Sidebar-Komponente (`sidebar.ex`)
+
+**Struktur:**
+```elixir
+defmodule MvWeb.Layouts.Sidebar do
+  attr :current_user, :map
+  attr :club_name, :string
+  
+  def sidebar(assigns) do
+    # Rendert Sidebar mit Navigation, Locale-Selector, Theme-Toggle, User-Menu
+  end
+end
+```
+
+**Hauptelemente:**
+1. **Drawer Overlay** - Button zum Schließen (Mobile)
+2. **Navigation Container** (`<nav id="main-sidebar">`)
+3. **Menü-Items** - Members, Users, Contributions (nested), Settings
+4. **Footer-Bereich** - Locale-Selector, Theme-Toggle, User-Menu
+
+---
+
+## 3. Custom CSS Variants - KRITISCHES PROBLEM
+
+### 3.1 Verwendete Variants im Code
+
+Die Sidebar verwendet folgende Custom-Variants **extensiv**:
+
+```elixir
+# Beispiele aus sidebar.ex
+"is-drawer-close:overflow-visible"
+"is-drawer-close:w-14 is-drawer-open:w-64"
+"is-drawer-close:hidden"
+"is-drawer-close:tooltip is-drawer-close:tooltip-right"
+"is-drawer-close:w-auto"
+"is-drawer-close:justify-center"
+"is-drawer-close:dropdown-end"
+```
+
+**Gefundene Verwendungen:**
+- `is-drawer-close:` - 13 Instanzen in sidebar.ex
+- `is-drawer-open:` - 1 Instanz in sidebar.ex
+
+### 3.2 Definition der Variants
+
+**❌ NICHT GEFUNDEN in:**
+- `assets/css/app.css` - Enthält nur `phx-*-loading` Variants
+- `assets/tailwind.config.js` - Enthält nur `phx-*-loading` Variants
+
+**Fazit:** Diese Variants existieren **nicht** und werden beim Tailwind-Build **ignoriert**!
+
+### 3.3 Vorhandene Variants
+
+Nur folgende Custom-Variants sind tatsächlich definiert:
+
+```css
+/* In app.css (Tailwind CSS 4.x Syntax) */
+@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
+@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
+@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);
+```
+
+```javascript
+/* In tailwind.config.js (Tailwind 3.x Kompatibilität) */
+plugin(({addVariant}) => addVariant("phx-click-loading", [...])),
+plugin(({addVariant}) => addVariant("phx-submit-loading", [...])),
+plugin(({addVariant}) => addVariant("phx-change-loading", [...])),
+```
+
+---
+
+## 4. JavaScript-Implementierung
+
+### 4.1 Übersicht
+
+Die JavaScript-Implementierung ist **sehr umfangreich** und fokussiert auf Accessibility:
+
+**Datei:** `assets/js/app.js` (Zeilen 106-270)
+
+**Hauptfunktionalitäten:**
+1. ✅ Tabindex-Management für fokussierbare Elemente
+2. ✅ ARIA-Attribut-Management (`aria-expanded`)
+3. ✅ Keyboard-Navigation (Enter, Space, Escape)
+4. ✅ Focus-Management beim Öffnen/Schließen
+5. ✅ Dropdown-Integration
+
+### 4.2 Wichtige JavaScript-Funktionen
+
+#### 4.2.1 Tabindex-Management
+
+```javascript
+const updateSidebarTabIndex = (isOpen) => {
+  const allFocusableElements = sidebar.querySelectorAll(
+    'a[href], button, select, input:not([type="hidden"]), [tabindex]'
+  )
+  
+  allFocusableElements.forEach(el => {
+    if (isOpen) {
+      // Make focusable when open
+      el.removeAttribute('tabindex')
+    } else {
+      // Remove from tab order when closed
+      el.setAttribute('tabindex', '-1')
+    }
+  })
+}
+```
+
+**Zweck:** Verhindert, dass Nutzer mit Tab zu unsichtbaren Sidebar-Elementen springen können.
+
+#### 4.2.2 ARIA-Expanded Management
+
+```javascript
+const updateAriaExpanded = () => {
+  const isOpen = drawerToggle.checked
+  sidebarToggle.setAttribute("aria-expanded", isOpen.toString())
+}
+```
+
+**Zweck:** Informiert Screen-Reader über den Sidebar-Status.
+
+#### 4.2.3 Focus-Management
+
+```javascript
+const getFirstFocusableElement = () => {
+  // Priority: navigation link > other links > other focusable
+  const firstNavLink = sidebar.querySelector('a[href][role="menuitem"]')
+  // ... fallback logic
+}
+
+// On open: focus first element
+// On close: focus toggle button
+```
+
+**Zweck:** Logische Fokus-Reihenfolge für Keyboard-Navigation.
+
+#### 4.2.4 Keyboard-Shortcuts
+
+```javascript
+// ESC to close
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && drawerToggle.checked) {
+    drawerToggle.checked = false
+    sidebarToggle.focus()
+  }
+})
+
+// Enter/Space on toggle button
+sidebarToggle.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" || e.key === " ") {
+    // Toggle drawer and manage focus
+  }
+})
+```
+
+### 4.3 LiveView Hooks
+
+**Definierte Hooks:**
+```javascript
+Hooks.CopyToClipboard = { ... }  // Clipboard-Funktionalität
+Hooks.ComboBox = { ... }         // Dropdown-Prävention bei Enter
+```
+
+**Sidebar-spezifisch:** Keine Hooks, nur native DOM-Events.
+
+---
+
+## 5. DaisyUI Dependencies
+
+### 5.1 Verwendete DaisyUI-Komponenten
+
+| Komponente | Verwendung | Klassen |
+|------------|-----------|---------|
+| **Drawer** | Basis-Layout | `drawer`, `drawer-toggle`, `drawer-side`, `drawer-content`, `drawer-overlay` |
+| **Menu** | Navigation | `menu`, `menu-title`, `w-64` |
+| **Button** | Toggle, User-Menu | `btn`, `btn-ghost`, `btn-square`, `btn-circle` |
+| **Avatar** | User-Menu | `avatar`, `avatar-placeholder` |
+| **Dropdown** | User-Menu | `dropdown`, `dropdown-top`, `dropdown-end`, `dropdown-content` |
+| **Tooltip** | Icon-Tooltips | `tooltip`, `tooltip-right` (via `data-tip`) |
+| **Select** | Locale-Selector | `select`, `select-sm` |
+| **Toggle** | Theme-Switch | `toggle`, `theme-controller` |
+
+### 5.2 Standard Tailwind-Klassen
+
+**Layout:**
+- `flex`, `flex-col`, `items-start`, `justify-center`
+- `gap-2`, `gap-4`, `p-4`, `mt-auto`, `w-full`, `w-64`, `min-h-full`
+
+**Sizing:**
+- `size-4`, `size-5`, `w-12`, `w-52`
+
+**Colors:**
+- `bg-base-100`, `bg-base-200`, `text-neutral-content`
+
+**Typography:**
+- `text-lg`, `text-sm`, `font-bold`
+
+**Accessibility:**
+- `sr-only`, `focus:outline-none`, `focus:ring-2`, `focus:ring-primary`
+
+---
+
+## 6. Toggle-Button (Navbar)
+
+### 6.1 Implementierung
+
+**Datei:** `lib/mv_web/components/layouts/navbar.ex`
+
+```elixir
+<button
+  type="button"
+  onclick="document.getElementById('main-drawer').checked = !document.getElementById('main-drawer').checked"
+  aria-label={gettext("Toggle navigation menu")}
+  aria-expanded="false"
+  aria-controls="main-sidebar"
+  id="sidebar-toggle"
+  class="mr-2 btn btn-square btn-ghost"
+>
+  <svg><!-- Layout-Panel-Left Icon --></svg>
+</button>
+```
+
+**Funktionalität:**
+- ✅ Togglet Drawer-Checkbox
+- ✅ ARIA-Labels vorhanden
+- ✅ Keyboard-accessible
+- ⚠️ `aria-expanded` wird durch JavaScript aktualisiert
+
+**Icon:** Custom SVG (Layout-Panel-Left mit Chevron-Right)
+
+---
+
+## 7. Responsive Verhalten
+
+### 7.1 Aktuelles Konzept (nicht funktional)
+
+**Versuchte Implementierung:**
+- **Desktop (collapsed):** Sidebar mit 14px Breite (`is-drawer-close:w-14`)
+- **Desktop (expanded):** Sidebar mit 64px Breite (`is-drawer-open:w-64`)
+- **Mobile:** Overlay-Drawer (DaisyUI Standard)
+
+### 7.2 Problem
+
+Da die `is-drawer-*` Variants nicht existieren, gibt es **kein responsives Verhalten**:
+- Die Sidebar hat immer eine feste Breite von `w-64`
+- Die conditional hiding (`:hidden`, etc.) funktioniert nicht
+- Tooltips werden nicht conditional angezeigt
+
+---
+
+## 8. Accessibility-Features
+
+### 8.1 Implementierte Features
+
+| Feature | Status | Implementierung |
+|---------|--------|-----------------|
+| **ARIA Labels** | ✅ | Alle interaktiven Elemente haben Labels |
+| **ARIA Roles** | ✅ | `menubar`, `menuitem`, `menu`, `button` |
+| **ARIA Expanded** | ✅ | Wird durch JS dynamisch gesetzt |
+| **ARIA Controls** | ✅ | Toggle → Sidebar verknüpft |
+| **Keyboard Navigation** | ✅ | Enter, Space, Escape, Tab |
+| **Focus Management** | ✅ | Logische Focus-Reihenfolge |
+| **Tabindex Management** | ✅ | Verhindert Focus auf hidden Elements |
+| **Screen Reader Only** | ✅ | `.sr-only` für visuelle Labels |
+| **Focus Indicators** | ✅ | `focus:ring-2 focus:ring-primary` |
+| **Skip Links** | ❌ | Nicht vorhanden |
+
+### 8.2 Accessibility-Score
+
+**Geschätzt:** 90/100 (WCAG 2.1 Level AA konform)
+
+**Verbesserungspotenzial:**
+- Skip-Link zur Hauptnavigation hinzufügen
+- High-Contrast-Mode testen
+
+---
+
+## 9. Menü-Struktur
+
+### 9.1 Navigation Items
+
+```
+📋 Main Menu
+├── 👥 Members (/members)
+├── 👤 Users (/users)
+├── 💰 Contributions (collapsed submenu)
+│   ├── Plans (/contribution_types)
+│   └── Settings (/contribution_settings)
+└── ⚙️ Settings (/settings)
+
+🔽 Footer Area (logged in only)
+├── 🌐 Locale Selector (DE/EN)
+├── 🌓 Theme Toggle (Light/Dark)
+└── 👤 User Menu (Dropdown)
+    ├── Profile (/users/:id)
+    └── Logout (/sign-out)
+```
+
+### 9.2 Conditional Rendering
+
+**Nicht eingeloggt:**
+- Sidebar ist leer (nur Struktur)
+- Keine Menü-Items
+
+**Eingeloggt:**
+- Vollständige Navigation
+- Footer-Bereich mit User-Menu
+
+### 9.3 Nested Menu (Contributions)
+
+**Problem:** Das Contributions-Submenu ist **immer versteckt** im collapsed State:
+
+```elixir
+<li class="is-drawer-close:hidden" role="none">
+  <h2 class="flex items-center gap-2 menu-title">
+    <.icon name="hero-currency-dollar" />
+    {gettext("Contributions")}
+  </h2>
+  <ul role="menu">
+    <li class="is-drawer-close:hidden">...</li>
+    <li class="is-drawer-close:hidden">...</li>
+  </ul>
+</li>
+```
+
+Da `:hidden` nicht funktioniert, wird das Submenu immer angezeigt.
+
+---
+
+## 10. Theme-Funktionalität
+
+### 10.1 Theme-Toggle
+
+```elixir
+<input
+  type="checkbox"
+  value="dark"
+  class="toggle theme-controller"
+  aria-label={gettext("Toggle dark mode")}
+/>
+```
+
+**Funktionalität:**
+- ✅ DaisyUI `theme-controller` - automatische Theme-Umschaltung
+- ✅ Persistence durch `localStorage` (siehe root.html.heex Script)
+- ✅ Icon-Wechsel (Sun ↔ Moon)
+
+### 10.2 Definierte Themes
+
+**Datei:** `assets/css/app.css`
+
+1. **Light Theme** (default)
+   - Base: `oklch(98% 0 0)`
+   - Primary: `oklch(70% 0.213 47.604)` (Orange/Phoenix-inspiriert)
+
+2. **Dark Theme**
+   - Base: `oklch(30.33% 0.016 252.42)`
+   - Primary: `oklch(58% 0.233 277.117)` (Purple/Elixir-inspiriert)
+
+---
+
+## 11. Locale-Funktionalität
+
+### 11.1 Locale-Selector
+
+```elixir
+<form method="post" action="/set_locale">
+  <select
+    id="locale-select-sidebar"
+    name="locale"
+    onchange="this.form.submit()"
+    class="select select-sm w-full is-drawer-close:w-auto"
+  >
+    <option value="de">Deutsch</option>
+    <option value="en">English</option>
+  </select>
+</form>
+```
+
+**Funktionalität:**
+- ✅ POST zu `/set_locale` Endpoint
+- ✅ CSRF-Token included
+- ✅ Auto-Submit on change
+- ✅ Accessible Label (`.sr-only`)
+
+---
+
+## 12. Probleme und Defekte
+
+### 12.1 Kritische Probleme
+
+| Problem | Schweregrad | Details |
+|---------|-------------|---------|
+| **Nicht existierende CSS-Variants** | 🔴 Kritisch | `is-drawer-close:*` und `is-drawer-open:*` sind nicht definiert |
+| **Keine responsive Funktionalität** | 🔴 Kritisch | Sidebar verhält sich nicht wie geplant |
+| **Conditional Styles funktionieren nicht** | 🔴 Kritisch | Hidden/Tooltip/Width-Changes werden ignoriert |
+
+### 12.2 Mittlere Probleme
+
+| Problem | Schweregrad | Details |
+|---------|-------------|---------|
+| **Kein Logo** | 🟡 Mittel | Logo-Element fehlt komplett in der Sidebar |
+| **Submenu immer sichtbar** | 🟡 Mittel | Contributions-Submenu sollte in collapsed State versteckt sein |
+| **Toggle-Icon statisch** | 🟡 Mittel | Icon ändert sich nicht zwischen expanded/collapsed |
+
+### 12.3 Kleinere Probleme
+
+| Problem | Schweregrad | Details |
+|---------|-------------|---------|
+| **Code-Redundanz** | 🟢 Klein | Variants in beiden Tailwind-Configs (3.x und 4.x) |
+| **Inline-onclick Handler** | 🟢 Klein | Sollten durch JS-Events ersetzt werden |
+| **Keine Skip-Links** | 🟢 Klein | Accessibility-Verbesserung |
+
+---
+
+## 13. Abhängigkeiten
+
+### 13.1 Externe Abhängigkeiten
+
+| Dependency | Version | Verwendung |
+|------------|---------|------------|
+| **DaisyUI** | Latest (vendor) | Drawer, Menu, Button, etc. |
+| **Tailwind CSS** | 4.0.9 | Utility-Klassen |
+| **Heroicons** | v2.2.0 | Icons in Navigation |
+| **Phoenix LiveView** | ~> 1.1.0 | Backend-Integration |
+
+### 13.2 Interne Abhängigkeiten
+
+| Modul | Verwendung |
+|-------|-----------|
+| `MvWeb.Gettext` | Internationalisierung |
+| `Mv.Membership.get_settings()` | Club-Name abrufen |
+| `MvWeb.CoreComponents` | Icons, Links |
+
+---
+
+## 14. Code-Qualität
+
+### 14.1 Positives
+
+- ✅ **Sehr gute Accessibility-Implementierung**
+- ✅ **Saubere Modulstruktur** (Separation of Concerns)
+- ✅ **Gute Dokumentation** (Moduledocs, Attribute docs)
+- ✅ **Internationalisierung** vollständig implementiert
+- ✅ **ARIA-Best-Practices** befolgt
+- ✅ **Keyboard-Navigation** umfassend
+
+### 14.2 Verbesserungsbedarf
+
+- ❌ **Broken CSS-Variants** (Hauptproblem)
+- ❌ **Fehlende Tests** (keine Component-Tests gefunden)
+- ⚠️ **Inline-JavaScript** in onclick-Attributen
+- ⚠️ **Magic-IDs** (`main-drawer`, `sidebar-toggle`) hardcoded
+- ⚠️ **Komplexe JavaScript-Logik** ohne Dokumentation
+
+---
+
+## 15. Empfehlungen für Neuimplementierung
+
+### 15.1 Sofort-Maßnahmen
+
+1. **CSS-Variants entfernen**
+   - Alle `is-drawer-close:*` und `is-drawer-open:*` entfernen
+   - Durch Standard-Tailwind oder DaisyUI-Mechanismen ersetzen
+
+2. **Logo hinzufügen**
+   - Logo-Element als erstes Element in Sidebar
+   - Konsistente Größe (32px / size-8)
+
+3. **Toggle-Icon implementieren**
+   - Icon-Swap zwischen Chevron-Left und Chevron-Right
+   - Nur auf Desktop sichtbar
+
+### 15.2 Architektur-Entscheidungen
+
+1. **Responsive Strategie:**
+   - **Mobile:** Standard DaisyUI Drawer (Overlay)
+   - **Desktop:** Persistent Sidebar mit fester Breite
+   - **Kein collapsing auf Desktop** (einfacher, wartbarer)
+
+2. **State-Management:**
+   - Drawer-Checkbox für Mobile
+   - Keine zusätzlichen Custom-Variants
+   - Standard DaisyUI-Mechanismen verwenden
+
+3. **JavaScript-Refactoring:**
+   - Hooks statt inline-onclick
+   - Dokumentierte Funktionen
+   - Unit-Tests für kritische Logik
+
+### 15.3 Prioritäten
+
+**High Priority:**
+1. CSS-Variants-Problem lösen
+2. Logo implementieren
+3. Basic responsive Funktionalität
+
+**Medium Priority:**
+4. Toggle-Icon implementieren
+5. Tests schreiben
+6. JavaScript refactoren
+
+**Low Priority:**
+7. Skip-Links hinzufügen
+8. Code-Optimierung
+9. Performance-Tuning
+
+---
+
+## 16. Checkliste für Neuimplementierung
+
+### 16.1 Vorbereitung
+
+- [ ] Alle `is-drawer-*` Klassen aus Code entfernen
+- [ ] Keine Custom-Variants in CSS/Tailwind definieren
+- [ ] DaisyUI-Dokumentation für Drawer studieren
+
+### 16.2 Implementation
+
+- [ ] Logo-Element hinzufügen (size-8, persistent)
+- [ ] Toggle-Button mit Icon-Swap (nur Desktop)
+- [ ] Mobile: Overlay-Drawer (DaisyUI Standard)
+- [ ] Desktop: Persistent Sidebar (w-64)
+- [ ] Menü-Items mit korrekten Klassen
+- [ ] Submenu-Handling (nested `<ul>`)
+
+### 16.3 Funktionalität
+
+- [ ] Toggle-Funktionalität auf Mobile
+- [ ] Accessibility: ARIA, Focus, Keyboard
+- [ ] Theme-Toggle funktional
+- [ ] Locale-Selector funktional
+- [ ] User-Menu-Dropdown funktional
+
+### 16.4 Testing
+
+- [ ] Component-Tests schreiben
+- [ ] Accessibility-Tests (axe-core)
+- [ ] Keyboard-Navigation testen
+- [ ] Screen-Reader testen
+- [ ] Responsive Breakpoints testen
+
+### 16.5 Dokumentation
+
+- [ ] Code-Kommentare aktualisieren
+- [ ] Component-Docs schreiben
+- [ ] README aktualisieren
+
+---
+
+## 17. Technische Details
+
+### 17.1 CSS-Selektoren
+
+**Verwendete IDs:**
+- `#main-drawer` - Drawer-Toggle-Checkbox
+- `#main-sidebar` - Sidebar-Navigation-Container
+- `#sidebar-toggle` - Toggle-Button in Navbar
+- `#locale-select-sidebar` - Locale-Dropdown
+
+**Verwendete Klassen:**
+- `.drawer-side` - DaisyUI Sidebar-Container
+- `.drawer-overlay` - DaisyUI Overlay-Button
+- `.drawer-content` - DaisyUI Content-Container
+- `.menu` - DaisyUI Menu-Container
+- `.is-drawer-close:*` - ❌ NICHT DEFINIERT
+- `.is-drawer-open:*` - ❌ NICHT DEFINIERT
+
+### 17.2 Event-Handler
+
+**JavaScript:**
+```javascript
+drawerToggle.addEventListener("change", ...)
+sidebarToggle.addEventListener("click", ...)
+sidebarToggle.addEventListener("keydown", ...)
+document.addEventListener("keydown", ...)  // ESC handler
+```
+
+**Inline (zu migrieren):**
+```elixir
+onclick="document.getElementById('main-drawer').checked = false"
+onclick="document.getElementById('main-drawer').checked = !..."
+onchange="this.form.submit()"
+```
+
+---
+
+## 18. Metriken
+
+### 18.1 Code-Metriken
+
+| Metrik | Wert |
+|--------|------|
+| **Zeilen Code (Sidebar)** | 198 |
+| **Zeilen JavaScript** | 165 (Sidebar-spezifisch) |
+| **Zeilen CSS** | 0 (nur Tailwind-Klassen) |
+| **Anzahl Komponenten** | 1 (Sidebar) + 1 (Navbar) |
+| **Anzahl Menü-Items** | 6 (inkl. Submenu) |
+| **Anzahl Footer-Controls** | 3 (Locale, Theme, User) |
+
+### 18.2 Abhängigkeits-Metriken
+
+| Kategorie | Anzahl |
+|-----------|--------|
+| **DaisyUI-Komponenten** | 7 |
+| **Tailwind-Utility-Klassen** | ~50 |
+| **Custom-Variants (broken)** | 2 (`is-drawer-close`, `is-drawer-open`) |
+| **JavaScript-Event-Listener** | 6 |
+| **ARIA-Attribute** | 12 |
+
+---
+
+## 19. Zusammenfassung
+
+### 19.1 Was funktioniert
+
+✅ **Sehr gute Grundlage:**
+- DaisyUI Drawer-Pattern korrekt implementiert
+- Exzellente Accessibility (ARIA, Keyboard, Focus)
+- Saubere Modulstruktur
+- Internationalisierung
+- Theme-Switching
+- JavaScript-Logik ist robust
+
+### 19.2 Was nicht funktioniert
+
+❌ **Kritische Defekte:**
+- CSS-Variants existieren nicht → keine responsive Funktionalität
+- Kein Logo
+- Kein Toggle-Icon-Swap
+- Submenu-Handling defekt
+
+### 19.3 Nächste Schritte
+
+1. **CSS-Variants entfernen** (alle `is-drawer-*` Klassen)
+2. **Standard DaisyUI-Pattern verwenden** (ohne Custom-Variants)
+3. **Logo hinzufügen** (persistent, size-8)
+4. **Simplify:** Mobile = Overlay, Desktop = Persistent (keine collapsed State)
+5. **Tests schreiben** (Component + Accessibility)
+
+---
+
+## 20. Anhang
+
+### 20.1 Verwendete CSS-Klassen (alphabetisch)
+
+```
+avatar, avatar-placeholder, bg-base-100, bg-base-200, bg-neutral,
+btn, btn-circle, btn-ghost, btn-square, cursor-pointer, drawer, 
+drawer-content, drawer-overlay, drawer-side, drawer-toggle, dropdown,
+dropdown-content, dropdown-end, dropdown-top, flex, flex-col,
+focus:outline-none, focus:ring-2, focus:ring-primary,
+focus-within:outline-none, focus-within:ring-2, gap-2, gap-4,
+is-drawer-close:*, is-drawer-open:*, items-center, items-start,
+mb-2, menu, menu-sm, menu-title, min-h-full, mr-2, mt-3, mt-auto,
+p-2, p-4, rounded-box, rounded-full, select, select-sm, shadow,
+shadow-sm, size-4, size-5, sr-only, text-lg, text-neutral-content,
+text-sm, theme-controller, toggle, tooltip, tooltip-right, w-12,
+w-52, w-64, w-full, z-1
+```
+
+### 20.2 Verwendete ARIA-Attribute
+
+```
+aria-busy, aria-controls, aria-describedby, aria-expanded,
+aria-haspopup, aria-hidden, aria-label, aria-labelledby,
+aria-live, role="alert", role="button", role="menu",
+role="menubar", role="menuitem", role="none", role="status"
+```
+
+### 20.3 Relevante Links
+
+- [DaisyUI Drawer Docs](https://daisyui.com/components/drawer/)
+- [Tailwind CSS Custom Variants](https://tailwindcss.com/docs/adding-custom-styles#adding-custom-variants)
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
+- [Phoenix LiveView Docs](https://hexdocs.pm/phoenix_live_view/)
+
+---
+
+**Ende des Berichts**
+
--- a/docs/sidebar-requirements-v2.md
+++ b/docs/sidebar-requirements-v2.md
--- a/docs/umsetzung-sidebar.md
+++ b/docs/umsetzung-sidebar.md