From 983451adcc5c510b723952ee00aa2c8a84f92f5a Mon Sep 17 00:00:00 2001
From: Teal Bauer <teal@starsong.eu>
Date: Tue, 11 Mar 2025 10:58:21 +0100
Subject: [PATCH] Bring back mobile hamburger
---
app/views/layouts/application.html.erb | 64 +++++++++++++++++++++-----
1 file changed, 52 insertions(+), 12 deletions(-)
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 3bb06de..e2deef9 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -76,9 +76,8 @@
</button>
<!-- Mobile dropdown menu -->
- <div id="main-mobile-menu" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded shadow-lg z-50">
+ <div id="main-mobile-menu" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded shadow-lg border border-gray-200 dark:border-gray-700 z-50">
<div class="py-2">
- <div class="px-4 py-2 font-semibold text-sm text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">Navigation</div>
<%= link_to 'Conferences', conferences_path, class: 'block px-4 py-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700' %>
<%= link_to 'Assignments', assignments_path, class: 'block px-4 py-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700' %>
@@ -102,8 +101,29 @@
<!-- Not logged in state -->
<div class="flex items-center space-x-4">
<span class="px-2 text-gray-600 dark:text-gray-300 hidden md:inline">not logged in</span>
+ <%= link_to "Assignments", assignments_path, class: "text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" %>
<%= link_to "Log in", new_user_session_path, class: "text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" %>
- <%= link_to "Sign Up", new_user_registration_path, class: "text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" %>
+ </div>
+
+ <!-- Mobile hamburger menu for non-logged in users -->
+ <div class="md:hidden relative ml-4">
+ <button id="guest-menu-toggle" class="text-gray-900 dark:text-white">
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+ </svg>
+ </button>
+
+ <!-- Mobile dropdown menu for guests -->
+ <div id="guest-mobile-menu" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+ <div>
+ <%= link_to 'Conferences', conferences_path, class: 'block px-4 py-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700' %>
+ <%= link_to 'Assignments', assignments_path, class: 'block px-4 py-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700' %>
+
+ <div class="px-4 py-2 font-semibold text-sm text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700 mt-2">Account</div>
+ <%= link_to "Log in", new_user_session_path, class: 'block px-4 py-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700' %>
+ <%= link_to "Sign Up", new_user_registration_path, class: 'block px-4 py-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700' %>
+ </div>
+ </div>
</div>
<% end %>
</nav>
@@ -111,7 +131,8 @@
</header>
<script>
- function initializeMainNavMenu() {
+ function initializeNavMenus() {
+ // Initialize main menu for logged in users
const menuToggle = document.getElementById('main-menu-toggle');
const mobileMenu = document.getElementById('main-mobile-menu');
@@ -124,22 +145,41 @@
e.stopPropagation();
mobileMenu.classList.toggle('hidden');
});
+ }
+
+ // Initialize guest menu for non-logged in users
+ const guestMenuToggle = document.getElementById('guest-menu-toggle');
+ const guestMobileMenu = document.getElementById('guest-mobile-menu');
+
+ if (guestMenuToggle && guestMobileMenu) {
+ // Remove any existing event listeners to prevent duplicates
+ const newGuestMenuToggle = guestMenuToggle.cloneNode(true);
+ guestMenuToggle.parentNode.replaceChild(newGuestMenuToggle, guestMenuToggle);
- // Close the menu when clicking outside
- document.addEventListener('click', function(e) {
- if (mobileMenu && !mobileMenu.contains(e.target) && e.target !== newMenuToggle) {
- mobileMenu.classList.add('hidden');
- }
+ newGuestMenuToggle.addEventListener('click', function(e) {
+ e.stopPropagation();
+ guestMobileMenu.classList.toggle('hidden');
});
}
+
+ // Close all menus when clicking outside
+ document.addEventListener('click', function(e) {
+ if (mobileMenu && !mobileMenu.contains(e.target) && e.target !== menuToggle) {
+ mobileMenu.classList.add('hidden');
+ }
+
+ if (guestMobileMenu && !guestMobileMenu.contains(e.target) && e.target !== guestMenuToggle) {
+ guestMobileMenu.classList.add('hidden');
+ }
+ });
}
// Initialize on DOMContentLoaded
- document.addEventListener('DOMContentLoaded', initializeMainNavMenu);
+ document.addEventListener('DOMContentLoaded', initializeNavMenus);
// Re-initialize on Turbo navigation
- document.addEventListener('turbo:load', initializeMainNavMenu);
- document.addEventListener('turbo:render', initializeMainNavMenu);
+ document.addEventListener('turbo:load', initializeNavMenus);
+ document.addEventListener('turbo:render', initializeNavMenus);
</script>
<main>
--
GitLab