Fix mobile menu issues and implement improved dropdown functionality

- Replace HTML5 details/summary with JavaScript-controlled dropdown
- Add dynamic parent container expansion when menu is open
- Improve mobile menu positioning and styling
- Add smooth transitions and icon rotation animations
- Fix mobile menu being hidden behind other elements

Author: zixuan-liu-17

_includes/footer.html

@@ -10,6 +10,42 @@
 
 <!--     <script src="{{ "/assets/vendor/jquery/dist/jquery.min.js" | relative_url}}"></script> -->
     <script>anchors.add('.org-type h4');</script>
+    
+    <!-- Mobile menu toggle functionality -->
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
+        const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
+        const headerLayout = document.querySelector('.header-layout');
+        
+        if (mobileMenuBtn && mobileMenuToggle && headerLayout) {
+          mobileMenuBtn.addEventListener('click', function() {
+            const isOpen = mobileMenuToggle.classList.contains('menu-open');
+            
+            if (isOpen) {
+              // 关闭菜单
+              mobileMenuToggle.classList.remove('menu-open');
+              headerLayout.classList.remove('menu-expanded');
+              mobileMenuBtn.setAttribute('aria-expanded', 'false');
+            } else {
+              // 打开菜单
+              mobileMenuToggle.classList.add('menu-open');
+              headerLayout.classList.add('menu-expanded');
+              mobileMenuBtn.setAttribute('aria-expanded', 'true');
+            }
+          });
+          
+          // Close menu when clicking outside
+          document.addEventListener('click', function(event) {
+            if (!mobileMenuToggle.contains(event.target)) {
+              mobileMenuToggle.classList.remove('menu-open');
+              headerLayout.classList.remove('menu-expanded');
+              mobileMenuBtn.setAttribute('aria-expanded', 'false');
+            }
+          });
+        }
+      });
+    </script>
     {% if page.url == "/community/" %}
       <script src="{{ "/assets/js/community.js" | relative_url}}"></script>
     {% elsif page.url == "/" %}

_includes/header.html

@@ -28,17 +28,17 @@
             <a href="{{ "/" | relative_url}}" style="font-size: 2.5em; font-weight: bold;">OSeMOSYS</a>
           </div>
           <!-- Mobile menu toggle -->
-          <details class="mobile-menu-toggle d-md-none">
-            <summary class="mobile-menu-btn" aria-haspopup="true">
+          <div class="mobile-menu-toggle d-md-none">
+            <button class="mobile-menu-btn" aria-haspopup="true" aria-expanded="false">
               {% octicon chevron-down height:20 class:"mobile-menu-icon" aria-label:menu %}
               <span class="mobile-menu-text">Menu</span>
-            </summary>
+            </button>
 
             <!-- Mobile navigation - shown when menu is open -->
             <ul class="mobile-navigation">
               {% include subpage_links.html %}
             </ul>
-          </details>  
+          </div>  
         </div>
 
         <!-- Navigation -->

assets/css/custom.scss

@@ -8,6 +8,7 @@ body {
 .intro-title {
   color: #1e3a8a !important; // Deep blue for titles
   font-weight: 200;
+  margin-top: 10px;
 }
 
 .intro-text {
@@ -103,6 +104,7 @@ $header-accent-color: #3490dc; // Sky blue accent color
     position: relative;
     min-height: 100px; // Cleaner, more compact
     padding: 1.5rem 0;
+    transition: padding-bottom 0.3s ease;
 
     // Add background image only to header
     // &::before {
@@ -125,6 +127,13 @@ $header-accent-color: #3490dc; // Sky blue accent color
       min-height: auto; // 
       padding: 1rem 0 1rem 0; // 
     }
+    
+    // 当移动菜单展开时，为父容器增加底部空间
+    &.menu-expanded {
+      @media (max-width: 768px) {
+        padding-bottom: 12rem; // 为展开的菜单留出空间
+      }
+    }
   }
 
   .mobile-menu-toggle[open] {
@@ -773,7 +782,7 @@ td.does-not-support { color: $red-500; }
 
 // Mobile navigation styling
 .mobile-navigation {
-  margin: 0.5rem 0 0 0;
+  margin: 0.5rem 0.5rem 0 0;
   padding: 0;
   list-style: none;
   display: flex; // 改为flex，通过max-height控制显示
@@ -785,8 +794,8 @@ td.does-not-support { color: $red-500; }
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(10px);
-  position: relative;
-  z-index: 9999;
+  position: absolute;
+  z-index: 10001;
   max-height: 0;
   overflow: hidden;
   transition: all 0.3s ease-in-out;
@@ -831,15 +840,16 @@ td.does-not-support { color: $red-500; }
 }
 
 // Show mobile navigation when menu is open
-.mobile-menu-toggle[open] .mobile-navigation {
+.mobile-menu-toggle.menu-open .mobile-navigation {
   display: flex;
-<<<<<<< HEAD
   max-height: 500px; // 设置最大高度以允许展开
   padding: 0.75rem;
   margin-top: 0.5rem;
   opacity: 1;
   transform: translateY(0);
 }
-=======
+
+// Rotate the menu icon when open
+.mobile-menu-toggle.menu-open .mobile-menu-icon {
+  transform: rotate(180deg);
 }
->>>>>>> 1b5d3b4b640b9657d2ef1f1e2f3510d4772908b4