From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <kiizuha@gnuweeb.org>
X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on
	server-vie001.gnuweeb.org
X-Spam-Level: 
X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED,
	DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_DBL_BLOCKED_OPENDNS,
	URIBL_ZEN_BLOCKED_OPENDNS autolearn=ham autolearn_force=no
	version=3.4.6
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org;
	s=default; t=1737249155;
	bh=7+adlxt7VMJJuy4C/gRLxrqEVuSmEnabqXcyl36amP8=;
	h=From:To:Cc:Subject:Date:Message-ID:In-Reply-To:References:
	 MIME-Version:Content-Transfer-Encoding:Message-ID:Date:From:
	 Reply-To:Subject:To:Cc:In-Reply-To:References:Resent-Date:
	 Resent-From:Resent-To:Resent-Cc:User-Agent:Content-Type:
	 Content-Transfer-Encoding;
	b=aEjK8lJhBY4fESu5+YNrqZA3oZz7SX9B0EITLCF3hpIkhFc4INag2LrJtZG3asfF5
	 DE+aTXnkm8vsTGJejLiiOtkAmcZ3QRUI2UNlHXBkF5bfUGDX+fsi3IurwqNhGbtu2+
	 n0pzhSPb2UfMwl59we4sJ9/XDEcu/lJdltRYbiQrTx4Ua381Kh4aNI8Q+fka4mZs2y
	 RS60qve5uCPklF0UjtPpsK3RUF0+jp2P60gVdbRyZJrriDUcSrEOYBs+F8LIoal8RY
	 nT4GGJQQQB8mFMv1EOFefpCDgY18x+F0JCjeM6ryI44W1lvZike6uM7okQpo3X9NzM
	 Zmk6hvlKlYTsA==
Received: from localhost.localdomain (unknown [101.128.125.239])
	by server-vie001.gnuweeb.org (Postfix) with ESMTPSA id 05D652061C2A;
	Sun, 19 Jan 2025 01:12:33 +0000 (UTC)
From: Muhammad Rizki <kiizuha@gnuweeb.org>
To: Ammar Faizi <ammarfaizi2@gnuweeb.org>
Cc: Muhammad Rizki <kiizuha@gnuweeb.org>,
	Alviro Iskandar Setiawan <alviro.iskandar@gnuweeb.org>,
	Dwiky Rizky Ananditya <kyzsuki@gnuweeb.org>,
	GNU/Weeb Mailing List <gwml@vger.gnuweeb.org>
Subject: [PATCH v1 11/17] feat(components): add app-sidebar component
Date: Sun, 19 Jan 2025 08:11:28 +0700
Message-ID: <20250119011136.1254-12-kiizuha@gnuweeb.org>
X-Mailer: git-send-email 2.45.2.windows.1
In-Reply-To: <20250119011136.1254-1-kiizuha@gnuweeb.org>
References: <20250119011136.1254-1-kiizuha@gnuweeb.org>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
List-Id: <gwml.vger.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