# Navigation Components

## Navigation Shell

Navigation Shell - основной паттерн для приложений с длинной навигацией: sticky topbar, кнопка меню, left drawer, footer.

Используйте его для:

- dashboards;
- docs;
- admin panels;
- workspace-интерфейсов;
- mobile/tablet shell.

```html
<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>
```

Behavior:

```js
GNexusUIKit.NavigationShell.init();
```

`NavigationShell.init()` запускается автоматически, если подключен bundle.

## List Navigation

Используйте `.list.list-nav` внутри drawer или sidebar-like панелей.

```html
<ul class="list list-nav">
  <li class="list-item list-item-active">
    <a class="list-action" href="#dashboard">
      <span class="list-label"><i class="ph ph-chart-bar"></i> Dashboard</span>
    </a>
  </li>
</ul>
```

Active state задается классом `.list-item-active`.

## Tabs

Tabs подходят для близких представлений внутри одного контекста.

```html
<div class="tabs" data-tabs>
  <div class="tabs-list" aria-label="View mode">
    <button class="tab tab-active" type="button" aria-controls="overview-panel">Overview</button>
    <button class="tab" type="button" aria-controls="activity-panel">Activity</button>
    <button class="tab" type="button" aria-controls="settings-panel">Settings</button>
  </div>
  <div class="tabs-panels">
    <div class="tab-panel tab-panel-active" id="overview-panel">Overview content</div>
    <div class="tab-panel" id="activity-panel">Activity content</div>
    <div class="tab-panel" id="settings-panel">Settings content</div>
  </div>
</div>
```

Behavior:

```js
GNexusUIKit.Tabs.init();
```

`Tabs.init()` запускается автоматически, если подключен bundle.

## Dropdown, Tooltip, Popover

Эти паттерны живут в `Navigation & Overlays`.

```html
<div class="dropdown">
  <button class="btn btn-secondary with-icon" type="button" data-dropdown-toggle aria-expanded="false">
    <i class="ph ph-dots-three-outline"></i>
    Actions
  </button>
  <div class="dropdown-menu" role="menu">
    <button class="dropdown-item" type="button" role="menuitem">Edit</button>
  </div>
</div>
```

```js
GNexusUIKit.Overlays.init();
```

## Drawer

`Drawer` - programmatic side panel для secondary flows. Navigation Shell использует похожий визуальный паттерн, но его markup статический.

```js
const drawer = GNexusUIKit.Drawer.create("details", {
  title: "Details",
  bodyText: "Content",
  position: "left"
});

drawer.show();
```
