feat: update sidebar navigation to use pathname and add subscriptions layout component

app/layouts/admin/sidebar.tsx

@@ -1,9 +1,11 @@
-import { NavLink } from 'react-router'
+import { NavLink, useLocation } from 'react-router'
 import { twMerge } from 'tailwind-merge'
 
 import { MENU } from './menu'
 
 export const Sidebar = () => {
+  const { pathname } = useLocation()
+
   return (
     <div className="flex min-h-[calc(100dvh-80px)] flex-col gap-y-10 overflow-y-auto bg-white p-5">
       {MENU.map(({ group, items }) => (
@@ -16,31 +18,25 @@ export const Sidebar = () => {
             <NavLink
               to={url}
               key={`${group}-${title}`}
-              className={({ isActive }) =>
+              className={twMerge(
-                twMerge(
+                pathname === url ? 'bg-[#707FDD]/10 font-bold' : '',
-                  isActive ? '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',
-                  'group/menu flex h-[42px] w-[200px] items-center gap-x-3 rounded-md px-5 transition-all hover:bg-[#707FDD]/10',
-                )
-              }
-            >
-              {({ isActive }) => (
-                <>
-                  <Icon
-                    className={twMerge(
-                      isActive ? 'text-[#5363AB]' : 'text-[#A6ABC8]',
-                      'h-[18px] w-[18px] transition-all group-hover/menu:text-[#5363AB]',
-                    )}
-                  />
-                  <span
-                    className={twMerge(
-                      isActive ? 'text-[#5363AB]' : 'text-[#273240]',
-                      'text-base transition-all group-hover/menu:text-[#5363AB]',
-                    )}
-                  >
-                    {title}
-                  </span>
-                </>
               )}
+            >
+              <Icon
+                className={twMerge(
+                  pathname === 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]',
+                  'text-base transition-all group-hover/menu:text-[#5363AB]',
+                )}
+              >
+                {title}
+              </span>
             </NavLink>
           ))}
         </div>