add navbar, transitions, styles, & icons

ehanahamed · Feb 4, 2025 · 1358015 · 1358015
1 parent 18eb1ff
commit 1358015
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/web/src/lib/components/Header.svelte b/web/src/lib/components/Header.svelte
@@ -1,8 +1,24 @@
 <script>
     import Searchbar from "$lib/components/Searchbar.svelte";
     import { page } from '$app/state';
+    import { fly } from 'svelte/transition';
 
+    import IconMenu from "$lib/icons/Menu.svelte";
     import IconUser from "$lib/icons/User.svelte";
+    import IconCloseXMark from "$lib/icons/CloseXMark.svelte";
+    import { afterNavigate } from "$app/navigation";
+
+    let sideBarNavMenuThingyVisible = $state(false);
+    function openSideBarNavMenuThingy() {
+      sideBarNavMenuThingyVisible = true;
+      //document.body.addEventListener("click", closeSideBarNavMenuThingy);
+    }
+    function closeSideBarNavMenuThingy() {
+      sideBarNavMenuThingyVisible = false;
+    }
+    afterNavigate(function () {
+      closeSideBarNavMenuThingy();
+    })
 </script>
 
 <style>
@@ -12,10 +28,27 @@
 .current {
   transition-duration: 0.4s;
 }
+.side-bar-nav-menu-thingy {
+  margin: 0px;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 1rem;
+  background-color: var(--bg1);
+}
 </style>
 
 <header class="navbar with-search with-status">
     <div class="menu nav">
+      <div class="side-bar-nav-menu-thingy-open-div">
+        <button class="icon-only-button side-bar-nav-menu-thingy-open-button" onclick={openSideBarNavMenuThingy} aria-label="Menu">
+          <IconMenu />
+        </button>
+      </div>
       <div class={
         (page.data?.header?.activePage == "home") ? "current" : ""
       }>
@@ -78,3 +111,15 @@
         {/if}
     </div>
 </header>
+{#if sideBarNavMenuThingyVisible}
+<div class="side-bar-nav-menu-thingy" transition:fly={{ x: -200, duration: 240 }}>
+  <button class="icon-only-button" onclick={closeSideBarNavMenuThingy} aria-label="Close Menu">
+    <IconCloseXMark />
+  </button>
+  <a href="/home">Home</a>
+  <a href="/explore">Explore</a>
+  <a href="/settings">Settings</a>
+  <a href="/abc">Nothing</a>
+  <a href="/search">Search</a>
+</div>
+{/if}
diff --git a/web/src/lib/icons/CloseXMark.svelte b/web/src/lib/icons/CloseXMark.svelte
@@ -0,0 +1,4 @@
+<script>
+    let { width = "1rem", height = "1rem", ...props } = $props();
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 384 512" class={props.class}><path fill="currentcolor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4z"/></svg>
diff --git a/web/src/lib/icons/Menu.svelte b/web/src/lib/icons/Menu.svelte
@@ -0,0 +1,4 @@
+<script>
+    let { width = "1rem", height = "1rem", ...props } = $props();
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 448 512" class={props.class}><path fill="currentcolor" d="M0 96c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm448 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32 14.3 32 32z"/></svg>