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=1740264893; bh=OycOZ7btqIhO19gQJbBboe30UoNt4uMi/aY7NYgX2qw=; 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=WccJi1tNBoKNJ5tgMFBWe4eWy2Z8SqgBA1kFeu6Hg1fPSugAfgdGwIv3QJVdGZT0b FLQArzPFFTVIq9FTi5gsRZqalYCmGd75tFnqWzc4y4k516X4lNWgqKcMcS7BU+urG6 JteQbAg1r3g/tirOdSpbAumFx56hS3coV6AqGEAEMjSX1Fg7sHriNdSR11wxYFq10U BoSBSe1HqOagJPsyRZJ6oJP5urnirsCD1l+q5if9hXEeihq0ij6nhBAYEVooffYF7y Rd1bKm1Vx4OLvbuneTa9o58EKieMyP57yuRPSxmZTetdi+Rz3SwnW7maYT32tA9vg3 fIT5AhlqcdnsQ== Received: from localhost.localdomain (unknown [101.128.125.35]) by server-vie001.gnuweeb.org (Postfix) with ESMTPSA id AE2D920744CC; Sat, 22 Feb 2025 22:54:52 +0000 (UTC) From: Muhammad Rizki To: Ammar Faizi Cc: Muhammad Rizki , Alviro Iskandar Setiawan , GNU/Weeb Mailing List Subject: [PATCH v1 08/13] chore(sidebar-menu): add active menu style Date: Sun, 23 Feb 2025 05:54:14 +0700 Message-ID: <20250222225423.1377-9-kiizuha@gnuweeb.org> X-Mailer: git-send-email 2.45.2.windows.1 In-Reply-To: <20250222225423.1377-1-kiizuha@gnuweeb.org> References: <20250222225423.1377-1-kiizuha@gnuweeb.org> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit List-Id: Added current active menu style to increase user experience. Signed-off-by: Muhammad Rizki --- src/lib/components/customs/app-sidebar.svelte | 40 +++++++++++++++++-- .../ui/sidebar/sidebar-menu-button.svelte | 6 +-- 2 files changed, 39 insertions(+), 7 deletions(-) diff --git a/src/lib/components/customs/app-sidebar.svelte b/src/lib/components/customs/app-sidebar.svelte index 9291b94..24d0106 100644 --- a/src/lib/components/customs/app-sidebar.svelte +++ b/src/lib/components/customs/app-sidebar.svelte @@ -6,13 +6,22 @@ import { LogOut, Mails } from "lucide-svelte"; import type { ComponentProps } from "svelte"; import { goto } from "$app/navigation"; - import Button from "$components/ui/button/button.svelte"; + import Button from "$components/ui/button/button.svelte"; + import { cn } from "$utils"; + import { page } from "$app/state"; + import { crossfade } from "svelte/transition"; + import { cubicInOut } from "svelte/easing"; let { ref = $bindable(null), ...restProps }: ComponentProps = $props(); const auth = useAuth(); const sidebar = Sidebar.useSidebar(); + const [send, receive] = crossfade({ + duration: 250, + easing: cubicInOut + }); + const handleNavigationMobile = () => { if (!sidebar.isMobile) return; sidebar.toggle(); @@ -49,12 +58,31 @@ {#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} @@ -65,7 +93,11 @@ - diff --git a/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/src/lib/components/ui/sidebar/sidebar-menu-button.svelte index e14dc5f..5e9e002 100644 --- a/src/lib/components/ui/sidebar/sidebar-menu-button.svelte +++ b/src/lib/components/ui/sidebar/sidebar-menu-button.svelte @@ -2,12 +2,12 @@ import { tv, type VariantProps } from "tailwind-variants"; export const sidebarMenuButtonVariants = tv({ - base: "peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", + base: "peer/menu-button ring-sidebar-ring hover:underline hover:text-sidebar-accent-foreground active:underline active:text-sidebar-accent-foreground data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:underline data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", variants: { variant: { - default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", + default: "hover:underline hover:text-sidebar-accent-foreground", outline: - "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]" + "bg-background hover:underline hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]" }, size: { default: "h-8 text-sm", -- Muhammad Rizki