feat: improve sidebar handling

assets/css/app.css

@@ -117,16 +117,27 @@
   width: 4rem; /* Collapsed: w-16 */
 }
 
+/* ============================================
+   Header - Logo Centering
+   ============================================ */
+
+/* Header container with smooth transition for gap */
+.sidebar > div:first-child {
+  @apply transition-all duration-300;
+}
+
 /* ============================================
    Text Labels - Hide in Collapsed State
    ============================================ */
 
 .menu-label {
   @apply transition-all duration-200 whitespace-nowrap;
+  transition-delay: 0ms; /* Expanded: sofort sichtbar */
 }
 
 [data-sidebar-expanded="false"] .sidebar .menu-label {
   @apply opacity-0 w-0 overflow-hidden pointer-events-none;
+  transition-delay: 300ms; /* Warte bis Sidebar eingeklappt ist (300ms = duration der Sidebar width transition) */
 }
 
 /* ============================================
@@ -165,6 +176,11 @@
   @apply block;
 }
 
+/* Collapsed menu group button: center icon under logo */
+.sidebar .collapsed-menu-group button {
+  padding-left: 14px;
+}
+
 /* ============================================
    Elements Only Visible in Expanded State
    ============================================ */
@@ -192,20 +208,79 @@
 }
 
 /* ============================================
-   Menu Item Alignment - Center in Collapsed State
+   Menu Item Alignment - Icons Centered Under Logo
    ============================================ */
 
+/* Base alignment: Icons centered under logo (32px from left edge)
+   - Logo center: 16px padding + 16px (half of 32px) = 32px
+   - Icon center should be at 32px: 22px start + 10px (half of 20px) = 32px
+   - Menu has p-2 (8px), so links need 14px additional padding-left */
+
+.sidebar .menu > li > a,
+.sidebar .menu > li > button {
+  @apply transition-all duration-300;
+  padding-left: 14px;
+}
+
+/* Collapsed state: same padding to keep icons at same position
+   - Remove gap so label (which is opacity-0 w-0) doesn't create space
+   - Keep padding-left at 14px so icons stay centered under logo */
 [data-sidebar-expanded="false"] .sidebar .menu > li > a,
 [data-sidebar-expanded="false"] .sidebar .menu > li > button {
-  @apply justify-center px-0;
+  @apply gap-0;
+  padding-left: 14px;
+  padding-right: 14px; /* Center icon horizontally in 64px sidebar */
 }
 
 /* ============================================
-   Footer Button Alignment - Center in Collapsed State
+   Footer Button Alignment - Left Aligned in Collapsed State
    ============================================ */
 
 [data-sidebar-expanded="false"] .sidebar .dropdown > button {
-  @apply justify-center px-0;
+  @apply px-0;
+  /* Buttons stay at left position, only label disappears */
+}
+
+/* ============================================
+   User Menu Button - Focus Ring on Avatar
+   ============================================ */
+
+/* Focus ring appears on the avatar when button is focused */
+.user-menu-button:focus .avatar > div {
+  @apply ring-2 ring-primary ring-offset-2 ring-offset-base-200;
+}
+
+/* ============================================
+   User Menu Button - Smooth Centering Transition
+   ============================================ */
+
+/* User menu button transitions smoothly to center */
+.user-menu-button {
+  @apply transition-all duration-300;
+}
+
+/* In collapsed state, center avatar under logo
+   - Avatar is 32px (w-8), center it in 64px sidebar
+   - (64px - 32px) / 2 = 16px padding → avatar center at 32px (same as logo center) */
+[data-sidebar-expanded="false"] .sidebar .user-menu-button {
+  @apply gap-0;
+  padding-left: 16px;
+  padding-right: 16px;
+  justify-content: center;
+}
+
+/* ============================================
+   User Menu Button - Hover Ring on Avatar
+   ============================================ */
+
+/* Smooth transition for avatar ring effects */
+.user-menu-button .avatar > div {
+  @apply transition-all duration-200;
+}
+
+/* Hover ring appears on the avatar when button is hovered */
+.user-menu-button:hover .avatar > div {
+  @apply ring-1 ring-neutral ring-offset-1 ring-offset-base-200;
 }
 
 /* ============================================