From c407ee3530dd9ef3128662df82266147024cf816 Mon Sep 17 00:00:00 2001
From: Runar Ingebrigtsen <runar@rin.no>
Date: Fri, 30 Jan 2026 10:09:38 +0100
Subject: [PATCH] shared header, responsive

---
 app/views/entries/edit.html.erb   |  15 +---
 app/views/entries/index.html.erb  |  22 +-----
 app/views/layouts/admin.html.erb  |  85 ++++++++++++++++++++-
 app/views/requests/new.html.erb   |  14 +---
 app/views/shared/_header.html.erb | 122 ++++++++++++++++++++++++++++++
 5 files changed, 206 insertions(+), 52 deletions(-)
 create mode 100644 app/views/shared/_header.html.erb

diff --git a/app/views/entries/edit.html.erb b/app/views/entries/edit.html.erb
index 6bb674a..e03004c 100644
--- a/app/views/entries/edit.html.erb
+++ b/app/views/entries/edit.html.erb
@@ -1,20 +1,7 @@
 <% content_for :title, "Edit Entry" %>
 
 <div class="min-h-screen flex flex-col">
-  <header class="bg-white border-b border-slate-200">
-    <div class="max-w-7xl mx-auto px-4">
-      <div class="h-16 flex items-center justify-between">
-        <%= link_to root_path, class: "flex items-center gap-2" do %>
-          <span class="text-xl font-bold tracking-tight text-indigo-600">Sanasto</span>
-          <span class="text-xl font-light text-slate-400">Wiki</span>
-        <% end %>
-        <div class="flex items-center gap-3">
-          <%= link_to "Browse", entries_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
-          <%= link_to "Download XLSX", download_entries_path(format: :xlsx), class: "text-xs font-bold text-indigo-700 px-3 py-2 rounded-md border border-indigo-200 bg-indigo-50 hover:bg-indigo-100 transition" %>
-        </div>
-      </div>
-    </div>
-  </header>
+  <%= render "shared/header", show_request_button: false, show_browse_button: true %>
 
   <div class="flex-1 bg-gradient-to-br from-indigo-50 via-white to-purple-50 flex items-center justify-center px-4 py-12">
     <div class="max-w-2xl w-full">
diff --git a/app/views/entries/index.html.erb b/app/views/entries/index.html.erb
index 238bfeb..890eb08 100644
--- a/app/views/entries/index.html.erb
+++ b/app/views/entries/index.html.erb
@@ -1,27 +1,7 @@
 <% content_for :title, "Sanasto Wiki" %>
 
 <div class="min-h-screen flex flex-col">
-  <header class="bg-white border-b border-slate-200">
-    <div class="max-w-7xl mx-auto px-4">
-      <div class="h-16 flex items-center justify-between">
-        <div class="flex items-center gap-2">
-          <span class="text-xl font-bold tracking-tight text-indigo-600">Sanasto</span>
-          <span class="text-xl font-light text-slate-400">Wiki</span>
-        </div>
-        <div class="flex items-center gap-3">
-          <%= link_to "Request Entry", new_request_path,
-                      class: "text-xs font-bold text-emerald-700 px-3 py-2 rounded-md border border-emerald-200 bg-emerald-50 hover:bg-emerald-100 transition" %>
-          <%= link_to "Download XLSX", download_entries_path(format: :xlsx),
-                      class: "text-xs font-bold text-indigo-700 px-3 py-2 rounded-md border border-indigo-200 bg-indigo-50 hover:bg-indigo-100 transition" %>
-          <% if admin? %>
-            <%= link_to "Admin", admin_root_path, class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition" %>
-          <% else %>
-            <%= link_to "Sign In", login_path, class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition" %>
-          <% end %>
-        </div>
-      </div>
-    </div>
-  </header>
+  <%= render "shared/header" %>
 
   <!-- Flash messages -->
   <% if flash.any? %>
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index b7387fd..645b4ec 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -16,11 +16,13 @@
       <header class="bg-white border-b border-slate-200">
         <div class="max-w-7xl mx-auto px-4">
           <div class="h-16 flex items-center justify-between">
-            <div class="flex items-center gap-2">
+            <%= link_to admin_dashboard_path, class: "flex items-center gap-2" do %>
               <span class="text-xl font-bold tracking-tight text-indigo-600">Sanasto</span>
               <span class="text-xl font-light text-slate-400">Admin</span>
-            </div>
-            <nav class="flex items-center gap-3">
+            <% end %>
+
+            <!-- Desktop Navigation -->
+            <nav class="hidden md:flex items-center gap-3">
               <%= link_to "Dashboard", admin_dashboard_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
               <%= link_to "Users", admin_users_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
               <%= link_to "Invitations", admin_invitations_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
@@ -35,12 +37,87 @@
                 <% end %>
               <% end %>
               <%= link_to "Back to Site", root_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
