---
import Icon from '@ui/Icon.astro'
import DocsLogo from './DocsLogo.astro'
import docs from '@data/docs.json'
import { site } from '@shared/lib/site'

// Website / Preview / Support come from shared/data/docs.json.
const productLinks = docs.links as { title: string; url: string; icon: string }[]

const changelogUrl = 'https://tabler.io/changelog'
---

<!-- BEGIN DOCS NAVBAR -->
<nav class="navbar navbar-expand" aria-label="Docs">
  <div class="container-lg">
    <div class="d-flex align-items-center flex-fill gap-2">
      <button type="button" class="btn btn-icon btn-ghost-secondary d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#docs-menu-offcanvas" aria-controls="docs-menu-offcanvas" aria-label="Open documentation menu">
        <Icon name="menu-2" />
      </button>
      <a href="/" class="navbar-brand navbar-brand-autodark me-2" aria-label="Tabler">
        <DocsLogo />
      </a>
      <span class="badge d-none d-sm-inline-block">v{site.version}</span>
      <div class="ms-auto d-flex align-items-center gap-2">
        <nav class="d-none d-md-flex align-items-center me-1" aria-label="Tabler sites">
          {
            productLinks.map((link) => (
              <a href={link.url} class="nav-link docs-navbar-link" target="_blank" rel="noopener noreferrer">
                {link.title}
              </a>
            ))
          }
          <a href={changelogUrl} class="nav-link docs-navbar-link" target="_blank" rel="noopener noreferrer">Changelog</a>
        </nav>
        <a href={site.githubUrl} class="btn btn-icon btn-ghost-secondary" target="_blank" rel="noopener noreferrer" aria-label="Tabler on GitHub">
          <Icon name="brand-github" />
        </a>
      </div>
    </div>
  </div>
</nav>
<!-- END DOCS NAVBAR -->