✨feature: Add sliding viewport mobile menu support

styles/navigation/index.css

@@ -7,13 +7,30 @@
 *        - index.php
 *    - nav-functional.php
 *
+* Desktop Navigation Styles:
 * Choose one or the other for the main navigation, based on theme needs.
+* @import 'nav-main-default'; (standard dropdown)
+* @import 'nav-main-mega';    (mega menu style)
 *
-* @import 'nav-main-default';
-* @import 'nav-main-mega';
+* Mobile Navigation Styles:
+* Choose one for mobile navigation behavior:
+* @import 'nav-mobile-accordion'; (traditional dropdown/accordion style)
+* @import 'nav-mobile-sliding';   (sliding viewport style)
 */
 
 @import "./nav-functional.css";
 @import "./nav-aux.css";
+
+/* Mobile Navigation Style - Choose one of the following: */
+/* Traditional dropdown style */
 @import "./nav-main-default.css";
+/* Mega menu style */
+/* @import "./nav-main-mega.css"; */
+
+/* Mobile Navigation Style - Choose one of the following: */
+/* Accordion/dropdown style */
+/* @import "./nav-mobile-accordion.css"; */
+/* Sliding viewport style */
+@import "./nav-mobile-sliding.css";
+
 @import "./nav-footer.css";

styles/navigation/nav-main-default.css

