<section class="demo-section" aria-labelledby="navigation-heading">
  <h2 id="navigation-heading">Navigation Shell</h2>

  <div class="navigation-shell" style="min-height: 300px">
    <header class="navigation-topbar">
      <button class="navigation-toggle btn btn-sm btn-tertiary" data-navigation-toggle type="button">
        <i class="ph ph-list"></i>
      </button>
      <div class="navigation-brand">VMK App</div>
    </header>

    <aside class="navigation-sidebar">
      <nav class="navigation-menu">
        <a href="#" class="navigation-item is-active">
          <span class="navigation-item-icon"><i class="ph ph-house"></i></span>
          Dashboard
        </a>
        <a href="#" class="navigation-item">
          <span class="navigation-item-icon"><i class="ph ph-chart-bar"></i></span>
          Analytics
        </a>
        <a href="#" class="navigation-item">
          <span class="navigation-item-icon"><i class="ph ph-gear"></i></span>
          Settings
        </a>
      </nav>
    </aside>

    <div class="navigation-backdrop"></div>

    <main class="navigation-content">
      <p>Main content area inside the navigation shell.</p>
    </main>
  </div>

  <h3>Vue navigation shell</h3>
  <div id="vue-navigation-shell-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnNavigationShell, GnNavigationItem, GnIdentity, GnIconButton } from "/vue/index.js";

    createApp({
      components: { GnNavigationShell, GnNavigationItem, GnIdentity, GnIconButton },
      template: `
        <gn-navigation-shell brand="VMK App" style="min-height: 300px;">
          <template #menu>
            <gn-navigation-item href="#" icon="ph-house" active>Dashboard</gn-navigation-item>
            <gn-navigation-item href="#" icon="ph-chart-bar">Analytics</gn-navigation-item>
            <gn-navigation-item href="#" icon="ph-gear">Settings</gn-navigation-item>
          </template>
          <template #footer>
            <a class="profile-identity" href="#" target="_blank" rel="noopener noreferrer">
              <gn-identity
                title="Eugene Sukhodolskiy"
                meta="goldmikki@gmail.com"
                :avatar="{ src: '/assets/avatar-placeholder.jpg', status: 'online', size: 'sm', variant: 'mint' }"
              />
            </a>
            <gn-icon-button icon="ph-pencil-simple" label="Edit profile" variant="secondary" size="sm" />
            <gn-icon-button icon="ph-sign-out" label="Logout" variant="secondary" size="sm" />
          </template>
          <template #default>
            <p>Main content inside the Vue navigation shell.</p>
          </template>
        </gn-navigation-shell>
      `
    }).mount("#vue-navigation-shell-app");
  </script>
</section>