Merge pull request #125 from CityOfDetroit/fix.nav.122.1

Use BS nav classes to set offcanvas nav direction
CityOfDetroit · Dec 5, 2023 · 17ba4a1 · 17ba4a1
2 parents 7e037d6 + 3f6fe6a
commit 17ba4a1
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/components/atoms/OffcanvasBody/OffcanvasBody.js b/src/components/atoms/OffcanvasBody/OffcanvasBody.js
@@ -19,6 +19,9 @@ export default class OffcanvasBody extends HTMLElement {
     this.shadowRoot.addEventListener('slotchange', () => {
       const tempElements = Array.from(this.children);
       tempElements.forEach((node) => {
+        if (node.tagName === 'COD-NAV') {
+          node.setAttribute('data-extra-classes', 'navbar-nav');
+        }
         this.body.append(node);
       });
     });

diff --git a/src/components/molecules/Nav/Nav.css b/src/components/molecules/Nav/Nav.css
@@ -1,3 +1,8 @@
 .nav-item {
   font-family: var(--font-family);
 }
+
+.navbar-nav .nav-link {
+  --bs-nav-link-padding-x: 0.75em;
+  --bs-btn-padding-x: var(--bs-nav-link-padding-x);
+}
diff --git a/src/stories/navbar.stories.js b/src/stories/navbar.stories.js
@@ -449,7 +449,7 @@ export const Offcanvas = () => html`
         <h5>Offcanvas</h5>
       </cod-offcanvas-header>
       <cod-offcanvas-body>
-        <cod-nav data-vertical="true">
+        <cod-nav>
           <a class="nav-link active" aria-current="page" href="#">Home</a>
           <a class="nav-link" href="#">Link</a>
           <cod-dropdown data-split="false">
@@ -511,7 +511,7 @@ export const OffcanvasColor = () => html`
         <h5>Offcanvas</h5>
       </cod-offcanvas-header>
       <cod-offcanvas-body data-extra-classes="bg-dark">
-        <cod-nav data-vertical="true" data-extra-classes="text-light">
+        <cod-nav data-extra-classes="text-light">
           <a class="nav-link active text-light" aria-current="page" href="#"
             >Home</a
           >