✨feature: Add sliding viewport mobile menu support

static/js/modules/Navigation.js

@@ -36,6 +36,24 @@ class Navigation {
    */
   #subMenuElementIdentifier;
 
+  /**
+   * Current navigation level in sliding viewport
+   * @type {number}
+   */
+  #currentLevel = 0;
+
+  /**
+   * Navigation stack for breadcrumb functionality
+   * @type {Array}
+   */
+  #navigationStack = [];
+
+  /**
+   * Whether sliding viewport mode is enabled
+   * @type {boolean}
+   */
+  #slidingViewportEnabled = false;
+
 
 
   constructor(mobileMenuButtonId, dropDownClass, subMenuLinkClass = "sub-menu-item") {
@@ -44,6 +62,9 @@ class Navigation {
     this.#subMenuElementIdentifier = subMenuLinkClass;
 
     this.handleEscapeKey();
+    
+    // Initialize sliding viewport immediately if styles are detected
+    this.initializeSlidingViewport();
   }
 
   /**
@@ -93,7 +114,16 @@ class Navigation {
    * @param {HTMLButtonElement} button
    */
   toggleMobileMenu(event, button) {
-    this.toggleAriaExpanded(event, button)
+    this.toggleAriaExpanded(event, button);
+    
+    const isExpanded = button.getAttribute("aria-expanded") === "true";
+    
+    if (!isExpanded) {
+      // Reset sliding navigation when menu is closed
+      if (this.#slidingViewportEnabled) {
+        this.resetSlidingNavigation();
+      }
+    }
   }
 
   /**
@@ -138,7 +168,9 @@ class Navigation {
         // Note: cannot group negation -1*-1*-1 != -(1*1*1)
         const isNull = event.relatedTarget == null;
         const isNotMenuItem = !isNull && !event.relatedTarget.classList.contains("menu-vdi__toggle")
-          && !event.relatedTarget.classList.contains("sub-menu-item") && !event.relatedTarget.classList.contains("menu-vdi__link");
+          && !event.relatedTarget.classList.contains("sub-menu-item") 
+          && !event.relatedTarget.classList.contains("menu-vdi__link")
+          && !event.relatedTarget.classList.contains("menu-vdi__back"); // Don't close on back button click
 
         if (isNull || isNotMenuItem)
           button.setAttribute("aria-expanded", false);
@@ -158,6 +190,11 @@ class Navigation {
       if (event.key === "Escape") {
         this.#mobileMenuButton.setAttribute("aria-expanded", false);
         this.closeAllDropDowns();
+        
+        // Reset sliding navigation on escape
+        if (this.#slidingViewportEnabled) {
+          this.resetSlidingNavigation();
+        }
       }
     }, { passive: true });
   }
@@ -220,6 +257,320 @@ class Navigation {
       }
     });
   }
+
+  /**
+   * Initialize sliding viewport navigation
+   * Detects if sliding viewport should be enabled and sets up the structure
+   */
+  initializeSlidingViewport() {
+    // Check if we should enable sliding viewport (could be based on screen size, user preference, etc.)
+    this.#slidingViewportEnabled = this.shouldEnableSlidingViewport();
+    
+    if (this.#slidingViewportEnabled) {
+      console.log('Sliding viewport enabled, setting up structure');
+      this.setupSlidingViewportStructure();
+    } else {
+      console.log('Sliding viewport not enabled');
+    }
+  }
+
+  /**
+   * Determine if sliding viewport should be enabled
+   * @returns {boolean}
+   */
+  shouldEnableSlidingViewport() {
+    // Check if sliding viewport styles are loaded by testing if the CSS rule exists
+    // This allows CSS-based switching between navigation styles
+    const isMobile = window.innerWidth <= 1000; // 62.5rem converted to px
+    
+    if (!isMobile) return false;
+    
+    // Check if sliding viewport CSS is loaded by testing a specific rule
+    // We need to test the element within the proper context (.nav-main)
+    try {
+      const navMain = document.querySelector('.nav-main');
+      if (!navMain) return false;
+      
+      const testElement = document.createElement('div');
+      testElement.className = 'menu-vdi--sliding';
+      testElement.style.position = 'absolute';
+      testElement.style.visibility = 'hidden';
+      testElement.style.height = '1px';
+      testElement.style.width = '1px';
+      
+      navMain.appendChild(testElement);
+      
+      // Get computed styles to check if sliding viewport CSS is active
+      const computedStyle = window.getComputedStyle(testElement);
+      const hasOverflowHidden = computedStyle.overflow === 'hidden';
+      
+      navMain.removeChild(testElement);
+      
+      return hasOverflowHidden;
+    } catch (error) {
+      console.warn('Error detecting sliding viewport styles:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Setup the HTML structure for sliding viewport navigation
+   */
+  setupSlidingViewportStructure() {
+    const menuContainer = document.getElementById('menu-container');
+    if (!menuContainer) {
+      console.warn('Menu container not found');
+      return;
+    }
+
+    // Don't set up if already configured
+    if (menuContainer.classList.contains('menu-vdi--sliding')) {
+      console.log('Sliding viewport already configured');
+      return;
+    }
+
+    console.log('Setting up sliding viewport structure');
+
+    // Add sliding class to enable sliding styles
+    menuContainer.classList.add('menu-vdi--sliding');
+
+    // Create viewport container
+    const viewport = document.createElement('div');
+    viewport.className = 'menu-vdi__viewport';
+    viewport.setAttribute('data-current-level', '0');
+
+    // Create main level
+    const mainLevel = document.createElement('div');
+    mainLevel.className = 'menu-vdi__level menu-vdi__level--main';
+    mainLevel.setAttribute('data-level', '0');
+
+    // Move existing menu items to main level
+    const existingItems = Array.from(menuContainer.children);
+    console.log('Moving', existingItems.length, 'existing items to main level');
+    
+    existingItems.forEach(item => {
+      mainLevel.appendChild(item);
+    });
+
+    // Setup click handlers for parent items in sliding mode
+    this.setupSlidingClickHandlers(mainLevel);
+
+    viewport.appendChild(mainLevel);
+    menuContainer.appendChild(viewport);
+    
+    console.log('Sliding viewport structure complete');
+  }
+
+  /**
+   * Setup click handlers for parent menu items in sliding mode
+   * @param {HTMLElement} level
+   */
+  setupSlidingClickHandlers(level) {
+    const parentButtons = level.querySelectorAll('.menu-vdi__toggle');
+    
+    parentButtons.forEach(button => {
+      button.addEventListener('click', (event) => {
+        if (this.#slidingViewportEnabled) {
+          event.preventDefault();
+          event.stopPropagation();
+          
+          const parentItem = button.closest('.menu-vdi__item--parent');
+          const submenu = parentItem.querySelector('.menu-vdi__submenu');
+          
+          if (submenu) {
+            this.navigateToLevel(button.textContent.trim(), submenu);
+          }
+        }
+      }, true); // Use capture phase to intercept before other handlers
+    });
+  }
+
+  /**
+   * Navigate to a specific navigation level
+   * @param {string} levelTitle
+   * @param {HTMLElement} submenuElement
+   */
+  navigateToLevel(levelTitle, submenuElement) {
+    const viewport = document.querySelector('.menu-vdi__viewport');
+    if (!viewport) return;
+
+    this.#currentLevel++;
+    this.#navigationStack.push({ title: levelTitle, level: this.#currentLevel });
+
+    // Create new level
+    const newLevel = document.createElement('div');
+    newLevel.className = 'menu-vdi__level';
+    newLevel.setAttribute('data-level', this.#currentLevel);
+
+    // Add back button
+    const backButton = this.createBackButton();
+    newLevel.appendChild(backButton);
+
+    // Add level title
+    const levelTitleEl = document.createElement('div');
+    levelTitleEl.className = 'menu-vdi__level-title';
+    levelTitleEl.textContent = levelTitle;
+    newLevel.appendChild(levelTitleEl);
+
+    // Clone and add submenu items
+    const submenuItems = submenuElement.cloneNode(true);
+    submenuItems.className = 'menu-vdi__level-items';
+    
+    // Convert submenu items to level items and ensure proper visibility
+    const items = submenuItems.querySelectorAll('.menu-vdi__item');
+    items.forEach(item => {
+      // Remove any nested classes that don't apply to sliding mode
+      item.classList.remove('menu-vdi__item--child', 'menu-vdi__item--grandchild');
+      
+      // Handle nested items if they exist
+      const nestedToggle = item.querySelector('.menu-vdi__toggle');
+      if (nestedToggle) {
+        nestedToggle.addEventListener('click', (event) => {
+          event.preventDefault();
+          // Could implement deeper nesting here if needed
+        });
+      }
+    });
+
+    // Remove any hidden submenu classes from nested elements to ensure visibility
+    const nestedSubmenus = submenuItems.querySelectorAll('.menu-vdi__submenu');
+    nestedSubmenus.forEach(nestedSubmenu => {
+      nestedSubmenu.classList.remove('menu-vdi__submenu');
+      nestedSubmenu.classList.add('menu-vdi__nested-items');
+    });
+
+    // Ensure all list items are visible in sliding mode
+    const allListItems = submenuItems.querySelectorAll('li');
+    allListItems.forEach(li => {
+      if (!li.classList.contains('menu-vdi__item')) {
+        li.classList.add('menu-vdi__item');
+      }
+    });
+
+    newLevel.appendChild(submenuItems);
+    viewport.appendChild(newLevel);
+
+    // Animate to new level
+    this.animateToLevel(this.#currentLevel);
+  }
+
+  /**
+   * Create a back button for navigation levels
+   * @returns {HTMLElement}
+   */
+  createBackButton() {
+    const backButton = document.createElement('button');
+    backButton.className = 'menu-vdi__back';
+    backButton.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+      </svg>
+      Back
+    `;
+
+    backButton.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.navigateBack();
+    });
+
+    return backButton;
+  }
+
+  /**
+   * Navigate back to previous level
+   */
+  navigateBack() {
+    if (this.#currentLevel > 0) {
+      this.#currentLevel--;
+      this.#navigationStack.pop();
+
+      // Remove the current level element
+      const viewport = document.querySelector('.menu-vdi__viewport');
+      const currentLevelEl = viewport.querySelector(`[data-level="${this.#currentLevel + 1}"]`);
+      if (currentLevelEl) {
+        currentLevelEl.remove();
+      }
+
+      // Animate back to previous level
+      this.animateToLevel(this.#currentLevel);
+      
+      // Ensure menu stays open after back navigation
+      setTimeout(() => {
+        if (this.#mobileMenuButton.getAttribute("aria-expanded") === "false") {
+          this.#mobileMenuButton.setAttribute("aria-expanded", "true");
+        }
+      }, 50);
+    }
+  }
+
+  /**
+   * Animate viewport to specific level
+   * @param {number} level
+   */
+  animateToLevel(level) {
+    const viewport = document.querySelector('.menu-vdi__viewport');
+    if (!viewport) return;
+
+    const translateX = -level * 100;
+    viewport.style.transform = `translateX(${translateX}%)`;
+    viewport.setAttribute('data-current-level', level);
+  }
+
+  /**
+   * Reset sliding navigation to main level
+   */
+  resetSlidingNavigation() {
+    const menuContainer = document.getElementById('menu-container');
+    if (!menuContainer) return;
+    
+    if (this.#slidingViewportEnabled) {
+      this.#currentLevel = 0;
+      this.#navigationStack = [];
+      
+      const viewport = document.querySelector('.menu-vdi__viewport');
+      if (viewport) {
+        // Remove all levels except main
+        const levels = viewport.querySelectorAll('.menu-vdi__level:not(.menu-vdi__level--main)');
+        levels.forEach(level => level.remove());
+        
+        // Reset position
+        this.animateToLevel(0);
+      }
+    } else {
+      // Clean up sliding structure and restore normal menu
+      this.cleanupSlidingStructure();
+    }
+  }
+
+  /**
+   * Clean up sliding viewport structure and restore normal menu
+   */
+  cleanupSlidingStructure() {
+    const menuContainer = document.getElementById('menu-container');
+    if (!menuContainer) return;
+
+    // Remove sliding class
+    menuContainer.classList.remove('menu-vdi--sliding');
+
+    // Find viewport and move items back to container
+    const viewport = menuContainer.querySelector('.menu-vdi__viewport');
+    if (viewport) {
+      const mainLevel = viewport.querySelector('.menu-vdi__level--main');
+      if (mainLevel) {
+        // Move all items back to menu container
+        const items = Array.from(mainLevel.children);
+        items.forEach(item => {
+          menuContainer.appendChild(item);
+        });
+      }
+      
+      // Remove viewport structure
+      viewport.remove();
+    }
+
+    console.log('Sliding structure cleaned up');
+  }
 }
 
 export default Navigation;