From a7e83d79d71b8b98d677ce9cfb50134a854bdd8f Mon Sep 17 00:00:00 2001
From: kbe <kevin@kev1.net>
Date: Sat, 30 Aug 2025 14:34:22 +0200
Subject: [PATCH] Fix responsive header navigation for mobile devices

- Restructure header component to properly separate desktop and mobile views
- Ensure mobile menu is hidden by default and only shown when hamburger is clicked
- Improve layout and spacing for better mobile experience
- Maintain all existing functionality for both desktop and mobile
---
 app/views/components/_header.html.erb | 36 ++++++++++++++-------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/app/views/components/_header.html.erb b/app/views/components/_header.html.erb
index a6c9b78..d30df79 100755
--- a/app/views/components/_header.html.erb
+++ b/app/views/components/_header.html.erb
@@ -1,21 +1,22 @@
 <header class="bg-neutral-800 border-b border-neutral-700">
   <nav data-controller="header" class="container mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex justify-between h-16">
-      <!-- Logo & Navigation -->
-      <div class="flex items-center space-x-8">
+      <!-- Logo -->
+      <div class="flex items-center">
         <%= link_to Rails.application.config.app_name, current_user ? "/dashboard" : "/",
             class: "text-xl font-bold text-white" %>
+      </div>
 
-        <div class="hidden sm:flex space-x-6">
-          <%= link_to t("header.parties"), events_path,
-              class: "text-gray-100 hover:text-purple-200 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
-          <%= link_to t("header.concerts"), "#",
-              class: "text-gray-100 hover:text-purple-200 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
-        </div>
+      <!-- Desktop Navigation -->
+      <div class="hidden sm:flex items-center space-x-6">
+        <%= link_to t("header.parties"), events_path,
+            class: "text-gray-100 hover:text-purple-200 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
+        <%= link_to t("header.concerts"), "#",
+            class: "text-gray-100 hover:text-purple-200 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
       </div>
 
       <!-- Authentication -->
-      <div class="flex items-center space-x-4">
+      <div class="hidden sm:flex items-center space-x-4">
         <% if user_signed_in? %>
           <div class="relative" data-header-target="userMenuButton">
             <button data-action="click->header#toggleUserMenu"
@@ -38,15 +39,16 @@
             </div>
           </div>
         <% else %>
-          <div class="hidden sm:flex items-center space-x-4">
-            <%= link_to t("header.login"), new_user_session_path,
-                class: "bg-black text-gray-100 hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
-            <%= link_to t("header.register"), new_user_registration_path,
-                class: "bg-purple-600 text-white font-medium py-2 px-4 rounded-lg hover:bg-purple-700 transition-colors duration-200" %>
-          </div>
+          <%= link_to t("header.login"), new_user_session_path,
+              class: "bg-black text-gray-100 hover:text-purple-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200" %>
+          <%= link_to t("header.register"), new_user_registration_path,
+              class: "bg-purple-600 text-white font-medium py-2 px-4 rounded-lg hover:bg-purple-700 transition-colors duration-200" %>
         <% end %>
-        <!-- Mobile Menu Button -->
-        <button data-action="click->header#toggleMobileMenu" data-header-target="mobileMenuButton" class="sm:hidden p-2 rounded-md text-neutral-300 hover:text-white hover:bg-purple-700">
+      </div>
+
+      <!-- Mobile menu button -->
+      <div class="flex items-center sm:hidden">
+        <button data-action="click->header#toggleMobileMenu" data-header-target="mobileMenuButton" class="p-2 rounded-md text-neutral-300 hover:text-white hover:bg-purple-700">
           <svg data-menu-icon="open" class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
           </svg>