@@ -1,5 +1,10 @@
 /**
- * VDI Navs & Menu - Main Navigation + Default Dropdown Menu Styles
+ * VDI Navs & Menu - Main Navigation + Default Dropdown Menu Styles (Desktop Only)
+ *
+ * This file contains only desktop navigation styles.
+ * For mobile navigation, choose one of:
+ * - nav-mobile-accordion.css (traditional dropdown/accordion style)
+ * - nav-mobile-sliding.css (sliding viewport style)
  *
  * Please review documentation upon first use, and, as-needed:
  * TODO: Add documenation link here
@@ -22,46 +27,6 @@
   }
 }
 
-/* mobile */
-@media screen and (max-width: 62.5rem) {
-  .nav-main {
-    .nav-main__toggle {
-      /* display */
-      @apply text-white p-3;
-    }
-
-    .menu-vdi {
-      @apply flex-col bg-white w-[95%] right-0 z-10 py-6;
-      top: var(--hgtHeader);
-      min-height: calc(100vh - var(--hgtHeader));
-
-      .menu-vdi__submenu {
-        @apply py-2 px-7 flex-col;
-      }
-
-      .menu-vdi__item {
-        a,
-        button {
-          /* text */
-          @apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
-          /* spacing & display */
-          @apply block w-full p-4;
-          /* interaction */
-          @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
-        }
-
-        a {
-          @apply block w-full;
-        }
-
-        button {
-          @apply flex w-full justify-between;
-        }
-      }
-    }
-  }
-}
-
 @media screen and (min-width: 62.5rem) {
   .menu-vdi {
     .menu-vdi__toggle {

styles/navigation/nav-mobile-accordion.css

@@ -0,0 +1,52 @@
+/**
+ * VDI Navs & Menu - Mobile Accordion Navigation
+ *
+ * Traditional mobile accordion/dropdown style navigation
+ * Include this file for accordion-style mobile navigation
+ */
+
+/* Mobile accordion navigation */
+@media screen and (max-width: 62.5rem) {
+  .nav-main {
+    .nav-main__toggle {
+      /* display */
+      @apply text-white p-3;
+    }
+
+    .menu-vdi {
+      @apply flex-col bg-white w-[95%] right-0 z-10 py-6;
+      @apply absolute hidden; /* Hidden by default */
+      top: var(--hgtHeader);
+      min-height: calc(100vh - var(--hgtHeader));
+
+      .menu-vdi__submenu {
+        @apply py-2 px-7 flex-col;
+      }
+
+      .menu-vdi__item {
+        a,
+        button {
+          /* text */
+          @apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
+          /* spacing & display */
+          @apply block w-full p-4;
+          /* interaction */
+          @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+        }
+
+        a {
+          @apply block w-full;
+        }
+
+        button {
+          @apply flex w-full justify-between;
+        }
+      }
+    }
+
+    /* Show menu when toggle button is expanded */
+    .nav-main__toggle[aria-expanded="true"] ~ .menu-vdi:not(.menu-vdi--sliding) {
+      @apply !flex; /* Use !important to override hidden */
+    }
+  }
+}

styles/navigation/nav-mobile-sliding.css

@@ -0,0 +1,130 @@
+/**
+ * VDI Navs & Menu - Mobile Sliding Viewport Navigation
+ *
+ * Sliding viewport style for mobile navigation where
+ * users can navigate through menu levels by sliding between views
+ * Include this file for sliding-style mobile navigation
+ */
+
+/* Mobile sliding viewport navigation */
+@media screen and (max-width: 62.5rem) {
+  .nav-main {
+    .nav-main__toggle {
+      /* display */
+      @apply text-white p-3;
+    }
+
+    .menu-vdi--sliding {
+      @apply relative overflow-hidden bg-white w-[95%] right-0 z-10 py-6;
+      @apply absolute hidden; /* Hidden by default */
+      top: var(--hgtHeader);
+      min-height: calc(100vh - var(--hgtHeader));
+      
+      /* Container for all navigation levels */
+      .menu-vdi__viewport {
+        @apply flex transition-transform duration-300 ease-in-out;
+        width: 100%;
+      }
+
+      /* Each navigation level */
+      .menu-vdi__level {
+        @apply w-full flex-shrink-0 flex-col;
+        min-width: 100%;
+      }
+
+      /* Back button for secondary levels */
+      .menu-vdi__back {
+        @apply flex items-center gap-2 p-4 border-b border-gray-200 font-bold text-black hover:bg-secondary-200 focus-visible:bg-secondary-200 cursor-pointer;
+        
+        svg {
+          @apply w-5 h-5;
+        }
+      }
+
+      /* Level indicator for context */
+      .menu-vdi__level-title {
+        @apply p-4 border-b border-gray-200 font-bold text-lg text-center bg-gray-50;
+      }
+
+      /* Navigation items in sliding mode */
+      .menu-vdi__item {
+        a,
+        button {
+          /* text */
+          @apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
+          /* spacing & display */
+          @apply block w-full p-4;
+          /* interaction */
+          @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+        }
+
+        a {
+          @apply block w-full;
+        }
+
+        button {
+          @apply flex w-full justify-between items-center;
+          
+          /* Arrow indicator for items with children */
+          svg {
+            @apply w-5 h-5;
+          }
+        }
+      }
+
+      /* Hide submenu toggles in sliding mode as they become navigation buttons */
+      .menu-vdi__toggle {
+        /* Override the accordion toggle behavior */
+        &[aria-expanded="true"] {
+          svg {
+            @apply rotate-0; /* Don't rotate arrow */
+          }
+
+          +.menu-vdi__submenu {
+            @apply hidden; /* Don't show dropdown */
+          }
+        }
+      }
+
+      /* Hide traditional submenus in sliding mode */
+      .menu-vdi__submenu {
+        @apply hidden;
+      }
+
+      /* Ensure menu items in sliding viewport have proper styling */
+      .menu-vdi__level-items {
+        @apply flex-col;
+        
+        .menu-vdi__item {
+          @apply w-full;
+          
+          a {
+            @apply p-4 block w-full no-underline;
+          }
+          
+          span {
+            @apply p-4 block w-full font-bold;
+          }
+        }
+        
+        /* Style nested items that were converted from submenus */
+        .menu-vdi__nested-items {
+          @apply block;
+          
+          .menu-vdi__item {
+            @apply w-full;
+            
+            a {
+              @apply p-4 pl-8 block w-full no-underline; /* Add indent for nested items */
+            }
+          }
+        }
+      }
+    }
+
+    /* Show sliding menu when toggle button is expanded and menu has sliding class */
+    .nav-main__toggle[aria-expanded="true"] + .menu-vdi--sliding {
+      @apply !block; /* Use !important to override hidden */
+    }
+  }
+}