working on header

app/assets/stylesheets/application.postcss.css

@@ -11,6 +11,7 @@
 @import "components/flash";
 @import "components/footer";
 @import "components/event-finder";
+@import "components/header";
 
 /* Import pages */
 @import "pages/home";

app/views/components/_auth_links.html.erb

@@ -0,0 +1,53 @@
+<% if user_signed_in? %>
+  <!-- Authenticated User Dropdown -->
+  <div class="hidden sm:flex sm:items-center sm:ms-6">
+    <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
+      <div @click="open = ! open">
+        <button
+          class="bg-primary-700 text-white border border-primary-800 font-medium py-2 px-4 rounded-lg hover:bg-primary-800 transition-colors duration-200 focus-ring">
+          <div>
+            <%= current_user.email.length > 20 ? current_user.email[0,20] + "..." : current_user.email %>
+          </div>
+          <div class="ms-1">
+            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0" style="display: none;" @click="open = false">
+        <div class="rounded-md ring-1 ring-primary-700 py-1 bg-primary-600">
+          <%= link_to t('header.profile'), edit_user_registration_path, class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-100 hover:bg-primary-700" %>
+          <%= link_to t('header.reservations'), "#", class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-100 hover:bg-primary-700" %>
+          <%= link_to t('header.logout'), destroy_user_session_path, data: { controller: "logout", action: "click->logout#signOut", logout_url_value: destroy_user_session_path, login_url_value: new_user_session_path, turbo: false }, class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-100 hover:bg-primary-700" %>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Responsive Auth Options -->
+  <div class="pt-4 pb-1 border-t border-primary-700 bg-primary-600">
+    <div class="px-4">
+      <% if current_user.first_name %>
+        <div class="font-medium text-base text-white"><%= current_user.first_name %></div>
+      <% else %>
+        <div class="font-medium text-base text-white"><%= current_user.email.length > 20 ? current_user.email[0,20] + "..." : current_user.email %></div>
+      <% end %>
+    </div>
+    <div class="mt-3 space-y-1">
+      <%= link_to t('header.profile'), edit_user_registration_path, class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700" %>
+      <%= link_to t('header.reservations'), "#", class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700" %>
+      <%= link_to t('header.logout'), destroy_user_session_path, data: { controller: "logout", action: "click->logout#signOut", logout_url_value: destroy_user_session_path, login_url_value: new_user_session_path, turbo: false }, class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700" %>
+    </div>
+  </div>
+<% else %>
+  <!-- Non-Authenticated Links -->
+  <div class="flex items-center space-x-4">
+    <%= link_to t('header.login'), new_user_session_path, class: "text-neutral-100 hover:text-primary-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-primary-50 text-primary-600 font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-primary-100 transition-all duration-200" %>
+  </div>
+  <!-- Responsive Non-Auth Options -->
+  <div class="mt-3 space-y-1">
+    <%= link_to t('header.register'), new_user_registration_path, class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700" %>
+    <%= link_to t('header.login'), new_user_session_path, class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700" %>
+  </div>
+<% end %>

app/views/components/_header.html.erb

