vault/ui/app/components/sidebar/frame.hbs

<Hds::AppFrame @hasSidebar={{@showSidebar}} @hasHeader={{false}} @hasFooter={{false}} as |Frame|>
  <Frame.Sidebar data-test-sidebar-nav>
    <Hds::SideNav @isResponsive={{true}} @hasA11yRefocus={{true}} @a11yRefocusSkipTo="app-main-content">
      <:header>
        <Hds::SideNav::Header>
          <:logo>
            <Hds::SideNav::Header::HomeLink
              @icon="vault"
              @route="vault.cluster"
              @model={{this.currentCluster.cluster.name}}
              @ariaLabel="home link"
              data-test-sidebar-logo
            />
          </:logo>
          <:actions>
            <Hds::SideNav::Header::IconButton
              @icon="terminal-screen"
              @ariaLabel="Console toggle"
              data-test-console-toggle
              {{on "click" (fn (mut this.console.isOpen) (not this.console.isOpen))}}
            />
            <Sidebar::UserMenu />
          </:actions>
        </Hds::SideNav::Header>
      </:header>

      {{! this block is where the Hds::SideNav::Portal components render into }}
      <:body>
        <Hds::SideNav::Portal::Target aria-label="sidebar navigation links" />
      </:body>

      <:footer>
        {{#if (has-feature "Namespaces")}}
          <NamespacePicker
            @namespace={{this.clusterController.namespaceQueryParam}}
            class="hds-side-nav-hide-when-minimized"
          />
        {{/if}}
      </:footer>
    </Hds::SideNav>
  </Frame.Sidebar>
  <Frame.Main id="app-main-content" class={{if this.console.isOpen "main--console-open"}}>
    {{! outlet for app content }}
    <div id="modal-wormhole"></div>
    <LinkStatus @status={{this.currentCluster.cluster.hcpLinkStatus}} />
    {{yield}}
    <div data-test-console-panel class={{if this.console.isOpen "panel-open"}}>
      <Console::UiPanel @isFullscreen={{this.consoleFullscreen}} />
    </div>
  </Frame.Main>
</Hds::AppFrame>