---
import { Icon } from "astro-icon/components";
const currentPath = Astro.url.pathname;
---

<nav class="flex gap-1 ps-2 sm:ps-4 overflow-y-hidden overflow-x-auto">
	<a
		href="/"
		class:list={[
			"flex items-center gap-1",
			"px-4 py-0.5 rounded-t-sm",
			currentPath === "/" &&
				"bg-dp-background2-light dark:bg-dp-background2-dark",
		]}
	>
		<Icon name="lucide:house" /> home
		<a
			href="/blog"
			class:list={[
				"flex items-center gap-1",
				"px-4 py-0.5 rounded-t-sm",
				currentPath.startsWith("/blog") &&
					"bg-dp-background2-light dark:bg-dp-background2-dark",
			]}
		>
			<Icon name="lucide:notebook-pen" /> blog
		</a>
		<a
			href="/uses"
			class:list={[
				"flex items-center gap-1",
				"px-4 py-0.5 rounded-t-sm",
				currentPath.startsWith("/uses") &&
					"bg-dp-background2-light dark:bg-dp-background2-dark",
			]}
		>
			<Icon name="lucide:tool-case" /> uses
		</a>
	</a>
</nav>