fix: Implement mobile navigation menu functionality

- Add mobile-menu.js with touch/click event handling for mobile devices
- Replace CSS-only hover behavior with JavaScript-based menu toggle
- Add touch-friendly styling with proper cursor and tap highlight removal
- Implement menu auto-close on outside click, escape key, and window resize
- Ensure mobile menu works properly on devices where hover doesn't function
- Mobile menu activates at screen width < 650px as per existing breakpoints

Author: Dale Kunce

app/assets/scripts/mobile-menu.js

@@ -0,0 +1,54 @@
+/**
+ * Mobile Navigation Menu
+ * Handles touch/click events for mobile devices where hover doesn't work properly
+ */
+(function() {
+    'use strict';
+    
+    function initMobileMenu() {
+        // Find the mobile dropdown toggle
+        const mobileDropdown = document.querySelector('.resp-nav-dropdown');
+        const dropdownContent = document.querySelector('.resp-dropdown-content');
+        
+        if (!mobileDropdown || !dropdownContent) {
+            return;
+        }
+        
+        // Add click event listener to toggle mobile menu
+        mobileDropdown.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            // Toggle the show class
+            dropdownContent.classList.toggle('show');
+        });
+        
+        // Close menu when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!mobileDropdown.contains(e.target)) {
+                dropdownContent.classList.remove('show');
+            }
+        });
+        
+        // Close menu when pressing escape key
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                dropdownContent.classList.remove('show');
+            }
+        });
+        
+        // Close menu when window is resized to desktop size
+        window.addEventListener('resize', function() {
+            if (window.innerWidth > 650) {
+                dropdownContent.classList.remove('show');
+            }
+        });
+    }
+    
+    // Initialize when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initMobileMenu);
+    } else {
+        initMobileMenu();
+    }
+})();

app/assets/styles/_base.scss

@@ -285,6 +285,8 @@ header{
   padding-left: 1em;
   width: 100px;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent; // Remove tap highlight on mobile
+  user-select: none; // Prevent text selection
   p{
     color: $lightgrey;
     font-family: 'Lato';
@@ -301,8 +303,6 @@ header{
       margin: 3px 0 0 0;
     }
   }
-  &:hover{
-  }
   @media screen and (max-width: 650px) {
     display: block;
   }
@@ -335,12 +335,15 @@ header{
 .resp-nav-dropdown {
     display: inline-block;
     text-align: center;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
     @media screen and (min-width: 651px) {
       display: none;
     }
 }
 
-.resp-nav-dropdown:hover .resp-dropdown-content {
+.resp-nav-dropdown:hover .resp-dropdown-content,
+.resp-dropdown-content.show {
     opacity: 1;
     height: auto;
 }