feat: finish mobile drawer menu

src/lib/assets/grid.svg

@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'>
+    <rect x='50%' width='0.3' height='100%' fill='rgb(203 213 225)'></rect>
+    <rect y='50%' width='100%' height='0.3' fill='rgb(203 213 225)'></rect>
+</svg>

src/lib/components/Navbar/Drawer.svelte

@@ -1,46 +1,93 @@
-<script>
+<script lang="ts">
 	import Name from '$lib/assets/Name.svelte';
 	import { HamburgerMenu } from 'svelte-radix';
 	import { Drawer } from 'vaul-svelte';
+	import { toggleMode } from 'mode-watcher';
 	import Separator from '../ui/separator/separator.svelte';
+	import Button from '../ui/button/button.svelte';
+	import { Sun, Moon, Home, Person, File, Backpack } from 'svelte-radix';
+
+	let open: boolean = false;
+
+	const close = () => {
+		open = false;
+	};
 </script>
 
-<Drawer.Root shouldScaleBackground direction="top">
+<Drawer.Root shouldScaleBackground direction="top" bind:open>
-	<Drawer.Trigger class="md:hidden">
+	<Drawer.Trigger asChild let:builder>
-		<HamburgerMenu class="icon border-1 border-primary" />
+		<Button variant="outline" size="icon" builders={[builder]} class="px-2 md:hidden">
+			<HamburgerMenu class="icon border-1 border-primary" />
+		</Button>
 	</Drawer.Trigger>
 	<Drawer.Portal>
 		<Drawer.Overlay class="fixed inset-0 bg-black/40" />
 		<Drawer.Content
-			class="fixed top-0 left-0 right-0 mb-24 flex flex-col rounded-b-2xl z-50 bg-accent"
+			class="fixed top-0 left-0 right-0 mb-24 flex flex-col rounded-b-2xl z-50 bg-accent dark:bg-zinc-900"
 		>
-			<div class="flex-1 rounded-b-2xl bg-accent p-4 shadow-xl dark:shadow-none">
+			<div class="flex-1 rounded-b-2xl bg-accent dark:bg-zinc-900 p-4 shadow-xl dark:shadow-none">
 				<div class="mx-auto max-w-md">
-					<Drawer.Title class="mb-4 font-medium">
+					<Drawer.Title class="font-medium">
 						<span class="px-2 flex justify-center">
 							<Name href="/" width="80vw" height="auto" />
 						</span>
-						<Separator class="h-1 rounded-3xl mt-1" />
+						<Separator class="h-1 rounded-3xl mt-1 dark:bg-zinc-500" />
 					</Drawer.Title>
-					<p class="mb-2 text-zinc-600"></p>
+					<div class="grid grid-cols-1 my-10 gap-2">
-					<p class="mb-8 text-zinc-600">
+						<Drawer.Close asChild let:builder>
-						It uses
+							<Button
-						<a
+								variant="link"
-							href="https://www.bits-ui.com/docs/components/dialog"
+								href="/"
-							class="underline"
+								builders={[builder]}
-							target="_blank"
+								class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
-						>
+								><Home class="mr-2" />Home</Button
-							Bits' Dialog primitive
+							>
-						</a>
+						</Drawer.Close>
-						under the hood and is inspired by
+						<Separator class="dark:bg-zinc-500" />
-						<a
+						<Drawer.Close asChild let:builder>
-							href="https://twitter.com/devongovett/status/1674470185783402496"
+							<Button
-							class="underline"
+								variant="link"
-							target="_blank"
+								href="/about"
-						>
+								builders={[builder]}
-							this tweet.
+								class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
-						</a>
+								><Person class="mr-2" />About Me</Button
-					</p>
+							>
+						</Drawer.Close>
+						<Separator class="dark:bg-zinc-500" />
+						<Drawer.Close asChild let:builder>
+							<Button
+								variant="link"
+								href="/portfolio"
+								builders={[builder]}
+								class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
+								><Backpack class="mr-2" />Portfolio</Button
+							>
+						</Drawer.Close>
+						<Separator class="dark:bg-zinc-500" />
+						<Drawer.Close asChild let:builder>
+							<Button
+								href="/blog"
+								variant="link"
+								builders={[builder]}
+								class="pl-2 text-4xl tracking-tight font-serif dark:text-zinc-200 w-min"
+								><File class="mr-2" />Blog</Button
+							>
+						</Drawer.Close>
+						<Separator class="h-1 rounded-3xl mt-1 dark:bg-zinc-500 my-2" />
+						<Drawer.Close asChild let:builder>
+							<Button
+								variant="outline"
+								class="bg-accent dark:border-zinc-500"
+								size="lg"
+								on:click={toggleMode}
+								builders={[builder]}
+							>
+								<Sun class="mr-4 dark:hidden" />
+								<Moon class="mr-4 hidden dark:block" />
+								Toggle Theme
+							</Button>
+						</Drawer.Close>
+					</div>
 				</div>
 				<div class="mx-auto mb-8 h-1.5 w-12 flex-shrink-0 rounded-full bg-zinc-300" />
 			</div>

