Simple responsive nav bar

src/routes/+layout.svelte

@@ -1,14 +1,59 @@
 <script lang="ts">
     import MediaQuery from 'svelte-media-queries';
 
-    const mobileThreshold : string = '1000px';
-    let mobile : boolean;
+    const footerCollapseThreshold : string = '1000px';
+    const headerCollapseThreshold : string = '1000px';
+    let footerCollapse : boolean;
+    let headerCollapse : boolean;
+
+    let navbarHidden : boolean = true;
+
+    function resetNavBar() {
+        navbarHidden = true;
+    }
 </script>
 
 <!-- Detect mobile -->
-<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
+<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
+<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={headerCollapse} />
 
 <!-- Nav bar -->
+<header>
+    <div class="nav-bar">
+        {#if !headerCollapse}
+            <div class="desktop">
+                <a href="/" class="nav-head">
+                    <img id="logo-link" src="/images/logo.png" alt="The Deprived Devs Logo"/>
+                    <h3 id="logo-text">The Deprived Devs</h3>
+                </a>
+                <div class="nav-spacer" />
+                <a href="/">Home</a>
+                <a href="/games">Games</a>
+                <a href="/post">Blog</a>
+                <a href="/about">About</a>
+            </div>
+        {:else}
+            <div class="collapsed">
+                    <a on:click={resetNavBar} href="/" class="nav-head">
+                        <img id="logo-link" src="/images/logo.png" alt="The Deprived Devs Logo"/>
+                        <h3 id="logo-text">The Deprived Devs</h3>
+                    </a>
+                    <div class="nav-spacer" />
+                    <button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
+                        <img src="/images/icons/hamburger_menu.svg" alt="Toggle Navigation Bar" />
+                    </button>
+            </div>
+            {#if !navbarHidden}
+                <div class="nav-list">
+                    <a on:click={resetNavBar} href="/">Home</a>
+                    <a on:click={resetNavBar} href="/games">Games</a>
+                    <a on:click={resetNavBar} href="/post">Blog</a>
+                    <a on:click={resetNavBar} href="/about">About</a>
+                </div>
+            {/if}
+        {/if}
+    </div>
+</header>
 
 <!-- Page content -->
 <slot />
@@ -46,18 +91,105 @@
 
 
 <style>
+    /* Nav bar. */
+    header {
+        display: flex;
+        justify-content: center;
+    }
+
+    .nav-bar {
+        width: 100%;
+        max-width: 1400px;
+    }
+
+    .desktop {
+        width: 100%;
+        display: flex;
+        gap: 30px;
+    }
+
+    .collapsed {
+        width: 100%;
+        display: flex;
+        gap: 30px;
+    }
+
+    #toggle-nav {
+        background: transparent;
+        border: none;
+
+    }
+
+    #toggle-nav > img {
+        transition: filter 200ms;
+        filter: invert(0%);
+    }
+
+    #toggle-nav > img:hover {
+        transition: filter 200ms ease-out;
+        filter: invert(100%);
+    }
+
+    #toggle-nav > img:hover {
+        fill: var(--primary);
+    }
+
+    .nav-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        align-items: center;
+    }
+
+    .nav-head {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+    }
+
+    #logo-link {
+        width: 64px;
+        aspect-ratio: 1 / 1;
+    }
+
+    #logo-text {
+        font-size: 24px;
+        color: var(--text2);
+        font-family: var(--title-font);
+        margin: 0;
+
+        min-width: 200px;
+    }
+
+    .nav-spacer {
+        width: 100%;
+    }
+
+    header a {
+        display: flex;
+        align-items: center;
+
+        font-size: 22px;
+        font-family: var(--title-font);
+        color: var(--text2);
+    }
+
+    /* Footer. */
     footer {
         margin-top: 50px;
-        padding: 25px 0 25px;
-        height: 100%;
+        padding: 25px 0;
         background-color: var(--background1);
 
+        height: 100%;
+
         display: flex;
         justify-content: center;
     }
 
     .about-container {
         width: 80%;
+        height: 100%;
 
         color: var(--text2);
 
@@ -90,12 +222,12 @@
         width: 24px;
     }
 
-    h3 {
+    footer h3 {
         margin-top: 0px;
         color: var(--text2);
     }
 
-    a {
+    footer a {
         color: var(--text2);
         text-decoration-line: underline;
     }
@@ -105,7 +237,7 @@
     }
 </style>
 
-{#if mobile}
+{#if footerCollapse}
     <style>
         .about-container {
             flex-direction: column;
@@ -114,3 +246,9 @@
         }
     </style>
 {/if}
+
+{#if headerCollapse}
+    <style>
+
+    </style>
+{/if}

src/routes/games/+page.svelte

@@ -0,0 +1 @@
+WIP