Better organization!

src/lib/Header/Header.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import WideNav from "./WideNav.svelte";
+    import NarrowNav from "./NarrowNav.svelte";
+
+    import MobileHamburgerNav from "./MobileHamburgerNav.svelte";
+
+    export let headerHeight: Number = 0;
+
+    // Track the full header size, including margin, to allow parent components to size themselves correctly.
+    let headerElement: HTMLElement;
+    onMount(() => {
+        const updateHeight = () => {
+            const contentHeight = headerElement.getBoundingClientRect().height;
+            const style = getComputedStyle(headerElement);
+            const marginTop = parseFloat(style.marginTop);
+            const marginBottom = parseFloat(style.marginBottom);
+            headerHeight = contentHeight + marginTop + marginBottom;
+        };
+        updateHeight();
+
+        window.addEventListener("resize", updateHeight);
+
+        return () => {
+            window.removeEventListener("resize", updateHeight);
+        };
+    });
+</script>
+
+<header bind:this={headerElement}>
+    <h1><span>Glenn</span> <span>Sweeney</span></h1>
+
+    <div class="gap"></div>
+
+    <div class="wide-nav-container">
+        <WideNav />
+    </div>
+
+    <div class="narrow-nav-container">
+        <NarrowNav />
+        <!-- <MobileHamburgerNav /> -->
+    </div>
+</header>
+
+<style>
+    header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 1.5rem;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    h1 {
+        margin: 0;
+        padding: 0;
+        display: block;
+    }
+
+    span {
+        display: inline-block; /* required for ::first-letter to work */
+    }
+
+    span::first-letter {
+        font-variation-settings: "wght" 400;
+    }
+
+    /* Responsive Width */
+
+    .wide-nav-container {
+        display: block;
+    }
+
+    .narrow-nav-container {
+        display: none;
+    }
+
+    /* Media query for tablets */
+    @media (max-width: 48rem) {
+        /* Hide desktop nav and show mobile nav */
+        .wide-nav-container {
+            display: none;
+        }
+
+        .narrow-nav-container {
+            display: block;
+        }
+    }
+</style>

src/lib/Header/NarrowNav.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import NavContents from "./NavContents.svelte";
+    import { createDropdownMenu, melt } from "@melt-ui/svelte";
+
+    const {
+        elements: { trigger, menu, item },
+        states: { open }
+    } = createDropdownMenu({
+        positioning: {
+            placement: "bottom-end"
+        },
+        loop: true
+    });
+</script>
+
+<button use:melt={$trigger}>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+        ><path d="M0 0h24v24h-24z" fill="none" /><path
+            d="M4 6h16v2h-16v-2zm0 5h16v2h-16v-2zm16 7h-16v-2h16v2z"
+        /></svg
+    >
+</button>
+{#if open}
+    <nav use:melt={$menu} class="responsive-narrow">
+        <NavContents paddingDirection="v" />
+    </nav>
+{/if}
+
+<style>
+    svg {
+        width: 2rem;
+        height: 2rem;
+        display: block;
+    }
+
+    button {
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+    }
+
+    nav {
+        border-color: var(--border-color);
+        border: 1px solid;
+        border-radius: 8px;
+    }
+
+    .responsive-narrow {
+        display: none;
+    }
+
+    /* Media query for tablets */
+    @media (max-width: 48rem) {
+        .responsive-narrow {
+            display: block;
+        }
+    }
+</style>

src/lib/Header/NavContents.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    export let paddingDirection: string = "h";
+</script>
+
+<ul class={paddingDirection}>
+    <li><a href="/">Home</a></li>
+    <li><a href="/engineering">Engineering</a></li>
+    <li><a href="/photography">Photography</a></li>
+    <li><a href="/contact">Contact</a></li>
+</ul>
+
+<style>
+    a {
+        display: inline-block; /* required for ::first-letter to work */
+        text-decoration: none; /* Remove underline */
+        color: var(--font-color);
+        font-variant: small-caps;
+        font-size: 1.2rem;
+        font-variation-settings:
+            "wdth" 100,
+            "wght" 350;
+    }
+
+    a::first-letter {
+        font-variation-settings: "wght" 400;
+    }
+
+    ul {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    ul.h {
+        flex-direction: row;
+    }
+
+    ul.v {
+        flex-direction: column;
+    }
+
+    li {
+        border-radius: 4px;
+        padding: 0.25rem 0.25rem 0.25rem 0.25rem;
+        margin: 0.25rem;
+    }
+
+    ul.v li + li {
+        margin-top: 0.25rem;
+    }
+
+    ul.h li + li {
+        margin-left: 0.5rem;
+    }
+
+    li:hover {
+        background-color: var(--layer1-color);
+    }
+</style>

src/lib/Header/WideNav.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import NavContents from "./NavContents.svelte";
+</script>
+
+<nav>
+    <NavContents paddingDirection="h" />
+</nav>

src/routes/+layout.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-    import Header from "$lib/Header.svelte";
+    import Header from "$lib/Header/Header.svelte";
     import Footer from "$lib/Footer.svelte";
-    import { headerHeight } from "../stores/header";
+    import { headerHeight } from "$lib/Header/header";
     import { get } from "svelte/store";
 
-    let usedHeight = get(headerHeight);
+    let usedHeight: Number; // = get(headerHeight);
     let contentHeight;
 
-    $: headerHeight.subscribe((value) => {
-        usedHeight = value;
-    });
+    // $: headerHeight.subscribe((value) => {
+    //     usedHeight = value;
+    // });
 
     $: contentHeight = "calc(100vh - " + usedHeight + "px)";
 </script>
@@ -24,7 +24,7 @@
     />
 </svelte:head>
 
-<Header />
+<Header bind:qqq={usedHeight} />
 <div class="mainpage-sizer" style="min-height: {contentHeight};">
     <slot />
 </div>