fix(ld-sidenav): toggle stack to top on breakpoint change

Resolves #286
emdgroup-liquid · Apr 29, 2022 · 18cf098 · 18cf098
1 parent 42ed614
commit 18cf098
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 17 deletions.
diff --git a/src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.tsx b/src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.tsx
@@ -114,6 +114,11 @@ export class LdSidenavNavitem implements InnerFocusable {
   handleSidenavBreakpointChange(ev: CustomEvent<boolean>) {
     if (ev.target !== this.sidenav) return
     this.sidenavClosable = ev.detail
+    if (this.sidenavClosable) {
+      toggleStackToTop(this.el, false)
+    } else {
+      toggleStackToTop(this.el, this.sidenavCollapsed)
+    }
   }
 
   private getabbreviation = () => {

diff --git a/src/liquid/components/ld-sidenav/ld-sidenav-slider/ld-sidenav-slider.tsx b/src/liquid/components/ld-sidenav/ld-sidenav-slider/ld-sidenav-slider.tsx
@@ -117,6 +117,17 @@ export class LdSidenavSlider {
     }
   }
 
+  @Listen('ldSidenavBreakpointChange', { target: 'window', passive: true })
+  handleSidenavBreakpointChange(ev: CustomEvent<boolean>) {
+    if (ev.target !== this.sidenav) return
+    const sidenavClosable = ev.detail
+    if (sidenavClosable) {
+      this.toggleVisibilityOnHidableContent(true)
+    } else {
+      this.toggleVisibilityOnHidableContent(!this.sidenav.collapsed)
+    }
+  }
+
   /** Navigates back to the parent nav. */
   @Method()
   async navigateBack() {

diff --git a/src/liquid/components/ld-sidenav/ld-sidenav-subnav/ld-sidenav-subnav.tsx b/src/liquid/components/ld-sidenav/ld-sidenav-subnav/ld-sidenav-subnav.tsx
@@ -110,6 +110,17 @@ export class LdSidenavSubnav {
     }
   }
 
+  @Listen('ldSidenavBreakpointChange', { target: 'window', passive: true })
+  handleSidenavBreakpointChange(ev: CustomEvent<boolean>) {
+    if (ev.target !== this.sidenav) return
+    const sidenavClosable = ev.detail
+    if (sidenavClosable) {
+      this.toggleVisibilityOnHidableContent(true)
+    } else {
+      this.toggleVisibilityOnHidableContent(!this.sidenav.collapsed)
+    }
+  }
+
   componentWillLoad() {
     this.sidenav = closest('ld-sidenav', this.el)
     this.hasParentSubnav = this.el.parentElement.tagName === 'LD-SIDENAV-SUBNAV'

diff --git a/src/liquid/components/ld-sidenav/readme.md b/src/liquid/components/ld-sidenav/readme.md
@@ -487,7 +487,7 @@ For deeper navigation hierarchies you may also want to structure certain navigat
 </ld-notice>
 
 {% example '{ "hasPadding": false, "styles": { "minHeight": "30rem", "position": "relative" } }' %}
-<ld-sidenav open narrow collapsible>
+<ld-sidenav open>
   <ld-sidenav-back slot="top">
     <ld-sidenav-navitem>Outline of CS</ld-sidenav-navitem>
   </ld-sidenav-back>

diff --git a/src/liquid/components/ld-sidenav/test/__snapshots__/ld-sidenav.spec.ts.snap b/src/liquid/components/ld-sidenav/test/__snapshots__/ld-sidenav.spec.ts.snap
@@ -152,7 +152,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
         <slot></slot>
       </ld-sidenav-scroller-internal>
     </mock:shadow-root>
-    <ld-sidenav-heading class="ld-sidenav-heading">
+    <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-slider__hidden">
       <mock:shadow-root>
         <ld-typo part="typo" variant="cap-m">
           <slot></slot>
@@ -887,7 +887,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>
@@ -1182,7 +1182,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>
@@ -1351,7 +1351,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>
@@ -1661,7 +1661,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
             <slot></slot>
           </ld-sidenav-scroller-internal>
         </mock:shadow-root>
-        <ld-sidenav-heading class="ld-sidenav-heading">
+        <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
           <mock:shadow-root>
             <ld-typo part="typo" variant="cap-m">
               <slot></slot>
@@ -1781,7 +1781,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>
@@ -1944,7 +1944,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>
@@ -2063,7 +2063,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>
@@ -2226,7 +2226,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>
@@ -2389,7 +2389,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>
@@ -2552,7 +2552,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>
@@ -2803,7 +2803,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>
@@ -3142,7 +3142,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>
@@ -3481,7 +3481,7 @@ exports[`ld-sidenav collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>
@@ -3923,7 +3923,7 @@ exports[`ld-sidenav sidenav accordion accordion collapses to narrow 1`] = `
         <slot></slot>
       </ld-sidenav-scroller-internal>
     </mock:shadow-root>
-    <ld-sidenav-heading class="ld-sidenav-heading">
+    <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-slider__hidden">
       <mock:shadow-root>
         <ld-typo part="typo" variant="cap-m">
           <slot></slot>
@@ -4761,7 +4761,7 @@ exports[`ld-sidenav sidenav accordion accordion collapses to narrow 1`] = `
           <slot></slot>
         </ld-sidenav-scroller-internal>
       </mock:shadow-root>
-      <ld-sidenav-heading class="ld-sidenav-heading">
+      <ld-sidenav-heading class="ld-sidenav-heading ld-sidenav-subnav__hidden">
         <mock:shadow-root>
           <ld-typo part="typo" variant="cap-m">
             <slot></slot>