mobile menu

Author: jaw-sh

themes/usips/sass/_base.scss

@@ -645,11 +645,7 @@ blockquote {
         display: none !important;
     }
 
-    .main-nav {
-        ul {
-            gap: 1rem; // Reduce gap between items on mobile
-        }
-    }
+    // Mobile navigation styles are now handled in _header.scss
 
     // Ensure "always-show" items are visible and properly spaced
     .always-show {

themes/usips/sass/_header.scss

@@ -8,6 +8,7 @@
         display: flex;
         justify-content: space-between;
         align-items: stretch;
+        position: relative;
     }
 }
 
@@ -38,6 +39,40 @@
     }
 }
 
+.mobile-menu-toggle {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 10px;
+    z-index: 1001;
+
+    span {
+        display: block;
+        width: 25px;
+        height: 3px;
+        background-color: $text-black;
+        margin: 3px 0;
+        transition: 0.3s;
+        transform-origin: center;
+    }
+
+    &.active span:nth-child(1) {
+        transform: rotate(45deg) translate(6px, 6px);
+    }
+
+    &.active span:nth-child(2) {
+        opacity: 0;
+    }
+
+    &.active span:nth-child(3) {
+        transform: rotate(-45deg) translate(6px, -6px);
+    }
+}
+
 #main-nav {
 
     ul {
@@ -58,8 +93,11 @@
             color: $text-hover-color;
             background: $tertiary-color;
 
-            .submenu {
-                display: block;
+
+            @media (min-width: 769px) {
+                .submenu {
+                    display: block;
+                }
             }
         }
     }
@@ -73,8 +111,6 @@
         text-align: right;
     }
 
-    span {}
-
     .submenu {
         display: none;
         position: absolute;
@@ -98,4 +134,97 @@
             padding: 0.5em 1em;
         }
     }
+}
+
+// Mobile styles
+@media (max-width: 768px) {
+    .mobile-menu-toggle {
+        display: flex;
+    }
+
+    #main-nav {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background-color: $background-color;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        transform: translateY(-100%);
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s ease;
+        z-index: 1000;
+
+        &.mobile-open {
+            transform: translateY(0);
+            opacity: 1;
+            visibility: visible;
+        }
+
+        ul {
+            flex-direction: column;
+            align-items: stretch;
+            height: auto;
+            padding: 0;
+        }
+
+        li {
+            height: auto;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+            &:hover {
+                background: none;
+            }
+
+            &.has-submenu>a::after {
+                content: '▼';
+                margin-left: auto;
+                transition: transform 0.3s ease;
+            }
+
+            &.submenu-open>a::after {
+                transform: rotate(180deg);
+            }
+        }
+
+        a {
+            padding: 1rem;
+            height: auto;
+            justify-content: space-between;
+            border: none;
+        }
+
+        .submenu {
+            position: static;
+            display: none;
+            background: rgba(0, 0, 0, 0.05);
+            border: none;
+            box-shadow: none;
+
+            ul {
+                padding-left: 1rem;
+            }
+
+            li {
+                border-bottom: none;
+
+                &:hover {
+                    background: rgba(0, 0, 0, 0.05);
+                }
+            }
+
+            a {
+                padding: 0.75rem 1rem;
+                align-items: flex-start;
+            }
+        }
+
+        .submenu-open .submenu {
+            display: block;
+        }
+    }
+
+    .hide-mobile {
+        display: none !important;
+    }
 }

themes/usips/templates/base.html

@@ -23,8 +23,50 @@
 
   {% include "macros/footer.html" %}
 
-  <!-- TODO: Add JS? -->
-  <!-- <script src="{{ get_url(path='js/main.js') }}?v={{ config.extra.build_timestamp }}"></script> -->
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const mobileToggle = document.getElementById('mobile-menu-toggle');
+      const mainNav = document.getElementById('main-nav');
+      const submenuToggles = document.querySelectorAll('.submenu-toggle');
+
+      // Toggle main mobile menu
+      mobileToggle.addEventListener('click', function () {
+        mainNav.classList.toggle('mobile-open');
+        this.classList.toggle('active');
+      });
+
+      // Toggle submenus on mobile
+      submenuToggles.forEach(function (toggle) {
+        toggle.addEventListener('click', function (e) {
+          if (window.innerWidth <= 768) {
+            e.preventDefault();
+            const parentLi = this.closest('li');
+            parentLi.classList.toggle('submenu-open');
+          }
+        });
+      });
+
+      // Close mobile menu when clicking outside
+      document.addEventListener('click', function (e) {
+        if (!mainNav.contains(e.target) && !mobileToggle.contains(e.target)) {
+          mainNav.classList.remove('mobile-open');
+          mobileToggle.classList.remove('active');
+        }
+      });
+
+      // Handle window resize
+      window.addEventListener('resize', function () {
+        if (window.innerWidth > 768) {
+          mainNav.classList.remove('mobile-open');
+          mobileToggle.classList.remove('active');
+          document.querySelectorAll('.has-submenu').forEach(function (item) {
+            item.classList.remove('submenu-open');
+          });
+        }
+      });
+    });
+  </script>
 
 </body>
 

themes/usips/templates/macros/header.html

@@ -4,12 +4,18 @@
       <img src="{{ get_url(path='image/logo.small.png') }}" alt="{{ config.title }}" class="logo-img" />
       <span class="logo-text">{{ config.title }}</span>
     </a>
+    <button id="mobile-menu-toggle" class="mobile-menu-toggle" aria-label="Toggle mobile menu">
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
     <nav id="main-nav">
       <ul>
         {% for item in config.extra.menu %}
         {% if 'desktop' in item.show_in %}
-        <li class="{% if 'mobile' not in item.show_in %}hide-mobile{% endif %}">
-          <a href="{{ item.url | safe }}"><span>{{ item.name }}</span></a>
+        <li class="{% if item.submenu %} has-submenu{% endif %}">
+          <a href="{{ item.url | safe }}" {% if item.submenu %} class="submenu-toggle" {% endif %}><span>{{ item.name
+              }}</span></a>
           {% if item.submenu %}
           <nav class="submenu">
             <ul>
@@ -19,7 +25,8 @@
               </li>
               {% endfor %}
             </ul>
-            {% endif %}
+          </nav>
+          {% endif %}
         </li>
         {% endif %}
         {% endfor %}