102 lines
3.6 KiB
Plaintext
102 lines
3.6 KiB
Plaintext
---
|
|
import BrandLogo from '@components/ui/logos/BrandLogo.astro';
|
|
import ThemeToggleButton from '@components/buttons/ThemeToggleButton.astro';
|
|
import { NavigationLinks } from '@/config';
|
|
|
|
const pathname = new URL(Astro.request.url).pathname;
|
|
const currentPath = pathname.slice(1);
|
|
---
|
|
|
|
<header
|
|
id="nav"
|
|
class="fixed flex flex-wrap md:flex-nowrap md:justify-start inset-x-0 top-0 w-full z-50"
|
|
>
|
|
<div class="bg-background absolute top-0 bottom-0 left-0 z-0 w-full h-24"/>
|
|
<div class="bg-linear-to-b from-background to-transparent absolute top-24 bottom-0 left-0 w-full h-12 z-0"/>
|
|
<nav
|
|
class="nav-base relative md:flex md:items-center md:justify-between rounded-[36px] w-full px-4 mx-2 py-3 mt-4"
|
|
aria-label="Global"
|
|
>
|
|
<div class="flex items-center justify-between ml-0">
|
|
<a
|
|
class="flex-none rounded-full h-10.5"
|
|
href="/"
|
|
aria-label="Brand"
|
|
>
|
|
<BrandLogo class="h-full w-auto rounded-full object-cover"/>
|
|
</a>
|
|
<div class="md:hidden mr-auto ml-4">
|
|
<button
|
|
type="button"
|
|
class="hs-collapse-toggle flex items-center justify-center text-secondary text-sm font-bold hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-full transition duration-300 disabled:pointer-events-none disabled:opacity-50 h-8 w-8"
|
|
data-hs-collapse="#navbar-collapse-with-animation"
|
|
aria-controls="navbar-collapse-with-animation"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<svg
|
|
class="hs-collapse-open:hidden shrink-0 h-5 w-5"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<line x1="3" x2="21" y1="6" y2="6"></line>
|
|
<line x1="3" x2="21" y1="12" y2="12"></line>
|
|
<line x1="3" x2="21" y1="18" y2="18"></line>
|
|
</svg>
|
|
<svg
|
|
class="hs-collapse-open:block shrink-0 h-5 w-5 hidden"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M18 6 6 18"></path>
|
|
<path d="m6 6 12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="md:hidden ml-2 mr-2">
|
|
<span class="">
|
|
<ThemeToggleButton />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex md:flex-row items-center justify-between">
|
|
<div
|
|
id="navbar-collapse-with-animation"
|
|
class="hs-collapse grow basis-full md:block transition-all duration-300 ml-2 mb-2 md:mb-0 hidden overflow-hidden md:overflow-visible"
|
|
>
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-end gap-x-0 md:gap-x-4 lg:gap-x-7 gap-y-4 md:gap-y-0 md:ps-7 mr-2 mt-5 md:mt-0">
|
|
{NavigationLinks.map((item) => {
|
|
const isActive = currentPath === (item.url === '/' ? '' : item.url.slice(1));
|
|
return (
|
|
<a
|
|
href={item.url}
|
|
class={`text-sm font-medium ${isActive ? 'text-active' : 'text-secondary hover:text-secondary-hover'}`}
|
|
>
|
|
{item.name}
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div class="hidden md:flex ml-2">
|
|
<span class="">
|
|
<ThemeToggleButton />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<script is:inline src="/vendor/preline/collapse2.1.0.min.js"></script>
|