From 9dd7e798f76bf0bdea89a68e01beb461f570db3d Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Wed, 5 Mar 2025 22:36:34 +0800
Subject: [PATCH] feat: refactor sidebar component to use extracted path for
 active link styling

---
 app/layouts/admin/sidebar.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/layouts/admin/sidebar.tsx b/app/layouts/admin/sidebar.tsx
index ae344d7..17fd1c2 100644
--- a/app/layouts/admin/sidebar.tsx
+++ b/app/layouts/admin/sidebar.tsx
@@ -5,6 +5,11 @@ import { MENU } from './menu'
 
 export const Sidebar = () => {
   const { pathname } = useLocation()
+  const path = () => {
+    // Extract the first three segments for deep paths, otherwise use the full pathname
+    const segments = pathname.split('/')
+    return segments.length > 3 ? segments.slice(0, 3).join('/') : pathname
+  }
 
   return (
     <div className="flex min-h-[calc(100dvh-80px)] flex-col gap-y-10 overflow-y-auto bg-white p-5">
@@ -19,19 +24,19 @@ export const Sidebar = () => {
               to={url}
               key={`${group}-${title}`}
               className={twMerge(
-                pathname === url ? 'bg-[#707FDD]/10 font-bold' : '',
+                path() === url ? 'bg-[#707FDD]/10 font-bold' : '',
                 'group/menu flex h-[42px] w-[200px] items-center gap-x-3 rounded-md px-5 transition-all hover:bg-[#707FDD]/10',
               )}
             >
               <Icon
                 className={twMerge(
-                  pathname === url ? 'text-[#5363AB]' : 'text-[#A6ABC8]',
+                  path() === url ? 'text-[#5363AB]' : 'text-[#A6ABC8]',
                   'h-[18px] w-[18px] transition-all group-hover/menu:text-[#5363AB]',
                 )}
               />
               <span
                 className={twMerge(
-                  pathname === url ? 'text-[#5363AB]' : 'text-[#273240]',
+                  path() === url ? 'text-[#5363AB]' : 'text-[#273240]',
                   'text-base transition-all group-hover/menu:text-[#5363AB]',
                 )}
               >