---
const currentPath = Astro.url.pathname;
---

<nav class="flex gap-1 px-4 overflow-y-hidden overflow-x-auto">
	<a
		href="/"
		class:list={[
			"py-0.5 px-4 rounded-t-sm",
			currentPath === "/" &&
				"bg-dp-background2-light dark:bg-dp-background2-dark",
		]}
	>
		home
	</a>
	<a
		href="/blog"
		class:list={[
			"py-0.5 px-4 rounded-t-sm",
			currentPath.startsWith("/blog") &&
				"bg-dp-background2-light dark:bg-dp-background2-dark",
		]}
	>
		blog
	</a>
	<a
		href="/uses"
		class:list={[
			"py-0.5 px-4 rounded-t-sm",
			currentPath.startsWith("/uses") &&
				"bg-dp-background2-light dark:bg-dp-background2-dark",
		]}
	>
		uses
	</a>
</nav>