fix(ld-sidenav): update stacking to top on component did load

src/liquid/components/ld-sidenav/ld-sidenav-accordion/ld-sidenav-accordion.shadow.css

@@ -18,8 +18,8 @@
 
   transform: translateY(
     var(
-      --ld-slider-navitem-move-up-closable,
-      var(--ld-slider-navitem-move-up, 0px)
+      --ld-sidenav-navitem-move-up-closable,
+      var(--ld-sidenav-navitem-move-up, 0px)
     )
   );
   transition: var(--ld-sidenav-stack-to-top-transition);

src/liquid/components/ld-sidenav/ld-sidenav-accordion/ld-sidenav-accordion.tsx

@@ -60,11 +60,7 @@ export class LdSidenavAccordion {
   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.sidenav.narrow && this.sidenavCollapsed)
-    }
+    this.updateStackToTop()
   }
 
   @Listen('ldSidenavSliderChange', { target: 'window', passive: true })
@@ -96,7 +92,7 @@ export class LdSidenavAccordion {
     // Collapse or expand accordion on sidenav collapse or expansion.
     if (ev.target !== this.sidenav) return
     this.sidenavCollapsed = ev.detail.collapsed
-    toggleStackToTop(this.el, this.sidenav.narrow && this.sidenavCollapsed)
+    this.updateStackToTop()
     if (this.sidenavCollapsed) {
       if (this.preserveState) {
         this.expandOnSidenavExpansion = this.sectionRef.expanded
@@ -123,6 +119,14 @@ export class LdSidenavAccordion {
     }
   }
 
+  private updateStackToTop = () => {
+    if (this.sidenavClosable) {
+      toggleStackToTop(this.el, false)
+    } else {
+      toggleStackToTop(this.el, this.sidenav.narrow && this.sidenavCollapsed)
+    }
+  }
+
   componentWillLoad() {
     this.inAccordion = this.el.parentElement.tagName === 'LD-SIDENAV-ACCORDION'
     this.rounded = !!this.el.querySelector(
@@ -132,6 +136,17 @@ export class LdSidenavAccordion {
       'ld-sidenav-navitem[slot="toggle"][mode="secondary"],ld-sidenav-navitem[slot="toggle"][mode="tertiary"]'
     )
     this.sidenav = closest('ld-sidenav', this.el)
+    if (this.sidenav) {
+      this.sidenavCollapsed = this.sidenav.collapsed
+    }
+  }
+
+  componentDidLoad() {
+    // The ldSidenavCollapsedChange event can be fired before this component is loaded.
+    // So we need to update the stacking here.
+    setTimeout(() => {
+      this.updateStackToTop()
+    })
   }
 
   render() {

src/liquid/components/ld-sidenav/ld-sidenav-header/ld-sidenav-header.tsx

@@ -85,14 +85,17 @@ export class LdSidenavHeader {
    */
   @Method()
   async updateCollapsible() {
-    this.sidenavCollapsible = this.sidenav.collapsible
+    if (this.sidenav) {
+      this.sidenavCollapsible = this.sidenav.collapsible
+    }
   }
 
   componentWillLoad() {
     this.sidenav = this.el.closest('ld-sidenav')
     if (this.sidenav) {
       this.sidenavAlignement = this.sidenav.align
       this.sidenavCollapsible = this.sidenav.collapsible
+      this.sidenavCollapsed = this.sidenav.collapsed
     }
   }
 

src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.shadow.css

@@ -55,8 +55,8 @@
     transition: var(--ld-sidenav-stack-to-top-transition);
     transform: translateY(
       var(
-        --ld-slider-navitem-move-up-closable,
-        var(--ld-slider-navitem-move-up, 0px)
+        --ld-sidenav-navitem-move-up-closable,
+        var(--ld-sidenav-navitem-move-up, 0px)
       )
     );
   }

src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.tsx

@@ -108,14 +108,18 @@ export class LdSidenavNavitem implements InnerFocusable {
   ) {
     if (ev.target !== this.sidenav) return
     this.sidenavCollapsed = ev.detail.collapsed
-    toggleStackToTop(this.el, this.sidenav.narrow && this.sidenavCollapsed)
-    this.tooltipRef.hideTooltip()
+    this.updateStackToTop()
+    this.tooltipRef?.hideTooltip()
   }
 
   @Listen('ldSidenavBreakpointChange', { target: 'window', passive: true })
   handleSidenavBreakpointChange(ev: CustomEvent<boolean>) {
     if (ev.target !== this.sidenav) return
     this.sidenavClosable = ev.detail
+    this.updateStackToTop()
+  }
+
+  private updateStackToTop = () => {
     if (this.sidenavClosable) {
       toggleStackToTop(this.el, false)
     } else {
@@ -204,6 +208,7 @@ export class LdSidenavNavitem implements InnerFocusable {
       this.sidenavAlignement = this.sidenav.align
       this.sidenavExpandsOnMouseEnter =
         this.sidenav.expandTrigger === 'mouseenter'
+      this.sidenavCollapsed = this.sidenav.collapsed
     }
     if (!['secondary', 'tertiary'].includes(this.mode)) {
       this.tooltipContent = this.el.textContent.trim()
@@ -229,6 +234,12 @@ export class LdSidenavNavitem implements InnerFocusable {
     setTimeout(() => {
       this.slotContainerRef.style.alignItems = 'center'
     }, 200)
+
+    // The ldSidenavCollapsedChange event can be fired before this component is loaded.
+    // So we need to update the stacking here.
+    setTimeout(() => {
+      this.updateStackToTop()
+    })
   }
 
   render() {

src/liquid/components/ld-sidenav/ld-sidenav-separator/ld-sidenav-separator.shadow.css

@@ -22,8 +22,8 @@
     hr {
       transform: translateY(
         var(
-          --ld-slider-navitem-move-up-closable,
-          var(--ld-slider-navitem-move-up, 0px)
+          --ld-sidenav-navitem-move-up-closable,
+          var(--ld-sidenav-navitem-move-up, 0px)
         )
       );
       transition: var(--ld-sidenav-stack-to-top-transition);

src/liquid/components/ld-sidenav/ld-sidenav-separator/ld-sidenav-separator.tsx

@@ -46,11 +46,7 @@ export class LdSidenavSeparator {
   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.sidenav.narrow && this.sidenavCollapsed)
-    }
+    this.updateStackToTop()
   }
 
   private computeScaleXCollapsed = () => {
@@ -72,13 +68,30 @@ export class LdSidenavSeparator {
     return sidenavNavitemIconSize / (sidenavWidth - 2 * sidenavPaddingX)
   }
 
+  private updateStackToTop = () => {
+    if (this.sidenavClosable) {
+      toggleStackToTop(this.el, false)
+    } else {
+      toggleStackToTop(this.el, this.sidenav.narrow && this.sidenavCollapsed)
+    }
+  }
+
   componentWillLoad() {
     this.sidenav = closest('ld-sidenav', this.el)
     if (this.sidenav) {
       this.scaleXCollapsed = this.computeScaleXCollapsed() || 1
+      this.sidenavCollapsed = this.sidenav.collapsed
     }
   }
 
+  componentDidLoad() {
+    // The ldSidenavCollapsedChange event can be fired before this component is loaded.
+    // So we need to update the stacking here.
+    setTimeout(() => {
+      this.updateStackToTop()
+    })
+  }
+
   render() {
     const cl = getClassNames([
       'ld-sidenav-separator',

src/liquid/components/ld-sidenav/ld-sidenav-toggle-outside/ld-sidenav-toggle-outside.tsx

@@ -34,7 +34,7 @@ export class LdSidenavToggleOutside implements InnerFocusable {
   @State() sidenavClosable: boolean
   @State() sidenavCollapsed: boolean
   @State() sidenavCollapsedFully: boolean
-  @State() sidenavAlignement: 'left' | 'right' = 'left'
+  @State() sidenavAlignement: 'left' | 'right'
 
   /** Sets focus on the radio button. */
   @Method()
@@ -73,7 +73,7 @@ export class LdSidenavToggleOutside implements InnerFocusable {
         `The ld-sidenav-toggle-outside component is expecting to have an ld-sidenav component as its next element sibling, but instead there was: ${this.sidenav}`
       )
     }
-    this.sidenavAlignement = this.sidenav.align
+    this.sidenavAlignement = this.sidenav.align || 'left'
   }
 
   render() {

src/liquid/components/ld-sidenav/ld-sidenav.shadow.css

@@ -156,7 +156,7 @@
   &(.ld-sidenav--closable) {
     --ld-sidenav-collapse-content-transition: none;
     --ld-sidenav-stack-to-top-transition: none;
-    --ld-slider-navitem-move-up-closable: 0;
+    --ld-sidenav-navitem-move-up-closable: 0;
     --ld-sidenav-translate-x-delta: 0;
     width: 100%;
     transform: translateX(