@@ -1,17 +1,130 @@
-<nav class="nav">
-  <div class="container">
-    <div style="display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0;">
-      <div style="display: flex; align-items: center; gap: var(--space-3);">
-        <div style="width: 40px; height: 40px; background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-family: var(--font-display); box-shadow: var(--shadow-purple-sm);">A</div>
-        <%= link_to "Aperonight", root_path, class: "nav-link", style: "font-size: var(--text-xl); font-weight: 800; color: var(--color-neutral-900); font-family: var(--font-display);" %>
+<header class="shadow-sm border-b border-neutral-700">
+  <div class="bg-neutral-900">
+    <nav x-data="{ menuOpen: false, dropdownOpen: false }" class="bg-neutral-800 border-b border-neutral-700">
+      <!-- Primary Navigation Menu -->
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between h-16">
+          <div class="flex">
+            <!-- Logo -->
+            <div class="shrink-0 flex items-center">
+              <%= link_to Rails.application.config.app_name, current_user ? "/dashboard" : "/", class: "text-xl font-bold" %>
+            </div>
+            <!-- Navigation Links -->
+            <div class="flex items-center space-x-8">
+              <%= render 'components/nav_links' %>
+            </div>
+          </div>
+          <!-- Authentication Links -->
+          <% if user_signed_in? %>
+            <!-- Settings Dropdown -->
+            <div class="hidden sm:flex sm:items-center sm:ms-6" x-data="{ open: false }" @click.outside="open = false">
+              <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
+                <div @click="open = ! open">
+                  <button @click="open = !open">
+                    class="bg-primary-700 text-white border border-primary-800 font-medium py-2 px-4 rounded-lg hover:bg-primary-800 transition-colors duration-200 focus-ring">
+                    <div>
+                      <%= current_user.email.length> 20 ? current_user.email[0,20] + "..." : current_user.email %>
+                    </div>
+                    <div class="ms-1">
+                      <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd"
+                          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                          clip-rule="evenodd" />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+                <div x-show="open" x-transition:enter="transition ease-out duration-150"
+                  x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
+                  x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100"
+                  x-transition:leave-end="opacity-0 scale-95"
+                  class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0" style="display: none;"
+                  @click="open = false">
+                  <div class="rounded-md ring-1 ring-primary-700 py-1 bg-primary-600">
+<%= link_to t('header.profile') , edit_user_registration_path,
+                        class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-100 hover:bg-primary-700" %>
+<%= link_to t('header.reservations') , "#" ,
+                            class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-100 hover:bg-primary-700" %>
+                    <%= link_to t('header.logout') , destroy_user_session_path, data: { controller: "logout" ,
+                          action: "click->logout#signOut" , logout_url_value: destroy_user_session_path, login_url_value:
+                          new_user_session_path, turbo: false },
+                          class: "block w-full px-4 py-2 text-start text-sm leading-5 text-neutral-100 hover:bg-primary-700" %>
+                  </div>
+                </div>
+              </div>
+            </div>
+          <% else %>
+            <!-- Login/Register Links -->
+            <div class="flex items-center space-x-4">
+              <%= link_to t('header.login') , new_user_session_path,
+                    class: "text-neutral-100 hover:text-primary-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-primary-50 text-primary-600 font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-primary-100 transition-all duration-200"
+                    %>
+            </div>
+          <% end %>
+          <!-- Hamburger -->
+          <div class="-me-2 flex items-center sm:hidden">
+            <button @click="menuOpen = ! menuOpen"
+                    class="p-2 rounded-md text-neutral-300 hover:text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+              <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                <path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
+                        stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                <path class="hidden" :class="{ 'hidden': !menuOpen, 'inline-flex': menuOpen }" stroke-linecap="round"
+                        stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
       </div>
-      <div style="display: flex; gap: var(--space-2); align-items: center;">
-        <a href="#events" class="nav-link">Events</a>
-        <a href="#features" class="nav-link">About</a>
-        <a href="#contact" class="nav-link">Contact</a>
-        <button class="btn btn-md btn-outline" style="margin-left: var(--space-2);">Sign In</button>
-        <button class="btn btn-md btn-primary">Get Started</button>
+      <!-- Responsive Navigation Menu -->
+      <div :class="{ 'block': menuOpen, 'hidden': !menuOpen }" class="hidden sm:hidden">
+        <div class="pt-2 pb-3 space-y-1 bg-primary-600">
+          <%= render 'components/nav_links' %>
+        </div>
+        <!-- Responsive Settings Options -->
+        <div class="pt-4 pb-1 border-t border-primary-700 bg-primary-600">
+          <% if user_signed_in? %>
+            <div class="px-4">
+              <% if current_user.first_name %>
+                <div class="font-medium text-base text-white">
+                  <%= current_user.first_name %>
+                </div>
+              <% else %>
+                <div class="font-medium text-base text-white">
+                  <%= current_user.email.length> 20 ? current_user.email[0,20] + "..." : current_user.email %>
+                </div>
+                <%# <div class="font-medium text-sm text-purple-200">
+                    <%= current_user.email.length> 20 ? current_user.email[0,20] + "..." : current_user.email %>
+              </div>
+            <% end %>
+          </div>
+          <div class="mt-3 space-y-1">
+            <%= link_to t('header.profile') , edit_user_registration_path,
+            class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
+            %>
+            <%= link_to t('header.reservations') , "#" ,
+              class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
+              %>
+
+            <%= link_to t('header.logout') , destroy_user_session_path, data: { controller: "logout" , action: "click->logout#signOut",
+              logout_url_value: destroy_user_session_path, login_url_value: new_user_session_path, turbo: false },
+              class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
+              %>
+          </div>
+        <% else %>
+          <div class="mt-3 space-y-1">
+            <%= link_to t('header.register') , new_user_registration_path,
+              class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
+              %>
+<%= link_to t('header.login') , new_user_session_path,
+              class: "block px-3 py-2 rounded-md text-base font-medium text-neutral-100 hover:text-primary-200 hover:bg-primary-700"
+              %>
+          </div>
+        <% end %>
       </div>
     </div>
-  </div>
-</nav>
+  </nav>
+</div>
+</header>

app/views/components/_nav_links.html.erb

@@ -0,0 +1,6 @@
+<%= link_to "Évenements", events_path,
+  class: "text-neutral-100 hover:text-primary-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+  %>
+<%= link_to t('header.concerts'), "#" ,
+   class: "text-neutral-100 hover:text-primary-200 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+   %>