Fix Menu Position (#18)

src/lib/Header/Header.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import WideNav from "./WideNav.svelte";
+    import NarrowNav from "./NarrowNav.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,62 @@
+<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
+    });
+
+    console.log(item);
+</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 element={item} paddingDirection="v" --hover-color="var(--bg-color)" />
+    </nav>
+{/if}
+
+<style>
+    svg {
+        width: 2rem;
+        height: 2rem;
+        display: block;
+    }
+
+    button {
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+    }
+
+    nav {
+        background-color: var(--layer1-color);
+        border-radius: 8px;
+        padding: 0.5rem;
+    }
+
+    .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,66 @@
+<script lang="ts">
+    import { type AnyMeltElement, emptyMeltElement, melt } from "@melt-ui/svelte";
+
+    export let paddingDirection: string = "h";
+
+    // See https://github.com/melt-ui/melt-ui/issues/974 - as of 7/4/2024 this workaround is necessary.
+    export let element: AnyMeltElement | undefined = undefined;
+    $: meltElement = element ?? emptyMeltElement;
+</script>
+
+<ul class={paddingDirection}>
+    <li use:melt={$meltElement}><a href="/">Home</a></li>
+    <li use:melt={$meltElement}><a href="/engineering">Engineering</a></li>
+    <li use:melt={$meltElement}><a href="/photography">Photography</a></li>
+    <li use:melt={$meltElement}><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.5rem 0.25rem 0.5rem;
+        margin: 0.25rem;
+    }
+
+    ul.v li + li {
+        margin-top: 0.25rem;
+    }
+
+    ul.h li + li {
+        margin-left: 0.5rem;
+    }
+
+    li:hover {
+        background-color: var(--hover-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" --hover-color="var(--layer1-color)" />
+</nav>