navbar.astro
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

navbar.astro
View Options

	---
	const { active } = Astro.props;
	---

	<nav class="fixed w-full backdrop-blur-md bg-zinc-900/50 border-b border-zinc-800 border-off z-[100]">
	<div class="mx-auto px-4">
	<div class="flex h-10 justify-between relative">
	<div class="flex">
	<div class="flex flex-shrink-0 items-center">
	<img class="h-6 w-auto" src="{{base_path \| safe}}/assets/favicon.svg" alt="PMC">
	</div>
	<div class="ml-6 flex sm:space-x-8 absolute left-5 top-1">
	<a href="{{base_path \| safe}}/" class={`${active == "list" ? 'border-b-2 border-sky-200 text-sky-200' : 'border-b-2 border-transparent hover:border-zinc-300 text-zinc-500 hover:text-zinc-200'} px-1 pt-1 text-base font-medium inline-flex items-center p-[7.5px]`}>Process List</a>
	<a href="{{base_path \| safe}}/servers" class={`${active == "servers" ? 'border-b-2 border-sky-200 text-sky-200' : 'border-b-2 border-transparent hover:border-zinc-300 text-zinc-500 hover:text-zinc-200'} px-1 pt-1 text-base font-medium inline-flex items-center p-[7.5px] ml-10 sm:ml-0`}>Servers</a>
	<a href="{{base_path \| safe}}/docs" class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-base font-medium text-zinc-500 hover:border-zinc-300 hover:text-zinc-200 p-[7.5px] ml-10 sm:ml-0">API Docs</a>
	</div>
	</div>
	</div>
	</div>
	</nav>