feat: close sidebar on button click (#82)

* feat: ✨ close sidebar on click * chore: 🔧 add settings into nav buttons array * fix: 🐛 render button icons again * feat: ✨ login/logout buttons close sidebar on click
icssc · Apr 3, 2024 · c02c96d · c02c96d
1 parent d663e8d
commit c02c96d
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 18 deletions.
diff --git a/src/lib/components/navigation/Navbar.svelte b/src/lib/components/navigation/Navbar.svelte
@@ -9,10 +9,16 @@
   import MenuIcon from "~icons/material-symbols/menu";
 
   export let data: PageData;
+
+  let checked = false;
+
+  const handleClick = () => {
+    checked = !checked;
+  };
 </script>
 
 <div class="drawer drawer-end md:hidden">
-  <input id="nav-drawer" type="checkbox" class="drawer-toggle" />
+  <input id="nav-drawer" type="checkbox" class="drawer-toggle" bind:checked />
 
   <div class="drawer-content flex flex-col">
     <div class="flex-between navbar bg-gray-light px-5 pb-3 pt-4 md:hidden">
@@ -34,8 +40,8 @@
         </label>
       </div>
 
-      <NavButtons />
-      <ProfileCard {data} />
+      <NavButtons {handleClick} />
+      <ProfileCard {data} {handleClick} />
     </div>
   </div>
 </div>
diff --git a/src/lib/components/navigation/shared/NavButton.svelte b/src/lib/components/navigation/shared/NavButton.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-  export let href: string;
   export let text: string;
+  export let href: string;
+  export let handleClick: (() => void) | undefined;
 </script>
 
 <a {href}>
   <button
     class="btn h-12 w-full justify-start space-x-3 border-none bg-transparent text-xl font-normal shadow-none md:text-lg"
+    on:click={handleClick}
   >
     <slot />
     <!-- Icon -->

diff --git a/src/lib/components/navigation/shared/NavButtons.svelte b/src/lib/components/navigation/shared/NavButtons.svelte
@@ -1,21 +1,47 @@
 <script lang="ts">
+  import type { ComponentType } from "svelte";
+
   import NavButton from "./NavButton.svelte";
 
   import AddBoxOutlineIcon from "~icons/material-symbols/add-box-outline";
   import CalendarSearchOutlineIcon from "~icons/mdi/calendar-search-outline";
-  // import SettingsOutline from "~icons/mdi/settings-outline";
-</script>
+  // import SettingsOutlineIcon from "~icons/mdi/settings-outline";
 
-<div class="flex flex-col gap-y-2 border-t-2 px-6 pt-6 text-gray-600 sm:px-8 md:border-0 md:p-0">
-  <NavButton text="New Meeting" href="/">
-    <AddBoxOutlineIcon class="h-7 w-7" />
-  </NavButton>
+  export let handleClick: (() => void) | undefined = undefined;
 
-  <NavButton text="Summary" href="/summary">
-    <CalendarSearchOutlineIcon class="h-7 w-7" />
-  </NavButton>
+  interface NavInfo {
+    id: number;
+    text: string;
+    href: string;
+    icon: ComponentType;
+  }
 
-  <!-- <NavButton text="Settings" , href="/settings">
-    <SettingsOutline class="h-7 w-7" />
-  </NavButton> -->
+  const NAV_BUTTONS: NavInfo[] = [
+    {
+      id: 1,
+      text: "New Meeting",
+      href: "/",
+      icon: AddBoxOutlineIcon,
+    },
+    {
+      id: 2,
+      text: "Summary",
+      href: "/summary",
+      icon: CalendarSearchOutlineIcon,
+    },
+    // {
+    //   id: 3,
+    //   text: "Settings",
+    //   href: "/settings",
+    //   icon: SettingsOutlineIcon,
+    // },
+  ];
+</script>
+
+<div class="flex flex-col gap-y-2 border-t-2 px-6 pt-6 text-gray-600 sm:px-8 md:border-0 md:p-0">
+  {#each NAV_BUTTONS as button}
+    <NavButton text={button.text} href={button.href} {handleClick}>
+      <svelte:component this={button.icon} class="h-7 w-7" />
+    </NavButton>
+  {/each}
 </div>
diff --git a/src/lib/components/navigation/shared/ProfileCard.svelte b/src/lib/components/navigation/shared/ProfileCard.svelte
@@ -6,6 +6,7 @@
   import LogoutIcon from "~icons/mdi/logout";
 
   export let data: PageData;
+  export let handleClick: (() => void) | undefined = undefined;
 
   $: user = data.user;
 </script>
@@ -33,14 +34,22 @@
     </div>
 
     <form use:enhance action="/auth/logout" method="post" class="mt-1 w-full">
-      <button type="submit" class="flex-center btn btn-neutral h-10 min-h-0 w-full">
+      <button
+        type="submit"
+        class="flex-center btn btn-neutral h-10 min-h-0 w-full"
+        on:click={handleClick}
+      >
         <LogoutIcon />
         <p>Logout</p>
       </button>
     </form>
   {:else}
     <a href="/auth" class="mb-1 w-full">
-      <button type="submit" class="flex-center btn btn-primary h-10 min-h-0 w-full text-white">
+      <button
+        type="submit"
+        class="flex-center btn btn-primary h-10 min-h-0 w-full text-white"
+        on:click={handleClick}
+      >
         <LoginIcon />
         <p>Login</p>
       </button>