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,45 +48,54 @@
 
 <style>
     header {
-        position: fixed;
-				inset-inline: 0;
-        bottom: 2rem;
-        z-index: var(--z-index-header);
-
-        width: fit-content;
-        padding: 1rem;
-				margin-inline: auto;
-
-				border: 1px solid var(--color-header-border);
-				border-radius: 0.5rem;
-
-				font-size: 0.75rem;
-				font-weight: bold;
-
-        background-color: var(--color-header-background);
-        backdrop-filter: blur(1rem);
-
-
-        @media (min-width: 768px) {
         position: sticky;
         top: 0;
         bottom: unset;
+        inset-inline: 0;
+        z-index: var(--z-index-header);
 
         width: auto;
         padding: 1rem;
 
-						border: unset;
         border-bottom: 1px solid var(--color-header-border);
         border-radius: unset;
 
         font-size: 1.125rem;
+        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) {
+            display: none;
         }
     }
 
+    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;
@@ -65,10 +103,26 @@
         list-style: none;
 
         @media (min-width: 768px) {
+            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;
+        }
+    }
+
     li {
         display: contents;
     }