-              <%= button_to "Log Out", logout_path, method: :delete, form: { data: { turbo: false }, style: "display: inline-block;" }, class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition cursor-pointer" %>
+              <%= button_to "Log Out", logout_path, method: :delete, data: { turbo: false }, form: { style: "display: inline-block;" }, class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition cursor-pointer" %>
+            </nav>
+
+            <!-- Mobile Navigation -->
+            <div class="flex md:hidden items-center gap-3">
+              <span class="text-sm text-slate-600">
+                <%= current_user.name.split.first %>
+              </span>
+              <button type="button" id="admin-mobile-menu-button" class="p-2 text-slate-600 hover:text-indigo-600 focus:outline-none">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Mobile Menu Dropdown -->
+          <div id="admin-mobile-menu" class="hidden md:hidden border-t border-slate-200 py-3">
+            <div class="py-2 px-2 border-b border-slate-200 mb-2">
+              <span class="text-sm font-medium text-slate-900">
+                <%= current_user.name %>
+              </span>
+            </div>
+
+            <nav class="flex flex-col space-y-1">
+              <%= link_to "Dashboard", admin_dashboard_path, class: "px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded transition" %>
+              <%= link_to "Users", admin_users_path, class: "px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded transition" %>
+              <%= link_to "Invitations", admin_invitations_path, class: "px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded transition" %>
+              <% requested_count = Entry.requested.count %>
+              <%= link_to admin_requests_path, class: "px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded transition flex items-center justify-between" do %>
+                <span>Requests</span>
+                <% if requested_count > 0 %>
+                  <span class="bg-red-500 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">
+                    <%= requested_count %>
+                  </span>
+                <% end %>
+              <% end %>
+              <%= link_to "Back to Site", root_path, class: "px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded transition" %>
+              <%= button_to "Log Out", logout_path, method: :delete, data: { turbo: false }, form: { class: "w-full" }, class: "w-full text-left px-2 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded transition cursor-pointer" %>
             </nav>
           </div>
         </div>
       </header>
 
+      <script>
+        function setupAdminMobileMenu() {
+          const menuButton = document.getElementById('admin-mobile-menu-button');
+          const mobileMenu = document.getElementById('admin-mobile-menu');
+
+          if (menuButton && mobileMenu) {
+            // Remove existing listeners to avoid duplicates
+            const newMenuButton = menuButton.cloneNode(true);
+            menuButton.parentNode.replaceChild(newMenuButton, menuButton);
+
+            newMenuButton.addEventListener('click', function(e) {
+              e.stopPropagation();
+              mobileMenu.classList.toggle('hidden');
+            });
+
+            // Close menu when clicking outside
+            document.addEventListener('click', function(event) {
+              const isClickInside = newMenuButton.contains(event.target) || mobileMenu.contains(event.target);
+              if (!isClickInside && !mobileMenu.classList.contains('hidden')) {
+                mobileMenu.classList.add('hidden');
+              }
+            });
+
+            // Close menu when navigating with Turbo
+            document.addEventListener('turbo:click', function() {
+              if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
+                mobileMenu.classList.add('hidden');
+              }
+            });
+          }
+        }
+
+        // Run on initial load and on Turbo navigation
+        document.addEventListener('DOMContentLoaded', setupAdminMobileMenu);
+        document.addEventListener('turbo:load', setupAdminMobileMenu);
+      </script>
+
       <!-- Flash messages -->
       <% if flash.any? %>
         <div class="max-w-7xl mx-auto px-4 mt-4">
diff --git a/app/views/requests/new.html.erb b/app/views/requests/new.html.erb
index 44791de..5db5a26 100644
--- a/app/views/requests/new.html.erb
+++ b/app/views/requests/new.html.erb
@@ -1,19 +1,7 @@
 <% content_for :title, "Request a New Entry" %>
 
 <div class="min-h-screen flex flex-col">
