AppSideNav: add additional tests for when the nav is removed from the DOM

showcase/app/components/mock/app/sidebar/app-side-nav.gts

@@ -24,6 +24,7 @@ export interface MockAppSidebarAppSideNavSignature {
     isResponsive?: HdsAppSideNavSignature['Args']['isResponsive'];
     isCollapsible?: HdsAppSideNavSignature['Args']['isCollapsible'];
     showDevToggle?: boolean;
+    onToggleMinimizedStatus?: HdsAppSideNavSignature['Args']['onToggleMinimizedStatus'];
   };
   Element: HdsAppSideNavSignature['Element'];
 }
@@ -47,6 +48,7 @@ export default class MockAppSidebarAppSideNav extends Component<MockAppSidebarAp
     <HdsAppSideNav
       @isResponsive={{this.isResponsive}}
       @isCollapsible={{this.isCollapsible}}
+      @onToggleMinimizedStatus={{@onToggleMinimizedStatus}}
     >
       <HdsAppSideNavList
         class="hds-side-nav-hide-when-minimized"

showcase/app/router.ts

@@ -37,6 +37,7 @@ Router.map(function () {
     this.route('app-side-nav', function () {
       this.route('frameless', function () {
         this.route('demo-responsiveness');
+        this.route('demo-remove-from-dom');
       });
     });
     this.route('application-state');

showcase/app/templates/page-components/app-side-nav/frameless/demo-remove-from-dom.gts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { pageTitle } from 'ember-page-title';
+import { tracked } from '@glimmer/tracking';
+
+import MockApp from 'showcase/components/mock/app';
+
+export default class PageComponentsAppSideNavFramelessDemoRemoveFromDom extends Component {
+  @tracked isRendered = true;
+
+  removeSideNavFromDOM = (isOpen: boolean) => {
+    if (isOpen) this.isRendered = false;
+  };
+
+  <template>
+    {{pageTitle "App SideNav remove from DOM demo - Frameless"}}
+
+    <MockApp>
+      <:sidebar as |S|>
+        {{#if this.isRendered}}
+          <S.SideNav
+            @showDevToggle={{true}}
+            @onToggleMinimizedStatus={{this.removeSideNavFromDOM}}
+          />
+        {{/if}}
+      </:sidebar>
+      <:main as |M|>
+        <M.PageHeader @showActionButton={{true}} />
+        <M.GenericTextContent />
+        <M.GenericTextContent />
+        <M.GenericTextContent />
+        <M.GenericTextContent />
+      </:main>
+    </MockApp>
+  </template>
+}

showcase/app/templates/page-components/app-side-nav/index.hbs

@@ -699,4 +699,22 @@
     @label="Full AppFrame with AppHeader & AppSideNav (small viewport)"
   />
 
+  <Shw::Divider />
+
+  <Shw::Frame
+    @id="demo-full-app-frame-with-remove-from-dom"
+    @src="/components/app-side-nav/frameless/demo-remove-from-dom"
+    @height="780"
+    @width="800"
+    @label="Remove AppSideNav from DOM when collapse"
+  />
+  <Shw::Text::Body>
+    This demo verifies that when the `AppSideNav` component is removed from the DOM while page overflow styles are
+    overridden, the page's scroll functionality is properly restored.
+  </Shw::Text::Body>
+
+  <Shw::Text::Body>
+    To check this, expand and then collapse the AppSideNav. Then try to scroll the page.
+  </Shw::Text::Body>
+
 </section>

showcase/tests/integration/components/hds/app-side-nav/index-test.js

@@ -314,13 +314,49 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
     assert.dom('body', document).doesNotHaveStyle('overflow');
   });
 
+  test('when expanded in mobile and the component is removed from the DOM, scrolling is enabled', async function (assert) {
+    this.mockMedia();
+
+    let calls = [];
+    this.setProperties({
+      onDesktopViewportChange: (...args) => calls.push(args),
+    });
+
+    this.set('isAppSideNavRendered', true);
+
+    await render(hbs`{{#if this.isAppSideNavRendered}}
+  <Hds::AppSideNav
+    @isCollapsible={{true}}
+    @onDesktopViewportChange={{this.onDesktopViewportChange}}
+  />
+{{/if}}`);
+
+    await this.changeBrowserSize(false);
+
+    assert.deepEqual(
+      calls[1],
+      [false],
+      'resizing to mobile triggers a false event',
+    );
+
+    await click('.hds-app-side-nav__toggle-button');
+
+    assert.dom('body', document).hasStyle({
+      overflow: 'hidden',
+    });
+
+    this.set('isAppSideNavRendered', false);
+
+    assert.dom('body', document).doesNotHaveStyle('overflow');
+  });
+
   test('when collapsed, the content in the AppSideNav is not focusable', async function (assert) {
     await render(hbs`<Hds::AppSideNav
     id='test-app-side-nav'
   @isCollapsible={{true}}
 >
-  <button id='button-inside'>Click</button>
-</Hds::AppSideNav><button id='button-outside'>Click</button>`);
+  <button id='button-inside' type="button">Click</button>
+</Hds::AppSideNav><button id='button-outside' type="button">Click</button>`);
 
     await click('.hds-app-side-nav__toggle-button');
     assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized');