holly.mlem.systems
forked from
devins.page/devins.page
my website, hosted on wisp.place
devins.page
1---
2import { Icon } from "astro-icon/components";
3const currentPath = Astro.url.pathname;
4---
5
6<nav class="flex gap-1 ps-2 sm:ps-4 overflow-y-hidden overflow-x-auto">
7 <a
8 href="/"
9 class:list={[
10 "flex items-center gap-1",
11 "px-4 py-0.5 rounded-t-sm",
12 currentPath === "/" &&
13 "bg-dp-background2-light dark:bg-dp-background2-dark",
14 ]}
15 >
16 <Icon name="lucide:house" /> home
17 <a
18 href="/blog"
19 class:list={[
20 "flex items-center gap-1",
21 "px-4 py-0.5 rounded-t-sm",
22 currentPath.startsWith("/blog") &&
23 "bg-dp-background2-light dark:bg-dp-background2-dark",
24 ]}
25 >
26 <Icon name="lucide:notebook-pen" /> blog
27 </a>
28 <a
29 href="/uses"
30 class:list={[
31 "flex items-center gap-1",
32 "px-4 py-0.5 rounded-t-sm",
33 currentPath.startsWith("/uses") &&
34 "bg-dp-background2-light dark:bg-dp-background2-dark",
35 ]}
36 >
37 <Icon name="lucide:tool-case" /> uses
38 </a>
39 </a>
40</nav>