<header class="nav-topbar">
  <button class="nav-topbar-toggle" type="button" data-navigation-toggle
    aria-controls="app-navigation" aria-expanded="false">
    <i class="ph ph-sidebar-simple"></i>
    <span>Menu</span>
  </button>
  <div class="nav-topbar-brand">
    <img src="/assets/imgs/gnexus-mark.svg" alt="" aria-hidden="true">
    <span>Product Console</span>
  </div>
  <div class="nav-topbar-current">Overview</div>
</header>

<div class="nav-drawer-backdrop" data-navigation-close></div>
<aside class="nav-drawer" id="app-navigation" data-navigation-drawer
  aria-label="Main navigation" aria-hidden="true" inert>
  <header class="nav-drawer-header">
    <div>
      <div class="nav-drawer-title">Navi</div>
      <div class="nav-drawer-subtitle">Workspace</div>
    </div>
    <button class="nav-drawer-close" type="button" data-navigation-close aria-label="Close navigation">
      <i class="ph ph-x"></i>
    </button>
  </header>

  <nav class="nav-drawer-body">
    <ul class="list list-nav">
      <li class="list-item list-item-active">
        <a class="list-action" href="/overview" data-navigation-link>
          <span class="list-label"><i class="ph ph-house"></i> Overview</span>
        </a>
      </li>
    </ul>
  </nav>

  <footer class="nav-drawer-footer">
    <span>Version 0.2</span>
    <span>© GNexus</span>
  </footer>
</aside>

NavigationShell.init();

// Available on the global namespace too:
GNexusUIKit.NavigationShell.init();