feat: create app drawer

src/lib/components/Header/Header.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { getDrawerStore } from "@skeletonlabs/skeleton";
+
+  import HamburgerMenu from "~icons/material-symbols/menu-rounded";
+
+  export let hamburger: boolean;
+
+  const drawerStore = getDrawerStore();
+
+  const openDrawer = () => {
+    drawerStore.open();
+  };
+</script>
+
+<!-- Header for the app -->
+
+<header class="h-16 bg-white">
+  <div class="flex flex-row justify-between h-full">
+    <img src="/icon.png" class="h-10 w-10 rounded-full" alt="ZotMeet icon" />
+    <div class="text-4xl font-bold ml-10 mt-auto mb-auto">ZotMeet</div>
+    <!-- Hamburger -->
+    {#if hamburger}
+      <button on:click={openDrawer}>
+        <HamburgerMenu class="h-12 w-12" />
+      </button>
+    {:else}
+      <div
+        id="user-info-container"
+        class="flex flex-row justify-end gap-2 mr-4 mt-auto mb-auto ml-auto w-64"
+      >
+        <div
+          id="user-name-container"
+          class="align-text-bottom flex-col content-center justify-center inline-grid"
+        >
+          <span class="text-lg align-text-bottom h-full">Peter Anteater</span>
+        </div>
+        <img src="user-icon.png" alt="User Icon" class="user-icon rounded-full w-12 h-12" />
+      </div>
+    {/if}
+  </div>
+</header>

src/lib/components/Header/index.ts

@@ -0,0 +1 @@
+export { default } from "./Header.svelte";

src/lib/components/SideBar/SideBar.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { getDrawerStore } from "@skeletonlabs/skeleton";
+
+  import SideBarFooter from "./SideBarFooter.svelte";
+  import SideBarLink from "./SideBarLink.svelte";
+
+  import CalendarIcon from "~icons/material-symbols/calendar-clock";
+  import CloseIcon from "~icons/material-symbols/close-rounded";
+  import SettingsIcon from "~icons/material-symbols/settings-rounded";
+
+  export let displayCloseButton = false;
+
+  const drawerStore = getDrawerStore();
+
+  const closeDrawer = drawerStore.close;
+</script>
+
+<div
+  id="sidebar"
+  class="flex flex-col bg-secondary-400 outline-secondary-800 rounded-l-lg rounded-r-none card outline-5 h-full w-full"
+>
+  <div id="sidebar-links" class="flex flex-col">
+    {#if displayCloseButton}
+      <div class="w-full flex flex-row justify-end">
+        <button class="p-2 ml-auto" on:click={closeDrawer}>
+          <CloseIcon class="h-12 w-12" />
+        </button>
+      </div>
+    {/if}
+    <SideBarLink Icon={CalendarIcon} label="Summary" href="/summary" />
+    <SideBarLink Icon={SettingsIcon} label="Settings" href="/settings" />
+  </div>
+
+  <div id="sidebar-footer-container" class="mt-auto m-2">
+    <SideBarFooter />
+  </div>
+</div>

src/lib/components/SideBar/SideBarFooter.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { LightSwitch } from "@skeletonlabs/skeleton";
+</script>
+
+<div id="sidebar-footer" class="flex flex-row justify-between">
+  <LightSwitch class="mt-auto mb-auto" />
+  <a href="https://google.com" class="mt-auto mb-auto">Feedback</a>
+  <a href="https://google.com" class="mt-auto mb-auto">About</a>
+</div>

src/lib/components/SideBar/SideBarLink.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { getDrawerStore } from "@skeletonlabs/skeleton";
+
+  /**
+   * Should be an SVG icon from Iconify `~icons/material-symbols`
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export let Icon: any;
+  export let label: string;
+  export let href: string;
+
+  const closeDrawer = getDrawerStore().close;
+</script>
+
+<a id="sidebar-link-{label}" {href} on:click={closeDrawer}>
+  <div
+    class="flex flex-row whitespace-nowrap hover:bg-secondary-500 w-full gap-4 p-5 lg:p-3 rounded-lg"
+  >
+    <Icon class="w-14 h-14 lg:w-10 lg:h-10 ml-3" />
+    <span class="text-2xl lg:text-xl mt-auto mb-auto">{label}</span>
+  </div>
+</a>

src/lib/components/SideBar/index.ts

@@ -0,0 +1 @@
+export { default } from "./SideBar.svelte";

src/routes/+layout.svelte

@@ -1,8 +1,52 @@
-<script>
+<script lang="ts">
   import "../app.pcss";
+  import { AppShell, 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;
+    });
+
+    reiszeObserver.observe(appContainer);
+
+    return () => {
+      reiszeObserver.disconnect();
+    };
+  });
+
+  initializeStores(); // Should be called only once
 </script>
 
-<slot />
+{#if activateHamburger}
+  <Drawer position="right">
+    <SideBar displayCloseButton={true} />
+  </Drawer>
+{/if}
+
+<div id="app-container" bind:this={appContainer} class="h-screen w-screen">
+  <AppShell slotSidebarLeft={activateHamburger ? "" : "w-64 h-full"} class="h-screen">
+    <svelte:fragment slot="header">
+      <Header hamburger={activateHamburger} />
+    </svelte:fragment>
+
+    <svelte:fragment slot="sidebarLeft">
+      {#if !activateHamburger}
+        <SideBar />
+      {/if}
+    </svelte:fragment>
+
+    <slot />
+  </AppShell>
+</div>
 
 <!-- Global styles -->
 <style lang="postcss">

src/routes/summary/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { LightSwitch, TabGroup, Tab } from "@skeletonlabs/skeleton";
+  import { TabGroup, Tab } from "@skeletonlabs/skeleton";
 
   import GroupList from "$lib/components/summary/GroupsCarousel.svelte";
   import ScheduledMeetingsList from "$lib/components/summary/ScheduledMeetingsList.svelte";
@@ -8,8 +8,6 @@
   let tabSet: number = 0;
 </script>
 
-<LightSwitch />
-
 <div class="flex flex-col gap-8 px-4 pt-8 md:px-32">
   <div class="flex flex-col gap-4">
     <h1 class="text-4xl font-bold border-b border-surface-400-500-token">Groups</h1>