117 lines
5.5 KiB
Plaintext
117 lines
5.5 KiB
Plaintext
---
|
|
import PrimaryCTA from '@/components/content/PrimaryCTA.astro';
|
|
import TenantialLogo from '@/components/content/TenantialLogo.astro';
|
|
import Container from '@/components/primitives/Container.astro';
|
|
import { getHeaderCta, getPrimaryNavigation, isActiveNavigationPath, siteMetadata } from '@/lib/site';
|
|
|
|
interface Props {
|
|
currentPath: string;
|
|
}
|
|
|
|
const { currentPath } = Astro.props;
|
|
const headerCta = getHeaderCta(currentPath);
|
|
const primaryNavigation = await getPrimaryNavigation();
|
|
---
|
|
|
|
<header class="relative z-30 px-[var(--space-page-x)] pt-5 sm:pt-7">
|
|
<Container width="wide" class="!max-w-[96rem]">
|
|
<div
|
|
class="flex items-center justify-between gap-4 py-1"
|
|
data-shell-surface="header"
|
|
data-visual-tone="dark"
|
|
>
|
|
<a href="/" class="group flex min-w-0 no-underline" aria-label="Tenantial home">
|
|
<TenantialLogo
|
|
label={siteMetadata.siteName}
|
|
imageClass="h-[2.75rem] w-auto sm:h-12"
|
|
/>
|
|
</a>
|
|
|
|
<nav class="hidden items-center gap-9 lg:flex" aria-label="Primary">
|
|
{
|
|
primaryNavigation.map((item) => (
|
|
<a
|
|
href={item.href}
|
|
aria-current={isActiveNavigationPath(currentPath, item.href) ? 'page' : undefined}
|
|
class:list={[
|
|
'text-sm font-medium transition',
|
|
isActiveNavigationPath(currentPath, item.href)
|
|
? 'text-[var(--color-foreground)]'
|
|
: 'text-[var(--color-stone-200)] hover:text-[var(--color-primary)]',
|
|
]}
|
|
data-nav-link="primary"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))
|
|
}
|
|
</nav>
|
|
|
|
<div class="hidden items-center gap-5 lg:flex">
|
|
<span
|
|
class="text-sm font-medium text-[var(--color-stone-200)]"
|
|
data-nav-state="deferred"
|
|
title="Sign in is not available from the public website yet."
|
|
>
|
|
Sign in
|
|
</span>
|
|
<div data-header-cta>
|
|
<PrimaryCTA cta={headerCta} size="sm" />
|
|
</div>
|
|
</div>
|
|
|
|
<details class="relative lg:hidden" data-mobile-nav>
|
|
<summary
|
|
aria-label="Open navigation menu"
|
|
class="flex h-11 w-11 cursor-pointer list-none items-center justify-center rounded-full border border-[color:var(--color-line)] bg-[rgba(255,247,225,0.06)] text-[var(--color-foreground)]"
|
|
data-mobile-nav-trigger
|
|
>
|
|
<span class="sr-only">Open navigation menu</span>
|
|
<span class="flex flex-col gap-1">
|
|
<span class="block h-0.5 w-4 bg-current"></span>
|
|
<span class="block h-0.5 w-4 bg-current"></span>
|
|
<span class="block h-0.5 w-4 bg-current"></span>
|
|
</span>
|
|
</summary>
|
|
<div
|
|
class="glass-panel absolute right-0 top-[calc(100%+0.75rem)] w-[min(18rem,88vw)] rounded-[1.5rem] border border-white/80 p-3"
|
|
>
|
|
<nav class="flex flex-col gap-1" aria-label="Mobile primary">
|
|
{
|
|
primaryNavigation.map((item) => (
|
|
<a
|
|
href={item.href}
|
|
aria-current={isActiveNavigationPath(currentPath, item.href) ? 'page' : undefined}
|
|
class:list={[
|
|
'rounded-[1rem] px-4 py-3 text-sm',
|
|
isActiveNavigationPath(currentPath, item.href)
|
|
? 'bg-[var(--color-accent)] text-[var(--color-accent-foreground)]'
|
|
: 'text-[var(--color-muted-foreground)] hover:bg-[var(--surface-muted)] hover:text-[var(--color-foreground)]',
|
|
]}
|
|
data-nav-link="mobile-primary"
|
|
>
|
|
<span class="block font-semibold">{item.label}</span>
|
|
{item.description && (
|
|
<span class="mt-1 block text-xs text-[var(--color-copy)]">
|
|
{item.description}
|
|
</span>
|
|
)}
|
|
</a>
|
|
))
|
|
}
|
|
<span
|
|
class="rounded-[1rem] px-4 py-3 text-sm font-medium text-[var(--color-muted-foreground)] opacity-75"
|
|
data-nav-state="deferred"
|
|
>
|
|
Sign in
|
|
</span>
|
|
<div class="mt-2 rounded-[1rem] bg-[var(--surface-accent)] p-3" data-header-cta>
|
|
<PrimaryCTA cta={headerCta} size="sm" showHelper />
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</Container>
|
|
</header>
|