From 8be8fb9b606617af112b0d1a1d510a248f467844 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Thu, 1 May 2025 10:50:37 -0400
Subject: [PATCH] nav drawer closes on navigation

---
 src/lib/components/Footer.svelte | 23 ---------
 src/lib/components/Hero.svelte   |  4 +-
 src/routes/+layout.svelte        | 53 ++++++++++++++++-----
 src/routes/+page.svelte          | 82 ++++++++++++++++----------------
 4 files changed, 83 insertions(+), 79 deletions(-)
 delete mode 100644 src/lib/components/Footer.svelte

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
deleted file mode 100644
index f0c7f77..0000000
--- a/src/lib/components/Footer.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	interface Props {
-		links: {
-			name: string;
-			href: string;
-		}[];
-	}
-
-	let { links }: Props = $props();
-</script>
-
-<div class="flex justify-between text-xs lg:text-lg">
-	<div class="flex gap-2 lg:gap-8">
-		{#each links as link (link.href)}
-			<a
-				href={link.href}
-				target="_blank"
-				class="hover:text-base-content text-slate-600 transition-colors">{link.name}</a
-			>
-		{/each}
-	</div>
-	<p class="text-slate-600">© 2025 Benjamin Palko</p>
-</div>
diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
index 5d09cea..d965d2a 100644
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@@ -13,7 +13,7 @@
 
 <div class="hero bg-base-200">
 	<div class="hero-content">
-		<div class="flex max-w-5xl gap-12">
+		<div class="flex flex-col gap-12 lg:flex-row">
 			<div class="flex-0">
 				<div class="avatar">
 					<div
@@ -32,7 +32,7 @@
 				<p class="block py-6">
 					{description}
 				</p>
-				<div class="flex justify-end gap-4">
+				<div class="flex flex-col gap-2 lg:flex-row lg:justify-end lg:gap-4">
 					<a href="/resume" class="btn btn-outline btn-primary btn-wide">Resume</a>
 					<a href="/contact" class="btn btn-primary btn-wide">Contact</a>
 				</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ba2f666..8d42f29 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { page } from '$app/state';
-	import Footer from '$lib/components/Footer.svelte';
+	import { goto } from '$app/navigation';
+	import { navigating, page } from '$app/state';
 	import Navbar from '$lib/components/Navbar.svelte';
 	import '../app.css';
 
 	let { children } = $props();
 
+	let drawerOpen = $state(false);
+
+	if (navigating) {
+		drawerOpen = false;
+	}
+
 	const pages = [
 		{ slug: '/', name: 'About Me' },
 		{ slug: '/resume', name: 'Resume' },
@@ -24,25 +30,38 @@
 </script>
 
 <div class="drawer drawer-end">
-	<input id="navigation-drawer" type="checkbox" class="drawer-toggle" />
+	<input id="navigation-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
 
 	<div class="drawer-content h-screen w-screen lg:p-12">
 		<div
-			class=" bg-base-200 grid min-h-full grid-rows-[max-content_max-content_auto_max-content] lg:rounded-4xl"
+			class="bg-base-200 grid min-h-full grid-rows-[max-content_max-content_auto_max-content] overflow-hidden lg:gap-4 lg:rounded-4xl"
 		>
-			<header class="lg:p-8">
+			<header class="lg:p-6">
 				<Navbar drawerId="navigation-drawer" title="Benjamin Palko" {pages} route={page.route} />
 			</header>
-			{#if current && current.slug !== '/'}
-				<div class="bg-base-300 w-full px-6 py-4 lg:px-12 lg:py-8">
-					<h1 class="text-2xl font-light lg:text-4xl">{current.name}</h1>
-				</div>
-			{/if}
+			<div>
+				{#if current && current.slug !== '/'}
+					<div class="bg-base-300 w-full px-6 py-4 lg:px-12 lg:py-8">
+						<h1 class="text-2xl font-light lg:text-4xl">{current.name}</h1>
+					</div>
+				{/if}
+			</div>
 			<main>
 				{@render children()}
 			</main>
-			<footer class="p-8">
-				<Footer links={socialLinks} />
+			<footer class="p-2 lg:p-6">
+				<div class="flex justify-between text-xs lg:text-lg">
+					<div class="flex gap-2 lg:gap-8">
+						{#each socialLinks as link (link.href)}
+							<a
+								href={link.href}
+								target="_blank"
+								class="hover:text-base-content text-slate-600 transition-colors">{link.name}</a
+							>
+						{/each}
+					</div>
+					<p class="text-slate-600">© 2025 Benjamin Palko</p>
+				</div>
 			</footer>
 		</div>
 	</div>
@@ -51,7 +70,15 @@
 		<label for="navigation-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
 		<ul class="menu bg-base-200 flex min-h-full w-full flex-col-reverse gap-4 p-4">
 			{#each pages as page (page.slug)}
-				<li><a href={page.slug} class="btn btn-primary btn-lg">{page.name}</a></li>
+				<li>
+					<button
+						class="btn btn-primary btn-lg"
+						onclick={() => {
+							goto(page.slug);
+							drawerOpen = false;
+						}}>{page.name}</button
+					>
+				</li>
 			{/each}
 			<label for="navigation-drawer" class="btn btn-error btn-lg">Close</label>
 		</ul>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a75f348..cdd00ec 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,8 +6,8 @@
 		'Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.';
 </script>
 
-<div class="flex flex-col px-12">
-	<div class="py-48">
+<div class="flex flex-col items-center px-12">
+	<div class="lg:py-48">
 		<Hero
 			photo="/yeet-winter.jpg"
 			titles={['Software Engineer', 'Game Developer']}
@@ -15,48 +15,48 @@
 			{description}
 		/>
 	</div>
-	<div>
-		<h2 class="py-8 text-xl">What I Do</h2>
-		<div class="grid grid-cols-2 gap-8">
-			<div class="flex gap-4">
-				<Braces size={48} class="text-primary" />
-				<div class="flex flex-col">
-					<h3 class="text-xl">Web Development</h3>
-					<p class="max-w-2xl">
-						Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
-						pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
-					</p>
-				</div>
+	<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+		<div class="col-span-full">
+			<h2 class="border-primary w-fit border-b text-2xl font-light">What I Do</h2>
+		</div>
+		<div class="flex flex-col gap-4 lg:flex-row">
+			<Braces size={48} class="text-primary" />
+			<div class="flex flex-col">
+				<h3 class="text-xl">Web Development</h3>
+				<p class="max-w-2xl">
+					Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
+					pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
+				</p>
 			</div>
-			<div class="flex gap-4">
-				<Gamepad2 size={48} class="text-primary" />
-				<div class="flex flex-col">
-					<h3 class="text-xl">Video Game Development</h3>
-					<p class="max-w-2xl">
-						Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
-						pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
-					</p>
-				</div>
+		</div>
+		<div class="flex flex-col gap-4 lg:flex-row">
+			<Gamepad2 size={48} class="text-primary" />
+			<div class="flex flex-col">
+				<h3 class="text-xl">Video Game Development</h3>
+				<p class="max-w-2xl">
+					Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
+					pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
+				</p>
 			</div>
-			<div class="flex gap-4">
-				<MonitorCog size={48} class="text-primary" />
-				<div class="flex flex-col">
-					<h3 class="text-xl">Linux Ricing</h3>
-					<p class="max-w-2xl">
-						Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
-						pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
-					</p>
-				</div>
+		</div>
+		<div class="flex flex-col gap-4 lg:flex-row">
+			<MonitorCog size={48} class="text-primary" />
+			<div class="flex flex-col">
+				<h3 class="text-xl">Linux Ricing</h3>
+				<p class="max-w-2xl">
+					Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
+					pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
+				</p>
 			</div>
-			<div class="flex gap-4">
-				<HeartHandshake size={48} class="text-primary" />
-				<div class="flex flex-col">
-					<h3 class="text-xl">Open-Source Development</h3>
-					<p class="max-w-2xl">
-						Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
-						pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
-					</p>
-				</div>
+		</div>
+		<div class="flex flex-col gap-4 lg:flex-row">
+			<HeartHandshake size={48} class="text-primary" />
+			<div class="flex flex-col">
+				<h3 class="text-xl">Open-Source Development</h3>
+				<p class="max-w-2xl">
+					Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
+					pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
+				</p>
 			</div>
 		</div>
 	</div>