feat: ✨ hamburger menu sidebar for mobile

icssc · Dec 25, 2023 · a6cd872 · a6cd872
1 parent 7537275
commit a6cd872
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 11 deletions.
diff --git a/src/lib/components/Header/Header.svelte b/src/lib/components/Header/Header.svelte
@@ -1,4 +1,14 @@
-<script>
+<script lang="ts">
+  import { getDrawerStore } from "@skeletonlabs/skeleton";
+
+  let hamburger: boolean = true;
+
+  const drawerStore = getDrawerStore();
+
+  const openDrawer = () => {
+    drawerStore.open();
+    console.log("open");
+  };
 </script>
 
 <!-- Header for the app -->
@@ -13,5 +23,15 @@
         <div class="text-2xl font-bold">ZotMeet</div>
       </div>
     </div>
+    <!-- Hamburger -->
+    {#if hamburger}
+      <button on:click={openDrawer}>
+        <img
+          src="https://via.placeholder.com/50"
+          alt="Hamburger icon"
+          class="h-10 w-10 mr-1 mt-auto mb-auto"
+        />
+      </button>
+    {/if}
   </div>
 </header>
diff --git a/src/lib/components/SideBar/SideBar.svelte b/src/lib/components/SideBar/SideBar.svelte
@@ -1,12 +1,9 @@
-<script>
+<script lang="ts">
   import SideBarFooter from "./SideBarFooter.svelte";
   import SideBarLink from "./SideBarLink.svelte";
 </script>
 
-<div
-  id="sidebar"
-  class="flex flex-col outline-slate-100 w-64 absolute right-0 top-0 h-full rounded card outline-5"
->
+<div id="sidebar" class="flex flex-col outline-slate-100 rounded card outline-5 h-full w-full">
   <div class="user-info flex justify-left gap-2 m-3 ml-4">
     <img src="user-icon.png" alt="User Icon" class="user-icon rounded-full w-1/5" />
     <div class="user-name align-text-bottom flex-col content-center justify-center inline-grid">

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,14 +1,47 @@
-<script>
+<script lang="ts">
   import "../app.pcss";
+  import { Drawer, initializeStores } from "@skeletonlabs/skeleton";
+  import { onMount } from "svelte";
+
   import Header from "$lib/components/Header";
   import SideBar from "$lib/components/SideBar";
+
+  $: activateHamburger = true;
+  let appContainer: HTMLElement; // To listen to resize events
+
+  onMount(() => {
+    const reiszeObserver = new ResizeObserver((entries) => {
+      // Only listen to the app container
+      const entry = entries[0];
+      activateHamburger = entry.contentRect.width < 768;
+      console.log("activateHamburger: ", activateHamburger);
+    });
+
+    reiszeObserver.observe(appContainer);
+
+    return () => {
+      reiszeObserver.disconnect();
+    };
+  });
+
+  initializeStores(); // Should be called only once
 </script>
 
-<div id="app-container">
-  <Header />
-  <aside id="sidebar-container">
+{#if activateHamburger}
+  <Drawer position="right">
     <SideBar />
-  </aside>
+  </Drawer>
+{/if}
+
+<div id="app-container" bind:this={appContainer} class="h-screen w-screen">
+  <Header />
+
+  {#if !activateHamburger}
+    <aside id="sidebar-container" class="absolute right-0 top-0 w-64 h-screen">
+      <SideBar />
+    </aside>
+  {/if}
+
   <slot />
 </div>