src/lib/components/Navbar/Navbar.svelte

@@ -27,7 +27,7 @@
 	});
 </script>
 
-<nav class="h-20 bg-background bg-opacity-50 backdrop-blur-md fixed w-full z-40 font-display">
+<nav class="h-24 bg-background bg-opacity-50 backdrop-blur-md fixed w-full z-40 font-display">
 	<div class="container mx-auto flex justify-between items-center h-full gap-6 overflow-x-auto">
 		<Drawer />
 		{#if current === 'blog'}

src/lib/components/Socials.svelte

@@ -27,21 +27,37 @@
 </script>
 
 <div class="flex gap-2 mt-2 flex-wrap" class:justify-center={center}>
-	<Button variant="ghost" size="icon" href="https://github.com/couscousdude">
+	<Button
+		class="hover:scale-110 transition-transform"
+		variant="ghost"
+		size="icon"
+		href="https://github.com/couscousdude"
+	>
 		<GithubLogo />
 	</Button>
-	<Button variant="ghost" size="icon" href="https://www.instagram.com/uncle_uwon/"
+	<Button
-		><InstagramLogo /></Button
+		class="hover:scale-110 transition-transform"
+		variant="ghost"
+		size="icon"
+		href="https://www.instagram.com/uncle_uwon/"><InstagramLogo /></Button
 	>
-	<Button variant="ghost" size="icon" href="https://twitter.com/couscousdude"
+	<Button
-		><TwitterLogo /></Button
+		class="hover:scale-110 transition-transform"
+		variant="ghost"
+		size="icon"
+		href="https://twitter.com/couscousdude"><TwitterLogo /></Button
+	>
+	<Button
+		class="hover:scale-110 transition-transform"
+		variant="ghost"
+		size="icon"
+		href="https://www.linkedin.com/in/youwen-wu-306221288/>"
 	>
-	<Button variant="ghost" size="icon" href="https://www.linkedin.com/in/youwen-wu-306221288/>">
 		<LinkedinLogo />
 	</Button>
 	<Popover.Root>
 		<Popover.Trigger>
-			<Button variant="ghost" size="icon">
+			<Button class="hover:scale-110 transition-transform" variant="ghost" size="icon">
 				<DiscordLogo />
 			</Button>
 		</Popover.Trigger>
@@ -55,7 +71,7 @@
 	</Popover.Root>
 	<Popover.Root>
 		<Popover.Trigger>
-			<Button variant="ghost" size="icon">
+			<Button class="hover:scale-110 transition-transform" variant="ghost" size="icon">
 				<EnvelopeClosed />
 			</Button>
 		</Popover.Trigger>

src/routes/+layout.svelte

@@ -14,7 +14,7 @@
 <ModeWatcher />
 
 <Navbar />
-<div class="pt-20">
+<div class="pt-24">
 	<slot />
 </div>
 

src/routes/portfolio/+page.svelte

@@ -2,4 +2,10 @@
 	import UnderConstruction from '$lib/components/UnderConstruction.svelte';
 </script>
 
+<svelte:head>
+	<title>Youwen Wu | Portfolio</title>
+	<meta name="description" content="My personal website and blog." />
+	<meta name="author" content="Youwen Wu" />
+</svelte:head>
+
 <UnderConstruction />