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';
+    const footerCollapseThreshold : string = '1000px';
-    let mobile : boolean;
+    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;
+        padding: 25px 0;
-        height: 100%;
         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

static/images/icons/hamburger_menu.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="20"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 28 20"
+   width="28"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><path
+     d="M 2,4 H 26 C 27.104,4 28,3.104 28,2 28,0.896 27.104,0 26,0 H 2 C 0.896,0 0,0.896 0,2 0,3.104 0.896,4 2,4 Z M 26,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z m 0,8 H 2 c -1.104,0 -2,0.896 -2,2 0,1.104 0.896,2 2,2 h 24 c 1.104,0 2,-0.896 2,-2 0,-1.104 -0.896,-2 -2,-2 z"
+     id="path1"
+     style="fill:#ffffff;fill-opacity:1" /></svg>

static/stylesheets/global.css

@@ -6,6 +6,10 @@
     url("/fonts/CozetteVector.ttf") format("truetype");
 }
 
+html {
+    background: var(--background1);
+}
+
 body {
     font-family: var(--main-font);
     color: var(--text1); /* Default to primary text color. */