feat: update mobile header styles and behavior

src/lib/components/Header.svelte

@@ -1,16 +1,45 @@
 <script lang="ts">
 	import type { Header } from '$lib/types/data';
+	import favicon from '$lib/assets/favicon.svg';
+	import { Menu, X } from '@lucide/svelte';
 
 	let { links }: Header = $props();
+
+	let isMobileMenuOpen = $state(false);
+
+	const setIsMobileMenuOpen = (value: boolean) => {
+		isMobileMenuOpen = value;
+	};
 </script>
 
 <header>
-	<nav>
+
+	<nav class:mobile-open={isMobileMenuOpen}>
+		<div>
+			<span class="icon">
+				<img src={favicon} alt="">
+			</span>
+
+			<!-- open menu -->
+			<button class:hide={isMobileMenuOpen} onclick={() => setIsMobileMenuOpen(true)}>
+				<span class="icon">
+					<Menu class="icon" />
+				</span>
+			</button>
+
+			<!-- close menu -->
+			<button class:hide={!isMobileMenuOpen} onclick={() => setIsMobileMenuOpen(false)}>
+				<span class="icon">
+					<X class="icon" />
+				</span>
+			</button>
+		</div>
+
 		<ul>
 			{#each links as { href, label }, i (i)}
 				<li>
 					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-					<a href={href}>{label}</a>
+					<a href={href} onclick={() => setIsMobileMenuOpen(false)}>{label}</a>
 				</li>
 			{/each}
 		</ul>
@@ -19,53 +48,78 @@
 
 <style>
     header {
-        position: fixed;
+        position: sticky;
-				inset-inline: 0;
+        top: 0;
-        bottom: 2rem;
+        bottom: unset;
+        inset-inline: 0;
         z-index: var(--z-index-header);
 
-        width: fit-content;
+        width: auto;
         padding: 1rem;
-				margin-inline: auto;
 
-				border: 1px solid var(--color-header-border);
+        border-bottom: 1px solid var(--color-header-border);
-				border-radius: 0.5rem;
+        border-radius: unset;
 
-				font-size: 0.75rem;
+        font-size: 1.125rem;
-				font-weight: bold;
+        font-weight: bold;
 
         background-color: var(--color-header-background);
         backdrop-filter: blur(1rem);
+    }
 
+    div {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 2rem;
+        padding-inline: 0.5rem;
 
         @media (min-width: 768px) {
-						position: sticky;
+            display: none;
-            top: 0;
-						bottom: unset;
-
-            width: auto;
-            padding: 1rem;
-
-						border: unset;
-            border-bottom: 1px solid var(--color-header-border);
-						border-radius: unset;
-
-						font-size: 1.125rem;
         }
     }
 
+    button {
+        border: unset;
+        background: unset;
+        color: inherit;
+        font-size: inherit;
+        cursor: pointer;
+    }
+
+    .hide {
+        display: none;
+    }
+
     ul {
-        display: flex;
+        display: none;
+        flex-direction: column;
         justify-content: center;
-        align-items: center;
+        align-items: stretch;
         gap: 0.5rem;
 
         margin: unset;
         padding: unset;
         list-style: none;
 
-				@media (min-width: 768px) {
+        @media (min-width: 768px) {
-						gap: 2rem;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 2rem;
+        }
+    }
+
+    nav.mobile-open ul {
+        display: flex;
+        margin-top: 1rem;
+        padding-top: 1rem;
+        border-top: 1px solid var(--color-header-border);
+
+        @media (min-width: 768px) {
+            margin-top: unset;
+            padding-top: unset;
+            border-top: unset;
         }
     }
 
@@ -74,9 +128,9 @@
     }
 
     a {
-				padding: 0.5rem;
+        padding: 0.5rem;
         color: var(--color-text-primary);
-				text-decoration: none;
+        text-decoration: none;
         transition: ease-in-out 0.2s;
 
         &:hover {