fix(ld-sidenav): unhide elements on slide change

Resolves #286

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

@@ -139,9 +139,12 @@ export class LdSidenav {
     // which may happen on screen resize or orientation change events.
     if (!this.closable) {
       this.el.classList.add('ld-sidenav--transitions')
-
-      this.ldSidenavCollapsedChange.emit(collapsed)
     }
+    // The ldSidenavCollapsedChange event needs to be emitted even if the
+    // sidenav is currently not collapsible (when it is closable), because
+    // on breakpoint change its subcomponents need to be rendered according
+    // to the new state and thus need to update their state using the event.
+    this.ldSidenavCollapsedChange.emit(collapsed)
   }
 
   @Watch('open')

src/liquid/components/ld-sidenav/test/ld-sidenav.spec.ts

@@ -1735,4 +1735,53 @@ describe('ld-sidenav', () => {
       expect(page.root).toMatchSnapshot()
     })
   })
+
+  it('updates hidden state for compoenents in slider and subnavs on slide change when closable', async () => {
+    const page = await newSpecPage({
+      components: sidenavComponents,
+      html: getSidenavWithSubnavigation({
+        collapsible: true,
+        collapsed: true,
+        narrow: true,
+      }),
+    })
+    const ldSidenav = page.root
+    mockFocus(page)
+    jest.advanceTimersByTime(0)
+    await page.waitForChanges()
+
+    expect(ldSidenav).toHaveClass('ld-sidenav--collapsed')
+    expect(ldSidenav).not.toHaveClass('ld-sidenav--closable')
+
+    const mediaQueries = matchMedia.getMediaQueries()
+    matchMedia.useMediaQuery(mediaQueries[0])
+    await page.waitForChanges()
+
+    expect(ldSidenav).toHaveClass('ld-sidenav--collapsed')
+    expect(ldSidenav).toHaveClass('ld-sidenav--closable')
+
+    const ldSidenavNavitemArtInt =
+      ldSidenav.querySelector<HTMLLdSidenavNavitemElement>(
+        'ld-sidenav-slider > ld-sidenav-navitem:nth-child(4)'
+      )
+    ldSidenavNavitemArtInt.shadowRoot.querySelector('button').dispatchEvent(
+      new MouseEvent('mousedown', {
+        button: 0,
+      })
+    )
+    await page.waitForChanges()
+    expect(ldSidenav.classList.contains('ld-sidenav--has-active-subnav')).toBe(
+      true
+    )
+    expect(ldSidenav).not.toHaveClass('ld-sidenav--collapsed')
+    expect(ldSidenav).toHaveClass('ld-sidenav--closable')
+
+    expect(
+      ldSidenav.querySelectorAll('.ld-sidenav-slider__hidden').length
+    ).toEqual(0)
+
+    expect(
+      ldSidenav.querySelectorAll('.ld-sidenav-subnav__hidden').length
+    ).toEqual(0)
+  })
 })