<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>Version 0.2</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="code-example-copy" type="button">Copy</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="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-js">NavigationShell.init();

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