From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: 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=1741462048; bh=3yI5NYuUqV9guoDxN+USMQdAQAPaka41EQUILFeBYwI=; 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=Yp4Qr9grrtSy4x+QUNAjwdFR9NmxElTbAc+Mn95Qz8vAtf3GfWCCYhAB2Dfauj1zI IRRcnPLxzoH4YYeUyTi3BkQnyYbzVkuw5NhirKtQdh3BwoAPceoiE9ClZoUTMiIgVh u+nmOPh0GOZ90RwG5JSZfbMcLsyw+DpGyZ1+0NWYUzm0MMSu7jDCgdxzSLrtXl6UOK Nr+7qg1gwzHu0QqYU+sz6JQOiqoDUW+w/uaZvdNzktP7Nntx5Yt49RudWuWUnmEAnY ACGJuKeK0AYvvS9RB7dQfC6CEB+xAm25Xp24rU6PSicumnDpXBz/HFNCL2qCSsxmz8 BhArvROuAl+bQ== Received: from localhost.localdomain (unknown [101.128.125.112]) by server-vie001.gnuweeb.org (Postfix) with ESMTPSA id 3583320B4927; Sat, 8 Mar 2025 19:27:27 +0000 (UTC) From: Muhammad Rizki To: Ammar Faizi Cc: Muhammad Rizki , Alviro Iskandar Setiawan , GNU/Weeb Mailing List Subject: [PATCH v2 10/12] chore(sidebar-menu): change sidebar menu look Date: Sun, 9 Mar 2025 02:26:52 +0700 Message-ID: <20250308192656.97-11-kiizuha@gnuweeb.org> X-Mailer: git-send-email 2.45.2.windows.1 In-Reply-To: <20250308192656.97-1-kiizuha@gnuweeb.org> References: <20250308192656.97-1-kiizuha@gnuweeb.org> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit List-Id: This commit fixes the logout button in the sidebar menu which overflowed to main content, with this fix, I change the sidebar footer with account info and use dropdown menu to display the logout button and account info. Signed-off-by: Muhammad Rizki --- src/lib/components/customs/app-sidebar.svelte | 230 ++++++++++++------ 1 file changed, 154 insertions(+), 76 deletions(-) diff --git a/src/lib/components/customs/app-sidebar.svelte b/src/lib/components/customs/app-sidebar.svelte index 7ccc59c..2132214 100644 --- a/src/lib/components/customs/app-sidebar.svelte +++ b/src/lib/components/customs/app-sidebar.svelte @@ -2,6 +2,9 @@ import { navigations } from "$constants"; import Separator from "$components/ui/separator/separator.svelte"; import * as Sidebar from "$lib/components/ui/sidebar"; + import * as Avatar from "$lib/components/ui/avatar"; + import * as DropdownMenu from "$lib/components/ui/dropdown-menu"; + import * as Dialog from "$lib/components/ui/dialog"; import { useAuth } from "$lib/hooks/auth.svelte"; import LogOut from "lucide-svelte/icons/log-out"; import Mails from "lucide-svelte/icons/mails"; @@ -14,17 +17,27 @@ import { crossfade } from "svelte/transition"; import { cubicInOut } from "svelte/easing"; import IconRoundcube from "$components/icons/icon-roundcube.svelte"; + import Loading from "./loading.svelte"; + import ChevronsUpDown from "lucide-svelte/icons/chevrons-up-down"; let { ref = $bindable(null), ...restProps }: ComponentProps = $props(); const auth = useAuth(); const sidebar = Sidebar.useSidebar(); + let showModalConfirmation = $state(false); + const [send, receive] = crossfade({ duration: 250, easing: cubicInOut }); + const getShortName = () => { + const fullName = auth.user?.full_name ?? ""; + const match = fullName.match(/\b(\w)/g) ?? []; + return match.slice(0, 2).join("").toUpperCase(); + }; + const handleNavigationMobile = () => { if (!sidebar.isMobile) return; sidebar.toggle(); @@ -36,93 +49,158 @@ }; - - - - - - - sidebar.toggle()} size="lg"> -
- -
-
- {auth.user?.full_name} - @{auth.user?.username} -
- - - - - - - - {#each navigations as item (item.name)} + (showModalConfirmation = e)}> + + + + + - {@const isActive = page.url.pathname.startsWith(item.url)} - + sidebar.toggle()} size="lg"> +
+ +
+

G/W Mail

+ + + + + + + + {#each navigations as item (item.name)} + + {@const isActive = page.url.pathname.startsWith(item.url)} + + {#snippet child({ props })} + {@const className = props.class as string} + + + {item.name} + + {#if isActive} + +
+ {/if} + {/snippet} + + + {/each} + + {#snippet child({ props })} {@const className = props.class as string} - - {item.name} - - {#if isActive} - -
+ Roundcube + - {/if} + {/snippet} - {/each} - - + + + + + + + + + {#snippet child({ props })} - {@const className = props.class as string} - - - Roundcube - - + + + + {#if !Boolean(auth.user?.photo)} + {getShortName()} + {:else} + + {/if} + + +
+ {auth.user?.full_name} + {auth.user?.username}@gnuweeb.org +
+ + {/snippet} - - - - - - - - - - - - + + + +
+ + + + {#if !Boolean(auth.user?.photo)} + {getShortName()} + {:else} + + {/if} + + +
+ {auth.user?.full_name} + {auth.user?.username}@gnuweeb.org +
+
+ + + (showModalConfirmation = true)} + class="text-destructive hover:!text-destructive" + > + + Log out + + + + + + + + + + Logout Confirmation + Confirm logout from your profile. + +

+ You are about to logout from your profile, click logout button below to proceed. +

+ + + + + -- Muhammad Rizki