Merge pull request #128 from CityOfDetroit/fix.nav.122.2

Support exandable offcanvas navbar

src/components/atoms/OffcanvasBody/OffcanvasBody.js

@@ -9,6 +9,8 @@ template.innerHTML = `
 `;
 
 export default class OffcanvasBody extends HTMLElement {
+  static observedAttributes = ['data-expand'];
+
   constructor() {
     // Always call super first in constructor
     super();
@@ -22,6 +24,10 @@ export default class OffcanvasBody extends HTMLElement {
         if (node.tagName === 'COD-NAV') {
           node.setAttribute('data-extra-classes', 'navbar-nav');
         }
+        const expand = this.getAttribute('data-expand');
+        if (expand) {
+          node.setAttribute('data-expand', expand);
+        }
         this.body.append(node);
       });
     });
@@ -38,11 +44,29 @@ export default class OffcanvasBody extends HTMLElement {
     shadow.appendChild(itemStyles);
   }
 
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'data-expand': {
+        if (newValue) {
+          this.shadowRoot
+            .querySelector('cod-nav')
+            .setAttribute('data-expand', newValue);
+        }
+      }
+    }
+  }
+
   connectedCallback() {
     // OffcanvasBody attributes
     const extraClasses = this.getAttribute('data-extra-classes');
     const bodyClasses = ['offcanvas-body'];
     extraClasses ? bodyClasses.push(extraClasses) : 0;
+    const expand = this.getAttribute('data-expand');
+    if (expand) {
+      expand === 'always'
+        ? bodyClasses.push('navbar-expand')
+        : bodyClasses.push(`navbar-expand-${expand}`);
+    }
     this.body.className = bodyClasses.join(' ');
     if (!this.shadowRoot.querySelector('div')) {
       this.shadowRoot.appendChild(this.body);

src/components/atoms/OffcanvasBody/_offcanvasbody.scss

@@ -0,0 +1,12 @@
+@import '../../../../node_modules/bootstrap/scss/mixins/breakpoints';
+
+@each $breakpoint-name, $_ in $grid-breakpoints {
+  @include media-breakpoint-up($breakpoint-name) {
+    .navbar-expand-#{$breakpoint-name}.offcanvas-body {
+      display: flex;
+      flex-grow: 0;
+      padding: 0;
+      overflow-y: visible;
+    }
+  }
+}

src/components/atoms/OffcanvasHeader/OffcanvasHeader.js

@@ -55,6 +55,12 @@ export default class OffcanvasHeader extends HTMLElement {
     btnDark === 'true'
       ? this.closeBtn.setAttribute('data-extra-classes', 'btn-close-white')
       : 0;
+    const expand = this.getAttribute('data-expand');
+    if (expand) {
+      expand === 'always'
+        ? offcanvasHeaderClasses.push('navbar-expand')
+        : offcanvasHeaderClasses.push(`navbar-expand-${expand}`);
+    }
     this.offcanvasHeader.className = offcanvasHeaderClasses.join(' ');
     this.closeBtn.addEventListener('click', this._onClick);
     if (!this.shadowRoot.querySelector('div')) {

src/components/atoms/OffcanvasHeader/_offcanvasheader.scss

@@ -0,0 +1,9 @@
+@import '../../../../node_modules/bootstrap/scss/mixins/breakpoints';
+
+@each $breakpoint-name, $_ in $grid-breakpoints {
+  @include media-breakpoint-up($breakpoint-name) {
+    .navbar-expand-#{$breakpoint-name}.offcanvas-header {
+      display: none;
+    }
+  }
+}

src/components/molecules/Nav/Nav.js

@@ -53,6 +53,12 @@ export default class Nav extends HTMLElement {
     const justified = this.getAttribute('data-justified');
     const extraClasses = this.getAttribute('data-extra-classes');
     const navClasses = ['nav'];
+    const expand = this.getAttribute('data-expand');
+    if (expand) {
+      expand === 'always'
+        ? navClasses.push('navbar-expand')
+        : navClasses.push(`navbar-expand-${expand}`);
+    }
     vertical === 'true' ? navClasses.push('flex-column') : 0;
     tabs === 'true' ? navClasses.push('nav-tabs') : 0;
     pills === 'true' ? navClasses.push('nav-pills') : 0;

src/components/molecules/Nav/_nav.scss

@@ -0,0 +1,9 @@
+@import '../../../../node_modules/bootstrap/scss/mixins/breakpoints';
+
+@each $breakpoint-name, $_ in $grid-breakpoints {
+  @include media-breakpoint-up($breakpoint-name) {
+    .navbar-expand-#{$breakpoint-name}.nav {
+      flex-direction: row;
+    }
+  }
+}

src/components/organisms/Navbar/Navbar.js

@@ -50,9 +50,14 @@ export default class Navbar extends HTMLElement {
             this.navbarContainer.appendChild(this.navbarBrand);
             break;
 
-          case 'COD-OFFCANVAS':
+          case 'COD-OFFCANVAS': {
+            const expand = this.getAttribute('data-expand');
+            if (expand) {
+              node.setAttribute('data-expand', expand);
+            }
             this.navbarContainer.appendChild(node);
             break;
+          }
           default: {
             const nodeClasses = node.className.split(' ');
             nodeClasses.includes('no-wc') ? node.remove() : 0;

src/components/organisms/Offcanvas/Offcanvas.js

@@ -43,6 +43,10 @@ export default class Offcanvas extends HTMLElement {
             : 0;
           node.setAttribute('data-parent-id', this.getAttribute('data-id'));
         }
+        const expand = this.getAttribute('data-expand');
+        if (expand) {
+          node.setAttribute('data-expand', expand);
+        }
         // TODO: See CityOfDetroit/detroitmi#1099
         // eslint-disable-next-line prefer-const
         let nodeClasses = node.className.split(' ');
@@ -161,6 +165,12 @@ export default class Offcanvas extends HTMLElement {
     } else {
       offcanvasClasses.push('offcanvas-start');
     }
+    const expand = this.getAttribute('data-expand');
+    if (expand) {
+      expand === 'always'
+        ? offcanvasClasses.push('navbar-expand')
+        : offcanvasClasses.push(`navbar-expand-${expand}`);
+    }
     // TODO: See CityOfDetroit/detroitmi#1099
     // eslint-disable-next-line eqeqeq
     if (id != undefined && id != null) {

src/components/organisms/Offcanvas/_offcanvas.scss

@@ -0,0 +1,18 @@
+@import '../../../../node_modules/bootstrap/scss/mixins/breakpoints';
+
+@each $breakpoint-name, $_ in $grid-breakpoints {
+  @include media-breakpoint-up($breakpoint-name) {
+    .navbar-expand-#{$breakpoint-name}.offcanvas {
+      position: static;
+      z-index: auto;
+      flex-grow: 1;
+      width: auto !important;
+      height: auto !important;
+      visibility: visible !important;
+      background-color: transparent !important;
+      border: 0 !important;
+      transform: none !important;
+      transition: none;
+    }
+  }
+}

src/scss/themed-bootstrap.scss

@@ -109,3 +109,7 @@ $utilities: map-merge(
 @import '../components/atoms/TableRow/table-row';
 @import '../components/atoms/TableCellHeader/table-cell-header';
 @import '../components/atoms/TableCell/table-cell';
+@import '../components/molecules/Nav/nav';
+@import '../components/organisms/Offcanvas/offcanvas';
+@import '../components/atoms/OffcanvasHeader/offcanvasheader';
+@import '../components/atoms/OffcanvasBody/offcanvasbody';