[PATCH v1 08/13] chore(sidebar-menu): add active menu style

[Muhammad Rizki <kiizuha@gnuweeb.org>]

Added current active menu style to increase user experience.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 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<typeof Sidebar.Root> = $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 @@
         <Sidebar.Menu>
           {#each navigations as item (item.name)}
             <Sidebar.MenuItem>
-              <Sidebar.MenuButton>
+              {@const isActive = page.url.pathname.startsWith(item.url)}
+              <Sidebar.MenuButton {isActive} class="relative">
                 {#snippet child({ props })}
-                  <a href={item.url} onclick={handleNavigationMobile} {...props}>
+                  {@const className = props.class as string}
+                  <a
+                    href={item.url}
+                    onclick={handleNavigationMobile}
+                    {...props}
+                    class={cn("relative z-10", className)}
+                  >
                     <item.icon />
                     <span>{item.name}</span>
                   </a>
+                  {#if isActive}
+                    <!-- svelte-ignore element_invalid_self_closing_tag -->
+                    <div
+                      class={cn(
+                        "absolute inset-0 rounded-md bg-sidebar-accent",
+                        isActive &&
+                          "overflow-hidden before:absolute before:left-0 before:h-full before:w-0.5 before:bg-foreground"
+                      )}
+                      in:send={{ key: "active-sidebar-tab" }}
+                      out:receive={{ key: "active-sidebar-tab" }}
+                    />
+                  {/if}
                 {/snippet}
               </Sidebar.MenuButton>
             </Sidebar.MenuItem>
@@ -65,7 +93,11 @@
   </Sidebar.Content>
   <Sidebar.Footer>
     <Sidebar.Menu>
-      <Button variant="destructive" onclick={handleLogout} class="flex justify-start items-center w-full">
+      <Button
+        variant="destructive"
+        onclick={handleLogout}
+        class="flex w-full items-center justify-start"
+      >
         <LogOut />
         <span>Logout</span>
       </Button>
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