77 lines
3.1 KiB
Plaintext
77 lines
3.1 KiB
Plaintext
---
|
|
import { SITE, LINKS } from "@/consts";
|
|
import { cn } from "@/lib/utils";
|
|
const { pathname } = Astro.url;
|
|
const subpath = pathname.match(/[^/]+/g);
|
|
---
|
|
|
|
<div
|
|
id="drawer"
|
|
class="fixed inset-0 h-0 z-40 overflow-hidden flex flex-col items-center justify-center md:hidden bg-neutral-100 dark:bg-neutral-900 transition-[height] duration-300 ease-in-out"
|
|
>
|
|
<nav class="flex flex-col items-center space-y-2">
|
|
{
|
|
LINKS.map((LINK) => (
|
|
<a
|
|
href={LINK.HREF}
|
|
class={cn(
|
|
"flex items-center justify-center px-3 py-1 rounded-full",
|
|
"text-current font-departure hover:text-black dark:hover:text-white",
|
|
"hover:bg-black/5 dark:hover:bg-white/20",
|
|
"transition-colors duration-300 ease-in-out",
|
|
pathname === LINK.HREF ||
|
|
"/" + subpath?.[0] === LINK.HREF
|
|
? "pointer-events-none bg-black dark:bg-white text-white dark:text-black"
|
|
: "",
|
|
)}
|
|
>
|
|
{LINK.TEXT}
|
|
</a>
|
|
))
|
|
}
|
|
</nav>
|
|
|
|
<div class="flex gap-1 mt-5">
|
|
<a
|
|
href="/search/"
|
|
aria-label={`Search blog posts and projects on ${SITE.TITLE}`}
|
|
class={cn(
|
|
"size-9 rounded-full p-2 items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out",
|
|
pathname === "/search/" || "/" + subpath?.[0] === "search"
|
|
? "pointer-events-none bg-black dark:bg-white text-white dark:text-black"
|
|
: "",
|
|
)}
|
|
>
|
|
<div class="text-2xl -translate-y-2"></div>
|
|
</a>
|
|
|
|
<a
|
|
href="/rss.xml"
|
|
target="_blank"
|
|
aria-label={`Rss feed for ${SITE.TITLE}`}
|
|
class="size-9 rounded-full p-2 items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out"
|
|
>
|
|
<div class="text-2xl -translate-y-2"></div>
|
|
</a>
|
|
|
|
<button
|
|
id="drawer-theme-button"
|
|
aria-label={`Toggle light and dark theme`}
|
|
class="size-9 rounded-full p-2 items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out"
|
|
>
|
|
<span class="block dark:hidden text-2xl -translate-y-2"
|
|
></span
|
|
>
|
|
<span class="hidden dark:block text-2xl -translate-y-2"
|
|
></span
|
|
>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#drawer.open {
|
|
@apply h-full;
|
|
}
|
|
</style>
|