stashing code

apps/frontend/src/lib/components/molecules/navbar/mobile-nav-sheet.svelte

@@ -0,0 +1,54 @@
+<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>