src/routes/Navbar.svelte

@@ -2,41 +2,91 @@
 	import { page } from '$app/stores';
 	import { routes } from "$lib/sitemap.ts"
 	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
-	import { Rss } from "lucide-svelte";
+	import { Rss, Menu } from "lucide-svelte";
 
 	function isCurrentLink(pathname, route) {
 		return route != "/" && pathname.startsWith(route)
 			 || route == "/post" && pathname.startsWith("/page");
 	}
+
+	import { onMount } from 'svelte';
+
+	let showDropdown = false;
+
+	function onDropdownToggle(event) {
+		showDropdown = !showDropdown;
+	}
+	function onKeyDown(event) {
+		if (event.key == "Escape") {
+			showDropdown = !showDropdown;
+		}
+	}
 </script>
 
-<div id="navbar" class="h-5 space-x-4">
+<nav
+	id="navbar"
+	class="h-5 space-x-4"
+	class:dropdown-opened={showDropdown}>
+	<div
+		class="link-container"
+		on:click={() => { showDropdown = false; }}
+	>
 		{#each routes as item}
 			<a
 				class="nav-link"
 				class:disabled-link={item.disabled}
 				class:current-link={isCurrentLink($page.url.pathname, item.route)}
-			href={item.route}>{item.name}</a>
+				on:click={() => { showDropdown = false; }}
+				href={item.route}>
+				{item.name}
+			</a>
 		{/each}
 		<a class="nav-link icon" href="/rss.xml"><Rss /></a>
 		<div><ThemeSwitch /></div>
-</div>
+	</div>
+	<button
+		id="dropdown-toggle"
+		aria-hidden="true"
+		on:click={onDropdownToggle}>
+		<Menu />
+	</button>
+</nav>
+
+<svelte:window on:keydown={onKeyDown} />
 
 <style>
-	#bio-name {
+	.link-container {
-		font-family: serif;
-		font-size: 3rem;
-		font-weight: normal;
-		color: var(--name);
-	}
-	#navbar {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-end;
 		position: sticky;
 		top: 0;
 	}
-	@media (max-width: 700px) {
+	#dropdown-toggle {
+		display: none;
+	}
+
+	/* mobile mode */
+	@media (max-width: 768px) {
+		.link-container {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			height: 100vh;
+			justify-content: center;
+
+			margin: 0;
+			padding-left: 5vw;
+			padding-right: 5vw;
+
+			background: hsl(var(--background) / .8);
+
+			/* Initial hidden state */
+			opacity: 0;
+			transform: translateY(-100%);
+			transition: transform 0.2s, opacity 0.2s;
+		}
 		#navbar {
 			display: inline-block;
 			white-space: pre-wrap;
@@ -44,5 +94,14 @@
 		#navbar .nav-link {
 			display: inline-block;
 		}
+		#dropdown-toggle {
+			display: initial;
+			z-index: 5;
+		}
+		.dropdown-opened > .link-container {
+			opacity: 1;
+			z-index: 1;
+			transform: translateY(0);
+		}
 	}
 </style>