refactor: modules and css vars

scss/components/_nav.scss

@@ -1,139 +1,142 @@
+@use "sass:map";
 @use "../settings" as *;
 
-/**
- * Nav
- */
+@if map.get($modules, "components/nav") {
+  /**
+   * Nav
+   */
 
-// Reboot based on :
-// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // Reboot based on :
+  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
 
-// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
-:where(nav li)::before {
-  float: left;
-  content: "\200B";
-}
-
-// Pico
-// ––––––––––––––––––––
-
-// Horizontal Nav
-nav,
-nav ul {
-  display: flex;
-}
-
-nav {
-  justify-content: space-between;
-
-  ol,
-  ul {
-    align-items: center;
-    margin-bottom: 0;
-    padding: 0;
-    list-style: none;
-
-    &:first-of-type {
-      margin-left: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
-    }
-    &:last-of-type {
-      margin-right: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
-    }
+  // Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
+  :where(nav li)::before {
+    float: left;
+    content: "\200B";
   }
 
-  li {
-    display: inline-block;
-    margin: 0;
-    padding: var(#{$✨}nav-element-spacing-vertical) var(#{$✨}nav-element-spacing-horizontal);
+  // Pico
+  // ––––––––––––––––––––
 
-    // Minimal support for buttons and forms elements
-    > * {
-      #{$✨}spacing: 0;
-    }
+  // Horizontal Nav
+  nav,
+  nav ul {
+    display: flex;
   }
 
-  :where(a, [role="link"]) {
-    display: inline-block;
-    margin: calc(var(#{$✨}nav-link-spacing-vertical) * -1)
-      calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
-    padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
-    border-radius: var(#{$✨}border-radius);
-    text-decoration: none;
+  nav {
+    justify-content: space-between;
 
-    &:is([aria-current], :hover, :active, :focus) {
-      text-decoration: none;
-    }
-  }
+    ol,
+    ul {
+      align-items: center;
+      margin-bottom: 0;
+      padding: 0;
+      list-style: none;
 
-  // Breadcrumb
-  &[aria-label="breadcrumb"] {
-    align-items: center;
-    justify-content: start;
-
-    & ul li {
-      &:not(:first-child) {
-        margin-inline-start: var(#{$✨}nav-link-spacing-horizontal);
+      &:first-of-type {
+        margin-left: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
       }
+      &:last-of-type {
+        margin-right: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
+      }
+    }
 
-      &:not(:last-child) {
-        ::after {
-          position: absolute;
-          width: calc(var(#{$✨}nav-link-spacing-horizontal) * 2);
-          margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) / 2);
-          content: "/";
-          color: var(#{$✨}muted-color);
-          text-align: center;
+    li {
+      display: inline-block;
+      margin: 0;
+      padding: var(#{$✨}nav-element-spacing-vertical) var(#{$✨}nav-element-spacing-horizontal);
+
+      // Minimal support for buttons and forms elements
+      > * {
+        #{$✨}spacing: 0;
+      }
+    }
+
+    :where(a, [role="link"]) {
+      display: inline-block;
+      margin: calc(var(#{$✨}nav-link-spacing-vertical) * -1)
+        calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
+      padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
+      border-radius: var(#{$✨}border-radius);
+      text-decoration: none;
+
+      &:is([aria-current], :hover, :active, :focus) {
+        text-decoration: none;
+      }
+    }
+
+    // Breadcrumb
+    &[aria-label="breadcrumb"] {
+      align-items: center;
+      justify-content: start;
+
+      & ul li {
+        &:not(:first-child) {
+          margin-inline-start: var(#{$✨}nav-link-spacing-horizontal);
+        }
+
+        &:not(:last-child) {
+          ::after {
+            position: absolute;
+            width: calc(var(#{$✨}nav-link-spacing-horizontal) * 2);
+            margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) / 2);
+            content: "/";
+            color: var(#{$✨}muted-color);
+            text-align: center;
+          }
         }
       }
+
+      & a[aria-current] {
+        background-color: transparent;
+        color: inherit;
+        text-decoration: none;
+        pointer-events: none;
+      }
     }
 
-    & a[aria-current] {
-      background-color: transparent;
-      color: inherit;
-      text-decoration: none;
-      pointer-events: none;
+    // Minimal support for role="button"
+    [role="button"] {
+      margin-right: inherit;
+      margin-left: inherit;
+      padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
     }
   }
 
-  // Minimal support for role="button"
-  [role="button"] {
-    margin-right: inherit;
-    margin-left: inherit;
-    padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
-  }
-}
-
-// Vertical Nav
-aside {
-  nav,
-  ol,
-  ul,
-  li {
-    display: block;
-  }
-
-  li {
-    padding: calc(var(#{$✨}nav-element-spacing-vertical) * 0.5)
-      var(#{$✨}nav-element-spacing-horizontal);
-
-    a {
+  // Vertical Nav
+  aside {
+    nav,
+    ol,
+    ul,
+    li {
       display: block;
     }
 
-    // Minimal support for links as buttons
-    [role="button"] {
-      margin: inherit;
+    li {
+      padding: calc(var(#{$✨}nav-element-spacing-vertical) * 0.5)
+        var(#{$✨}nav-element-spacing-horizontal);
+
+      a {
+        display: block;
+      }
+
+      // Minimal support for links as buttons
+      [role="button"] {
+        margin: inherit;
+      }
     }
   }
-}
 
-// Breadcrumb RTL
-[dir="rtl"] {
-  nav {
-    &[aria-label="breadcrumb"] {
-      & ul li {
-        &:not(:last-child) {
-          ::after {
-            content: "\\";
+  // Breadcrumb RTL
+  [dir="rtl"] {
+    nav {
+      &[aria-label="breadcrumb"] {
+        & ul li {
+          &:not(:last-child) {
+            ::after {
+              content: "\\";
+            }
           }
         }
       }