<section class="section docs-section" id="navigation-shell">
                  <h2 class="section-title">Navigation Shell</h2>
                  <p class="docs-section-description">Navigation Shell объединяет верхнюю панель, кнопку меню, left drawer и footer. Компонент подходит для docs, dashboards и внутренних инструментов с длинной навигацией.</p>
                  <div class="block">
                    <div class="nav-shell-preview">
                      <header class="nav-topbar nav-shell-preview-topbar">
                        <button class="nav-topbar-toggle" type="button" 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-shell-preview-body">
                        <aside class="nav-drawer nav-shell-preview-drawer">
                          <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" 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="#navigation-shell">
                                  <span class="list-label"><i class="ph ph-house"></i> Overview</span>
                                </a>
                              </li>
                              <li class="list-item">
                                <a class="list-action" href="#navigation-shell">
                                  <span class="list-label"><i class="ph ph-table"></i> Records</span>
                                </a>
                              </li>
                              <li class="list-item">
                                <a class="list-action" href="#navigation-shell">
                                  <span class="list-label"><i class="ph ph-gear"></i> Settings</span>
                                </a>
                              </li>
                            </ul>
                          </nav>
                          <footer class="nav-drawer-footer">
                            <span>GNexus UI Kit v0.3</span>
                            <span>© GNexus</span>
                          </footer>
                        </aside>
                        <div class="nav-shell-preview-content">
                          <h3>Shell content</h3>
                          <p>Topbar stays visible. Drawer opens from the left and keeps its footer pinned.</p>
                        </div>
                      </div>
                    </div>
                  </div>

                <div class="code-example">
                        <div class="code-example-header">
                                <span class="code-example-title">Navigation Shell HTML</span>
                                <button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
                        </div>
                        <pre><code class="language-html">&lt;header class="nav-topbar"&gt;
  &lt;button class="nav-topbar-toggle" type="button" data-navigation-toggle
    aria-controls="app-navigation" aria-expanded="false"&gt;
    &lt;i class="ph ph-sidebar-simple"&gt;&lt;/i&gt;
    &lt;span&gt;Menu&lt;/span&gt;
  &lt;/button&gt;
  &lt;div class="nav-topbar-brand"&gt;
    &lt;img src="/assets/imgs/gnexus-mark.svg" alt="" aria-hidden="true"&gt;
    &lt;span&gt;Product Console&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="nav-topbar-current"&gt;Overview&lt;/div&gt;
&lt;/header&gt;

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

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

  &lt;footer class="nav-drawer-footer"&gt;
    &lt;span&gt;Version 0.2&lt;/span&gt;
    &lt;span&gt;© GNexus&lt;/span&gt;
  &lt;/footer&gt;
&lt;/aside&gt;</code></pre>
                </div>
                <div class="code-example">
                        <div class="code-example-header">
                                <span class="code-example-title">Navigation Shell JS</span>
                                <button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
                        </div>
                        <pre><code class="language-js">NavigationShell.init();

// Available on the global namespace too:
GNexusUIKit.NavigationShell.init();</code></pre>
                </div>

                <div class="block mt-6">
                        <h3 class="block-title">Navigation Shell with Profile</h3>
                        <div class="nav-shell-preview">
                                <header class="nav-topbar nav-shell-preview-topbar">
                                        <button class="nav-topbar-toggle" type="button" 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-shell-preview-body">
                                        <aside class="nav-drawer nav-shell-preview-drawer">
                                                <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" 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="#navigation-shell">
                                                                                <span class="list-label"><i class="ph ph-house"></i> Overview</span>
                                                                        </a>
                                                                </li>
                                                                <li class="list-item">
                                                                        <a class="list-action" href="#navigation-shell">
                                                                                <span class="list-label"><i class="ph ph-table"></i> Records</span>
                                                                        </a>
                                                                </li>
                                                                <li class="list-item">
                                                                        <a class="list-action" href="#navigation-shell">
                                                                                <span class="list-label"><i class="ph ph-gear"></i> Settings</span>
                                                                        </a>
                                                                </li>
                                                        </ul>
                                                </nav>
                                                <footer class="nav-drawer-footer">
                                                        <a class="profile-identity" href="#" target="_blank" rel="noopener noreferrer">
                                                                <span class="identity">
                                                                        <span class="avatar avatar-primary avatar-sm is-online">
                                                                                <img src="https://auth.gnexus.space/storage/avatars/1/181513cf-3e1b-4b72-bc9d-a1825c736560/original.jpg" alt="">
                                                                        </span>
                                                                        <span class="identity-content">
                                                                                <span class="identity-title">Eugene Sukhodolskiy</span>
                                                                                <span class="identity-meta">goldmikki@gmail.com</span>
                                                                        </span>
                                                                </span>
                                                        </a>
                                                        <button class="btn-icon" type="button" aria-label="Edit profile"><i class="ph ph-pencil-simple" aria-hidden="true"></i></button>
                                                        <button class="btn-icon" type="button" aria-label="Logout"><i class="ph ph-sign-out" aria-hidden="true"></i></button>
                                                </footer>
                                        </aside>
                                        <div class="nav-shell-preview-content">
                                                <h3>Shell content</h3>
                                                <p>Topbar stays visible. Drawer opens from the left and keeps its footer pinned.</p>
                                        </div>
                                </div>
                        </div>
                </div>

                <div class="code-example">
                        <div class="code-example-header">
                                <span class="code-example-title">Navigation Shell Profile Footer HTML</span>
                                <button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
                        </div>
                        <pre><code class="language-html">&lt;footer class="nav-drawer-footer"&gt;
  &lt;a class="profile-identity" href="#" target="_blank" rel="noopener noreferrer"&gt;
    &lt;span class="identity"&gt;
      &lt;span class="avatar avatar-primary avatar-sm is-online"&gt;
        &lt;img src="..." alt=""&gt;
      &lt;/span&gt;
      &lt;span class="identity-content"&gt;
        &lt;span class="identity-title"&gt;Name&lt;/span&gt;
        &lt;span class="identity-meta"&gt;email@example.com&lt;/span&gt;
      &lt;/span&gt;
    &lt;/span&gt;
  &lt;/a&gt;
  &lt;button class="btn-icon" aria-label="Edit profile"&gt;
    &lt;i class="ph ph-pencil-simple"&gt;&lt;/i&gt;
  &lt;/button&gt;
  &lt;button class="btn-icon" aria-label="Logout"&gt;
    &lt;i class="ph ph-sign-out"&gt;&lt;/i&gt;
  &lt;/button&gt;
&lt;/footer&gt;</code></pre>
                </div>

                <div class="code-example">
                        <div class="code-example-header">
                                <span class="code-example-title">Vue: Navigation Shell Profile Footer</span>
                                <button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
                        </div>
                        <pre><code class="language-html">&lt;GnNavigationShell :items="navItems" brand="Product Console" ...&gt;
  &lt;template #footer&gt;
    &lt;a class="profile-identity" href="/profile" target="_blank"&gt;
      &lt;GnIdentity
        title="Eugene Sukhodolskiy"
        meta="goldmikki@gmail.com"
        :avatar="{ src: '...', status: 'online', size: 'sm' }"
      /&gt;
    &lt;/a&gt;
    &lt;GnIconButton icon="ph-pencil-simple" label="Edit profile" /&gt;
    &lt;GnIconButton icon="ph-sign-out" label="Logout" /&gt;
  &lt;/template&gt;
&lt;/GnNavigationShell&gt;</code></pre>
                </div>
                </section>