-  <header class="bg-white border-b border-slate-200">
-    <div class="max-w-7xl mx-auto px-4">
-      <div class="h-16 flex items-center justify-between">
-        <%= link_to root_path, class: "flex items-center gap-2" do %>
-          <span class="text-xl font-bold tracking-tight text-indigo-600">Sanasto</span>
-          <span class="text-xl font-light text-slate-400">Wiki</span>
-        <% end %>
-        <div class="flex items-center gap-3">
-          <%= link_to "Sign In", login_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
-        </div>
-      </div>
-    </div>
-  </header>
+  <%= render "shared/header", show_request_button: false %>
 
   <div class="flex-1 bg-gradient-to-br from-indigo-50 via-white to-purple-50 flex items-center justify-center px-4 py-12">
     <div class="max-w-2xl w-full">
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
new file mode 100644
index 0000000..1d2be47
--- /dev/null
+++ b/app/views/shared/_header.html.erb
@@ -0,0 +1,122 @@
+<header class="bg-white border-b border-slate-200">
+  <div class="max-w-7xl mx-auto px-4">
+    <div class="h-16 flex items-center justify-between">
+      <%= link_to root_path, class: "flex items-center gap-2" do %>
+        <span class="text-xl font-bold tracking-tight text-indigo-600">Sanasto</span>
+        <span class="text-xl font-light text-slate-400">Wiki</span>
+      <% end %>
+
+      <!-- Desktop Navigation -->
+      <div class="hidden md:flex items-center gap-3">
+        <% if local_assigns[:show_request_button] != false %>
+          <%= link_to "Request Entry", new_request_path,
+                      class: "text-xs font-bold text-emerald-700 px-3 py-2 rounded-md border border-emerald-200 bg-emerald-50 hover:bg-emerald-100 transition" %>
+        <% end %>
+        <% if local_assigns[:show_download_button] != false %>
+          <%= link_to "Download XLSX", download_entries_path(format: :xlsx),
+                      class: "text-xs font-bold text-indigo-700 px-3 py-2 rounded-md border border-indigo-200 bg-indigo-50 hover:bg-indigo-100 transition" %>
+        <% end %>
+        <% if local_assigns[:show_browse_button] %>
+          <%= link_to "Browse", entries_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
+        <% end %>
+
+        <% if logged_in? %>
+          <div class="flex items-center gap-3 ml-2 pl-3 border-l border-slate-200">
+            <span class="text-sm text-slate-600">
+              <%= current_user.name %>
+            </span>
+            <% if admin? %>
+              <%= link_to "Admin", admin_root_path, class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition" %>
+            <% end %>
+            <%= link_to "Sign Out", logout_path, data: { turbo_method: :delete, turbo: false },
+                        class: "text-sm font-medium text-slate-600 hover:text-red-600 transition" %>
+          </div>
+        <% else %>
+          <%= link_to "Sign In", login_path, class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition" %>
+        <% end %>
+      </div>
+
+      <!-- Mobile Navigation -->
+      <div class="flex md:hidden items-center gap-3">
+        <% if logged_in? %>
+          <span class="text-sm text-slate-600">
+            <%= current_user.name.split.first %>
+          </span>
+        <% end %>
+        <button type="button" id="mobile-menu-button" class="p-2 text-slate-600 hover:text-indigo-600 focus:outline-none">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Mobile Menu Dropdown -->
+    <div id="mobile-menu" class="hidden md:hidden border-t border-slate-200 py-3">
+      <% if logged_in? %>
+        <div class="py-2 px-2 border-b border-slate-200 mb-2">
+          <span class="text-sm font-medium text-slate-900">
+            <%= current_user.name %>
+          </span>
+        </div>
+      <% end %>
+
+      <nav class="flex flex-col space-y-1">
+        <% if local_assigns[:show_request_button] != false %>
+          <%= link_to "Request Entry", new_request_path,
+                      class: "px-2 py-2 text-sm font-medium text-emerald-700 hover:bg-emerald-50 rounded transition" %>
+        <% end %>
+        <% if local_assigns[:show_browse_button] %>
+          <%= link_to "Browse", entries_path, class: "px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded transition" %>
+        <% end %>
+
+        <% if logged_in? %>
+          <% if admin? %>
+            <%= link_to "Admin", admin_root_path, class: "px-2 py-2 text-sm font-medium text-indigo-700 hover:bg-indigo-50 rounded transition" %>
+          <% end %>
+          <%= link_to "Sign Out", logout_path, data: { turbo_method: :delete, turbo: false },
+                      class: "px-2 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded transition" %>
+        <% else %>
+          <%= link_to "Sign In", login_path, class: "px-2 py-2 text-sm font-medium text-indigo-700 hover:bg-indigo-50 rounded transition" %>
+        <% end %>
+      </nav>
+    </div>
+  </div>
+</header>
+
+<script>
+  function setupMobileMenu() {
+    const menuButton = document.getElementById('mobile-menu-button');
+    const mobileMenu = document.getElementById('mobile-menu');
+
+    if (menuButton && mobileMenu) {
+      // Remove existing listeners to avoid duplicates
+      const newMenuButton = menuButton.cloneNode(true);
+      menuButton.parentNode.replaceChild(newMenuButton, menuButton);
+
+      newMenuButton.addEventListener('click', function(e) {
+        e.stopPropagation();
+        mobileMenu.classList.toggle('hidden');
+      });
+
+      // Close menu when clicking outside
+      document.addEventListener('click', function(event) {
+        const isClickInside = newMenuButton.contains(event.target) || mobileMenu.contains(event.target);
+        if (!isClickInside && !mobileMenu.classList.contains('hidden')) {
+          mobileMenu.classList.add('hidden');
+        }
+      });
+
+      // Close menu when navigating with Turbo
+      document.addEventListener('turbo:click', function() {
+        if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
+          mobileMenu.classList.add('hidden');
+        }
+      });
+    }
+  }
+
+  // Run on initial load and on Turbo navigation
+  document.addEventListener('DOMContentLoaded', setupMobileMenu);
+  document.addEventListener('turbo:load', setupMobileMenu);
+</script>