55 lines
1.6 KiB
Svelte
55 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { Sheet, SheetContent, SheetTrigger } from "$lib/components/ui/sheet";
|
|
import { buttonVariants } from "$lib/components/ui/button";
|
|
import IconMenu from "~icons/solar/hamburger-menu-broken";
|
|
import IconClose from "~icons/mingcute/close-line";
|
|
import { NAV_LINKS, TRANSITION_COLORS } from "$lib/core/constants";
|
|
import { cn } from "$lib/utils";
|
|
import Icon from "$lib/components/atoms/icon.svelte";
|
|
import Logo from "$lib/components/atoms/logo.svelte";
|
|
|
|
let { invert }: { invert: boolean } = $props();
|
|
|
|
let open = $state(false);
|
|
</script>
|
|
|
|
<Sheet {open} onOpenChange={(to) => (open = to)}>
|
|
<SheetTrigger
|
|
class={cn(
|
|
"block lg:hidden",
|
|
buttonVariants({
|
|
variant: invert ? "glassWhite" : "ghost",
|
|
size: "icon",
|
|
}),
|
|
)}
|
|
onclick={() => (open = true)}
|
|
>
|
|
<Icon icon={IconMenu} cls={"h-6 w-auto"} />
|
|
</SheetTrigger>
|
|
<SheetContent side="bottom" class="z-[101]">
|
|
<button
|
|
onclick={() => (open = false)}
|
|
class="absolute right-4 top-4 grid place-items-center rounded-md border border-neutral-400 p-1 text-neutral-500"
|
|
>
|
|
<IconClose class="h-5 w-5" />
|
|
</button>
|
|
<Logo />
|
|
<div class="mt-8 flex flex-col gap-2 overflow-y-auto">
|
|
{#each NAV_LINKS as link}
|
|
<a
|
|
href={link.link}
|
|
onclick={() => (open = false)}
|
|
class={cn(
|
|
"text-sgreen flex items-center gap-2 rounded-lg border-2 p-3 px-4",
|
|
TRANSITION_COLORS,
|
|
"border-transparent hover:border-brand-300 hover:bg-brand-100",
|
|
)}
|
|
>
|
|
<Icon icon={link.icon} cls="h-5 w-5" />
|
|
<span>{link.name}</span>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|