feat: add check current active nav hook

src/components/nav.tsx

@@ -18,6 +18,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import useCheckActiveNav from '@/hooks/useCheckActiveNav'
 
 interface NavProps {
   isCollapsed: boolean
@@ -52,20 +53,14 @@ interface NavLinkProps extends SideLink {
   subLink?: boolean
 }
 
-function NavLink({
-  title,
-  isActive,
-  icon,
-  label,
-  href,
-  subLink = false,
-}: NavLinkProps) {
+function NavLink({ title, icon, label, href, subLink = false }: NavLinkProps) {
+  const { checkActiveNav } = useCheckActiveNav()
   return (
     <Link
       to={href}
       className={cn(
         buttonVariants({
-          variant: isActive ? 'secondary' : 'ghost',
+          variant: checkActiveNav(href) ? 'secondary' : 'ghost',
           size: 'sm',
         }),
         'justify-start px-6 h-12 rounded-none',
@@ -84,9 +79,11 @@ function NavLink({
 }
 
 function NavLinkDropdown({ title, icon, label, sub }: SideLink) {
+  const { checkActiveNav } = useCheckActiveNav()
+
   /* Open collapsible by default
    * if one of child element is active */
-  const isChildActive = !!sub?.find((s) => s.isActive)
+  const isChildActive = !!sub?.find((s) => checkActiveNav(s.href))
 
   return (
     <Collapsible defaultOpen={isChildActive}>
@@ -124,7 +121,8 @@ function NavLinkDropdown({ title, icon, label, sub }: SideLink) {
   )
 }
 
-function NavLinkIcon({ title, isActive, icon, label, href }: NavLinkProps) {
+function NavLinkIcon({ title, icon, label, href }: NavLinkProps) {
+  const { checkActiveNav } = useCheckActiveNav()
   return (
     <Tooltip delayDuration={0}>
       <TooltipTrigger asChild>
@@ -132,7 +130,7 @@ function NavLinkIcon({ title, isActive, icon, label, href }: NavLinkProps) {
           to={href}
           className={cn(
             buttonVariants({
-              variant: isActive ? 'secondary' : 'ghost',
+              variant: checkActiveNav(href) ? 'secondary' : 'ghost',
               size: 'icon',
             }),
             'h-12 w-12'
@@ -153,12 +151,22 @@ function NavLinkIcon({ title, isActive, icon, label, href }: NavLinkProps) {
 }
 
 function NavLinkIconDropdown({ title, icon, label, sub }: SideLink) {
+  const { checkActiveNav } = useCheckActiveNav()
+
+  /* Open collapsible by default
+   * if one of child element is active */
+  const isChildActive = !!sub?.find((s) => checkActiveNav(s.href))
+
   return (
     <DropdownMenu>
       <Tooltip delayDuration={0}>
         <TooltipTrigger asChild>
           <DropdownMenuTrigger asChild>
-            <Button variant='ghost' size='icon' className='w-12 h-12'>
+            <Button
+              variant={isChildActive ? 'secondary' : 'ghost'}
+              size='icon'
+              className='w-12 h-12'
+            >
               {icon}
             </Button>
           </DropdownMenuTrigger>
@@ -180,8 +188,11 @@ function NavLinkIconDropdown({ title, icon, label, sub }: SideLink) {
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
         {sub!.map(({ title, icon, label, href }) => (
-          <DropdownMenuItem key={title} asChild>
-            <Link to={href}>
+          <DropdownMenuItem key={`${title}-${href}`} asChild>
+            <Link
+              to={href}
+              className={`${checkActiveNav(href) ? 'bg-secondary' : ''}`}
+            >
               {icon} <span className='ml-2'>{title}</span>
               {label && <span className='ml-auto text-xs'>{label}</span>}
             </Link>

src/data/sidelinks.tsx

@@ -1,6 +1,8 @@
 import {
   IconBoxSeam,
   IconChartHistogram,
+  IconCircleLetterA,
+  IconCircleLetterB,
   IconLayoutDashboard,
   IconMessages,
   IconRouteAltLeft,
@@ -13,7 +15,6 @@ export interface NavLink {
   label?: string
   href: string
   icon: JSX.Element
-  isActive: boolean
 }
 
 export interface SideLink extends NavLink {
@@ -23,44 +24,50 @@ export interface SideLink extends NavLink {
 export const sidelinks: SideLink[] = [
   {
     title: 'Dashboard',
-    label: '128',
+    label: '',
     href: 'dashboard',
     icon: <IconLayoutDashboard size={18} />,
-    isActive: true,
+    sub: [
+      {
+        title: 'Dashboard 1',
+        href: '/dashboard',
+        icon: <IconCircleLetterA size={18} />,
+      },
+      {
+        title: 'Dashboard 2',
+        href: '/dashboard-2',
+        icon: <IconCircleLetterB size={18} />,
+      },
+    ],
   },
   {
     title: 'Chats',
     label: '9',
     href: 'chats',
     icon: <IconMessages size={18} />,
-    isActive: false,
   },
   {
     title: 'Partners',
     label: '',
     href: 'partners',
     icon: <IconUsers size={18} />,
-    isActive: false,
   },
   {
     title: 'Requests',
-    label: '12',
+    label: '10',
     href: 'requests',
     icon: <IconRouteAltLeft size={18} />,
-    isActive: false,
     sub: [
       {
         title: 'Trucks',
         label: '9',
         href: 'trucks',
-        isActive: false,
         icon: <IconTruck size={18} />,
       },
       {
         title: 'Cargos',
         label: '',
         href: 'cargos',
-        isActive: false,
         icon: <IconBoxSeam size={18} />,
       },
     ],
@@ -70,6 +77,5 @@ export const sidelinks: SideLink[] = [
     label: '',
     href: 'analysis',
     icon: <IconChartHistogram size={18} />,
-    isActive: false,
   },
 ]

src/hooks/useCheckActiveNav.tsx

@@ -0,0 +1,11 @@
+import { useLocation } from 'react-router-dom'
+
+export default function useCheckActiveNav() {
+  const { pathname } = useLocation()
+
+  const checkActiveNav = (nav: string) => {
+    return pathname === nav
+  }
+
+  return { checkActiveNav }
+}