[PATCH v1 11/17] feat(components): add app-sidebar component

[Muhammad Rizki <kiizuha@gnuweeb.org>]

this component will dispaly its sidebar like menu navigations.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 src/lib/components/customs/app-sidebar.svelte | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/lib/components/customs/app-sidebar.svelte

diff --git a/src/lib/components/customs/app-sidebar.svelte b/src/lib/components/customs/app-sidebar.svelte
new file mode 100644
index 0000000..9291b94
--- /dev/null
+++ b/src/lib/components/customs/app-sidebar.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { navigations } from "$constants";
+  import Separator from "$components/ui/separator/separator.svelte";
+  import * as Sidebar from "$lib/components/ui/sidebar";
+  import { useAuth } from "$lib/hooks/auth.svelte";
+  import { LogOut, Mails } from "lucide-svelte";
+  import type { ComponentProps } from "svelte";
+  import { goto } from "$app/navigation";
+    import Button from "$components/ui/button/button.svelte";
+
+  let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
+
+  const auth = useAuth();
+  const sidebar = Sidebar.useSidebar();
+
+  const handleNavigationMobile = () => {
+    if (!sidebar.isMobile) return;
+    sidebar.toggle();
+  };
+
+  const handleLogout = () => {
+    auth.clear();
+    goto("/");
+  };
+</script>
+
+<Sidebar.Root bind:ref variant="inset" collapsible="icon" {...restProps}>
+  <Sidebar.Content>
+    <Sidebar.Group>
+      <Sidebar.Header>
+        <Sidebar.Menu>
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton onclick={() => sidebar.toggle()} size="lg">
+              <div
+                class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
+              >
+                <Mails class="size-4" />
+              </div>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{auth.user?.full_name}</span>
+                <span class="truncate text-xs">@{auth.user?.username}</span>
+              </div>
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
+        </Sidebar.Menu>
+      </Sidebar.Header>
+      <Separator class="mb-3" />
+      <Sidebar.GroupContent>
+        <Sidebar.Menu>
+          {#each navigations as item (item.name)}
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton>
+                {#snippet child({ props })}
+                  <a href={item.url} onclick={handleNavigationMobile} {...props}>
+                    <item.icon />
+                    <span>{item.name}</span>
+                  </a>
+                {/snippet}
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+          {/each}
+        </Sidebar.Menu>
+      </Sidebar.GroupContent>
+    </Sidebar.Group>
+  </Sidebar.Content>
+  <Sidebar.Footer>
+    <Sidebar.Menu>
+      <Button variant="destructive" onclick={handleLogout} class="flex justify-start items-center w-full">
+        <LogOut />
+        <span>Logout</span>
+      </Button>
+    </Sidebar.Menu>
+  </Sidebar.Footer>
+</Sidebar.Root>
-- 
Muhammad Rizki