v10/site/src/components/NavBar/NavBar.astro

---

import clsx from 'clsx';
import { ArrowUpRight } from 'lucide-react';
import Discord from '@/components/icons/Discord';
import GitHub from '@/components/icons/GitHub';
import Search from '@/components/Search';
import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
import FilmGrain from '../FilmGrain';
import GetStartedLink from './GetStartedLink';
import MobileNav from './MobileNav';

export interface Props {
  dark?: boolean;
  class?: string;
}

type NavLink = {
  href: string;
  label: string;
  matchPath: string | null;
  external?: boolean;
};
const navLinks: NavLink[] = [
  { href: '/docs', label: 'Docs', matchPath: '/docs' },
  { href: '/blog', label: 'Blog', matchPath: '/blog' },
];

const currentPath = Astro.url.pathname;
const isDocsActive = currentPath.startsWith('/docs');
const otherNavLinks = navLinks.filter((link) => link.href !== '/docs');
const { class: className, dark = false } = Astro.props;
---

<nav
  class:list={[
    'pl-3 flex justify-between sticky top-0 z-40 border-b',
    dark
      ? 'bg-dark-100 text-light-80 border-dark-100 dark:border-dark-80'
      : 'bg-light-80 border-light-40 dark:bg-dark-100 dark:border-dark-80',
    className,
  ]}
  style="height: var(--nav-h);"
>
  {/* Grain */}
  <FilmGrain currentPath={Astro.url.pathname} />
  {/* Logo */}
  <a href="/" class="flex items-center px-3 text-h5">Video.js v10</a>

  <Search dark={dark} class="ml-auto mr-4 sm:self-center" />

  {/* Desktop nav links */}
  <div class="hidden md:flex -mb-px pr-3">
    <GetStartedLink
      client:idle
      className={clsx(
        'h-full flex items-center px-3 border-b gap-1',
        isDocsActive ? 'border-current' : 'border-transparent intent:border-current',
      )}
      aria-current={isDocsActive ? 'page' : undefined}
    >
      Docs
    </GetStartedLink>
    {
      otherNavLinks.map((link) => (
        <a
          href={link.href}
          class:list={[
            'h-full flex items-center px-3 border-b gap-1',
            link.matchPath && currentPath.startsWith(link.matchPath)
              ? 'border-current'
              : 'border-transparent intent:border-current',
          ]}
          aria-current={link.matchPath && currentPath.startsWith(link.matchPath) ? 'page' : undefined}
        >
          {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
        </a>
      ))
    }
    <a
      href={GITHUB_REPO_URL}
      class="h-full flex items-center px-3 border-b border-transparent intent:border-current"
      aria-label="GitHub"
      target="_blank"
      rel="noopener noreferrer"
    >
      <GitHub size="1.1em" strokeWidth="0.0625em" />
    </a>
    <a
      href={DISCORD_INVITE_URL}
      class="h-full flex items-center px-3 border-b border-transparent intent:border-current"
      aria-label="Discord"
      target="_blank"
      rel="noopener noreferrer"
    >
      <Discord size="1.1em" strokeWidth="0.0625em" />
    </a>
  </div>

  {/* Mobile nav */}
  <MobileNav client:idle navLinks={navLinks} currentPath={currentPath} dark={dark}>
    <slot name="mobile-nav" />
  </MobileNav>
</nav>