Navigation.astro

---
import type { CollectionEntry } from 'astro:content'
import { getConfig } from '@libs/config'
import { getVersionedDocsPath } from '@libs/path'
import type { Layout } from '@libs/layout'
import GitHubIcon from '@components/icons/GitHubIcon.astro'
import LinkItem from '@components/header/LinkItem.astro'
import Versions from '@components/header/Versions.astro'
import ThemeToggler from '@layouts/partials/ThemeToggler.astro'
import SubNav from '@components/header/SubNav.astro'

interface Props {
  addedIn?: CollectionEntry<'docs'>['data']['added']
  layout: Layout
  title: string
}

const { addedIn, layout, title } = Astro.props
---

<header class="sticky-top bd-header">
  <nav
    class="navbar navbar-expand supra d-none"
    data-bs-theme="dark"
    aria-label="Supra-navigation - New release banner"
  >
    <div class="container-fluid container-max-width d-flex justify-content-center">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="https://web.unified-design-system.orange.com">
            There’s a newer version of OUDS Web!
          </a>
        </li>
      </ul>
    </div>
  </nav>
  <nav class="navbar navbar-expand-lg" data-bs-theme="dark" aria-label="Main navigation">
    <div class="container-fluid container-max-width">
      <div class="navbar-brand me-auto me-lg-2xlarge">
        <a class="stretched-link" href={`/${getConfig().brand}/`}>
          <img
            src={getVersionedDocsPath(`assets/brand/${getConfig().brand}-logo.svg`)}
            width="50"
            height="50"
            alt="OUDS Web - Back to Home"
            loading="lazy"
          />
        </a>
      </div>

      <!--OUDS mod: no sidebar toggle which is in the subnav in OUDS Web-->

      <button
        class="navbar-toggler collapsed"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target=".bd-navbar"
        aria-controls="bd-navbar1 bd-navbar2"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div id="bd-navbar1" class="navbar-collapse collapse me-lg-auto bd-navbar mb-none border-none">
        <ul class="navbar-nav">
          <LinkItem
            active={layout === 'docs' && Astro.url.pathname.includes('/getting-started/')}
            href={getVersionedDocsPath('getting-started/introduction')}
            onclick="dataLayer.push({'event': 'clic', 'site_name':'accessibility-boosted', 'phase':'prod', 'track_category':'navbar', 'track_name':'getting-started'});"
          >
            Getting started
          </LinkItem>
          <LinkItem
            active={layout === 'docs' && Astro.url.pathname.includes('/foundation/')}
            href={getVersionedDocsPath('foundation/approach')}
            onclick="dataLayer.push({'event': 'clic', 'site_name':'accessibility-boosted', 'phase':'prod', 'track_category':'navbar', 'track_name':'foundation'});"
          >
            Foundation
          </LinkItem>
          <LinkItem
            active={layout === 'docs' && Astro.url.pathname.includes('/layout/')}
            href={getVersionedDocsPath('layout/breakpoints')}
            onclick="dataLayer.push({'event': 'clic', 'site_name':'accessibility-boosted', 'phase':'prod', 'track_category':'navbar', 'track_name':'layout'});"
          >
            Layout
          </LinkItem>
          <LinkItem
            active={title === 'Components' || Astro.url.pathname.includes('/components/')}
            href={getVersionedDocsPath('components')}
            onclick="dataLayer.push({'event': 'clic', 'site_name':'accessibility-boosted', 'phase':'prod', 'track_category':'navbar', 'track_name':'components'});"
          >
            Components
          </LinkItem>
          <LinkItem
            active={layout === 'docs' && Astro.url.pathname.includes('/utilities/')}
            href={getVersionedDocsPath('utilities')}
            onclick="dataLayer.push({'event': 'clic', 'site_name':'accessibility-boosted', 'phase':'prod', 'track_category':'navbar', 'track_name':'utilities'});"
          >
            Utilities
          </LinkItem>
          <LinkItem
            active={title === 'Examples'}
            href={getVersionedDocsPath('examples')}
            onclick="dataLayer.push({'event': 'clic', 'site_name':'accessibility-boosted', 'phase':'prod', 'track_category':'navbar', 'track_name':'examples'});"
          >
            Examples
          </LinkItem>
        </ul>
      </div>
      <div id="bd-navbar2" class="navbar-collapse collapse bd-navbar border-none">
        <ul class="navbar-nav flex-row me-lg-large">
          <LinkItem class="nav-icon" href={getConfig().repo} target="_blank" rel="noopener">
            <GitHubIcon height={16} width={16} />
            <span class="visually-hidden">GitHub</span>
          </LinkItem>

          <li class="nav-item">
            <div class="bd-search nav-link nav-icon" id="docsearch" data-bd-docs-version={getConfig().docs_version}>
            </div>
          </li>

          <Versions layout={layout} addedIn={addedIn} />
        </ul>
        <ul class="navbar-nav flex-row ms-lg-large">
          <li class="nav-item dropdown">
            <ThemeToggler layout={layout} />
          </li>
          <li class="nav-item dropdown">
            <button
              class="nav-link nav-icon dropdown-toggle"
              id="bd-brand"
              type="button"
              aria-expanded="false"
              data-bs-toggle="dropdown"
              data-bs-display="static"
              aria-label={`Toggle brand (${getConfig().brand})`}
            >
              <svg class="bi ms-auto" aria-hidden="true">
                <use href={getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#theme')}></use>
              </svg>
              <span class="d-lg-none ms-small" id="bd-brand-text">Toggle brand</span>
            </button>
            <ul class=`dropdown-menu dropdown-menu-end mb-small` aria-labelledby="bd-brand-text">
              <li>
                <a
                  href={Astro.url}
                  class:list={['dropdown-item d-flex align-items-center', { active: getConfig().brand === 'orange' }]}
                  data-bs-brand-value="orange"
                  aria-current={getConfig().brand === 'orange'}
                >
                  <img
                    class="bi me-small"
                    src={getVersionedDocsPath('assets/brand/orange-logo.svg')}
                    alt=""
                    loading="lazy"
                  />
                  Orange
                  <svg class:list={['bi ms-auto', { 'd-none': getConfig().brand !== 'orange' }]} aria-hidden="true"
                    ><use href={getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#check2')}></use></svg
                  >
                </a>
              </li>
              <li>
                <a
                  href={Astro.url}
                  class:list={[
                    'dropdown-item d-flex align-items-center',
                    { active: getConfig().brand === 'orange-compact' }
                  ]}
                  data-bs-brand-value="orange-compact"
                  aria-current={getConfig().brand === 'orange-compact'}
                >
                  <img
                    class="bi me-small"
                    src={getVersionedDocsPath('assets/brand/orange-compact-logo.svg')}
                    alt=""
                    loading="lazy"
                  />
                  Orange Compact
                  <svg
                    class:list={['bi ms-auto', { 'd-none': getConfig().brand !== 'orange-buiness-tools' }]}
                    aria-hidden="true"
                    ><use href={getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#check2')}></use></svg
                  >
                </a>
              </li>
              <li>
                <a
                  href={Astro.url}
                  class:list={['dropdown-item d-flex align-items-center', { active: getConfig().brand === 'sosh' }]}
                  data-bs-brand-value="sosh"
                  aria-current={getConfig().brand === 'sosh'}
                >
                  <img
                    class="bi me-small"
                    src={getVersionedDocsPath('assets/brand/sosh-logo.svg')}
                    alt=""
                    loading="lazy"
                  />
                  Sosh
                  <svg class:list={['bi ms-auto', { 'd-none': getConfig().brand !== 'sosh' }]} aria-hidden="true"
                    ><use href={getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#check2')}></use></svg
                  >
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  {layout === 'docs' && <SubNav />}
</header>