<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="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>