Initial commit to github

styles/navigation/nav-functional.css

@@ -0,0 +1,100 @@
+/**
+ * VDI Navs & Menu - Functional Styles
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
+ */
+
+/* all sizes */
+.menu-vdi {
+    @apply hidden;
+
+    >li {
+        @apply list-none;
+        >a {
+            @apply focus-visible:underline hover:underline;
+        }
+
+        a[aria-current="true"] {
+            @apply underline;
+        }
+
+        .menu-vdi__toggle {
+            &[aria-expanded="true"] {
+                svg {
+                    @apply rotate-180;
+                }
+
+                +.menu-vdi__submenu {
+                    @apply flex;
+                }
+            }
+        }
+    }
+
+    .menu-vdi__submenu {
+        @apply hidden container z-10;
+
+        /* should also put current page here */
+        .menu-vdi__item--grandchild a {
+            @apply no-underline focus-visible:underline hover:underline;
+        }
+    }
+}
+
+/* Mobile */
+@media screen and (max-width: 62.5rem) {
+    #app:has(.nav-main__toggle[aria-expanded="true"]) { height: calc(100vh - var(--hgtHeader)); }
+
+    .nav-main__toggle {
+        .nav-toggle-hamburger { display: inline-block !important; }
+
+        .nav-toggle-x { display: none !important; }
+
+        &[aria-expanded="true"] {
+            .nav-toggle-hamburger { display: none !important; }
+
+            .nav-toggle-x { display: inline-block !important; }
+        }
+    }
+    .nav-main {
+        .nav-main__toggle[aria-expanded="true"] {
+            +ul {
+                @apply absolute flex;
+            }
+        }
+
+        .menu-vdi {
+            @apply absolute right-0 z-10;
+
+            .menu-vdi__toggle {
+                @apply flex items-center gap-2;
+            }
+        }
+    }
+
+    .nav-aux {
+        .menu-vdi__submenu {
+            @apply absolute list-none;
+        }
+    }
+}
+
+/* Desktop */
+@media screen and (min-width: 62.5rem) {
+    .nav-main__toggle {
+        @apply hidden;
+    }
+
+    .menu-vdi {
+        @apply flex list-none;
+
+        .menu-vdi__toggle {
+            @apply flex items-center gap-2;
+        }
+
+        .menu-vdi__submenu {
+            @apply absolute list-none;
+        }
+    }
+}