mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
107 lines
3.4 KiB
Plaintext
107 lines
3.4 KiB
Plaintext
---
|
|
import clsx from 'clsx';
|
|
import { ArrowUpRight } from 'lucide-react';
|
|
import Discord from '@/assets/logos/discord.svg?react';
|
|
import GitHub from '@/assets/logos/github.svg?react';
|
|
import Logo from '@/assets/logos/videojs.svg?react';
|
|
import Search from '@/components/Search';
|
|
import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
|
|
import GetStartedLink from './GetStartedLink';
|
|
import MobileNav from './MobileNav';
|
|
|
|
export interface Props {
|
|
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 } = Astro.props;
|
|
---
|
|
|
|
<nav
|
|
class:list={[
|
|
"sticky top-0 z-30 mx-auto flex w-full items-center justify-between border-b border-b-manila-75 bg-manila-light px-5 dark:border-warm-gray dark:bg-faded-black",
|
|
className,
|
|
]}
|
|
style="height:var(--nav-h)"
|
|
>
|
|
<a href="/" class="flex h-5 items-center gap-2 sm:h-6 sm:gap-3">
|
|
<Logo height="100%" />
|
|
<span class="sr-only">Video.js video player</span>
|
|
<span
|
|
class="inline-flex h-full items-center justify-center rounded-full border border-orange px-2 font-display-compact text-(length:--text) font-bold text-orange sm:px-3 sm:font-display"
|
|
style={{
|
|
"--text": "0.75rem",
|
|
} as React.CSSProperties}
|
|
>
|
|
<span>v10</span>
|
|
<span class="hidden whitespace-pre uppercase sm:inline"> beta</span>
|
|
</span>
|
|
</a>
|
|
<Search client:load className="mr-4 ml-auto sm:self-center" />
|
|
{/* Desktop nav links */}
|
|
<div class="hidden h-full md:flex">
|
|
<GetStartedLink
|
|
client:idle
|
|
className={clsx(
|
|
"flex items-center rounded-xs px-5 py-2 font-display text-h3 uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
|
|
isDocsActive ? "relative z-10 text-orange" : "",
|
|
)}
|
|
aria-current={isDocsActive ? "page" : undefined}
|
|
>
|
|
Docs
|
|
<hr class="absolute right-0 -bottom-px left-0 h-px bg-orange" />
|
|
</GetStartedLink>
|
|
{
|
|
otherNavLinks.map((link) => (
|
|
<a
|
|
href={link.href}
|
|
class:list={[
|
|
"flex items-center rounded-xs px-5 py-2 font-display text-h3 uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
|
|
]}
|
|
>
|
|
{link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
|
|
</a>
|
|
))
|
|
}
|
|
<a
|
|
href={DISCORD_INVITE_URL}
|
|
class={clsx(
|
|
"my-1 flex items-center rounded-xs px-3 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
|
|
)}
|
|
aria-label="Discord"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Discord width="1.5em" height="1.5em" />
|
|
</a>
|
|
<a
|
|
href={GITHUB_REPO_URL}
|
|
class={clsx(
|
|
"my-1 flex items-center rounded-xs px-3 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
|
|
)}
|
|
aria-label="GitHub"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<GitHub width="1.5em" height="1.5em" />
|
|
</a>
|
|
</div>
|
|
|
|
<MobileNav client:idle navLinks={navLinks} currentPath={currentPath}>
|
|
<slot name="mobile-nav" />
|
|
</MobileNav>
|
|
</nav>
|