feat: create app drawer

src/app.pcss

@@ -5,3 +5,13 @@
 @tailwind utilities;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  .flex-center {
+    @apply flex items-center justify-center;
+  }
+
+  .flex-between {
+    @apply flex items-center justify-between;
+  }
+}

src/lib/components/Header/Header.svelte

@@ -0,0 +1,38 @@
+<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-primary-600">
+  <div class="h-full flex-between md:mx-4">
+    <img src="/icon.png" class="w-10 h-10 rounded-full" alt="ZotMeet icon" />
+    <div class="text-4xl font-bold md:ml-10">
+      <a href="/">ZotMeet</a>
+    </div>
+
+    <!-- Hamburger -->
+    {#if hamburger}
+      <button on:click={openDrawer}>
+        <HamburgerMenu class="w-12 h-12" />
+      </button>
+    {:else}
+      <div id="user-info-container" class="flex items-center justify-end flex-1 gap-2">
+        <div id="user-name-container">
+          <span class="text-lg">Peter Anteater</span>
+        </div>
+        <img src="user-icon.png" alt="User Icon" class="w-12 h-12 rounded-full user-icon" />
+      </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 w-full h-full rounded-r-none rounded-left-lg md:rounded-r-lg md:rounded-l-none bg-secondary-400 outline-secondary-800 card outline-5"
+>
+  <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-between">
+  <LightSwitch />
+  <a href="https://google.com">Feedback</a>
+  <a href="https://google.com">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 items-center whitespace-nowrap hover:bg-secondary-500 w-full gap-4 p-5 md:p-3 rounded-lg"
+  >
+    <Icon class="w-14 h-14 md:w-10 md:h-10 ml-3" />
+    <span class="text-2xl md:text-xl">{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>