Bring back mobile hamburger

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>