From dea86d8c8774d5badadefbc92352d5145245a22f Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Thu, 14 Nov 2024 19:32:52 +0100
Subject: [PATCH] fix(dashboard): Fix active nav link styling for built-in
 routes (#10082)

**What**
- Ensures that NavLinks are correctly styled for both built-in and extension routes.
---
 .changeset/rude-cooks-knock.md                |  5 +++
 .../components/layout/nav-item/nav-item.tsx   | 43 +++++++++++--------
 2 files changed, 31 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/rude-cooks-knock.md

diff --git a/.changeset/rude-cooks-knock.md b/.changeset/rude-cooks-knock.md
new file mode 100644
index 0000000000..a436f56e49
--- /dev/null
+++ b/.changeset/rude-cooks-knock.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): Fix active nav link styling for built-in routes
diff --git a/packages/admin/dashboard/src/components/layout/nav-item/nav-item.tsx b/packages/admin/dashboard/src/components/layout/nav-item/nav-item.tsx
index 562ff1be3c..89ddc174b5 100644
--- a/packages/admin/dashboard/src/components/layout/nav-item/nav-item.tsx
+++ b/packages/admin/dashboard/src/components/layout/nav-item/nav-item.tsx
@@ -99,20 +99,27 @@ export const NavItem = ({
 
   const navLinkClassNames = useCallback(
     ({
+      to,
       isActive,
       isNested = false,
       isSetting = false,
     }: {
+      to: string
       isActive: boolean
       isNested?: boolean
       isSetting?: boolean
-    }) =>
-      clx(BASE_NAV_LINK_CLASSES, {
+    }) => {
+      if (["core", "setting"].includes(type)) {
+        isActive = pathname.startsWith(to)
+      }
+
+      return clx(BASE_NAV_LINK_CLASSES, {
         [NESTED_NAV_LINK_CLASSES]: isNested,
         [ACTIVE_NAV_LINK_CLASSES]: isActive,
         [SETTING_NAV_LINK_CLASSES]: isSetting,
-      }),
-    []
+      })
+    },
+    [type, pathname]
   )
 
   const isSetting = type === "setting"
@@ -130,11 +137,11 @@ export const NavItem = ({
                 }
               : undefined
           }
-          className={(props) =>
-            clx(navLinkClassNames({ ...props, isSetting }), {
+          className={({ isActive }) => {
+            return clx(navLinkClassNames({ isActive, isSetting, to }), {
               "max-lg:hidden": !!items?.length,
             })
-          }
+          }}
         >
           {type !== "setting" && (
             <div className="flex size-6 items-center justify-center">
@@ -169,15 +176,16 @@ export const NavItem = ({
                     <NavLink
                       to={to}
                       end
-                      className={(props) =>
-                        clx(
+                      className={({ isActive }) => {
+                        return clx(
                           navLinkClassNames({
-                            ...props,
-                            isNested: true,
+                            to,
+                            isActive,
                             isSetting,
+                            isNested: true,
                           })
                         )
-                      }
+                      }}
                     >
                       <Text size="small" weight="plus" leading="compact">
                         {label}
@@ -192,15 +200,16 @@ export const NavItem = ({
                         <NavLink
                           to={item.to}
                           end
-                          className={(props) =>
-                            clx(
+                          className={({ isActive }) => {
+                            return clx(
                               navLinkClassNames({
-                                ...props,
-                                isNested: true,
+                                to: item.to,
+                                isActive,
                                 isSetting,
+                                isNested: true,
                               })
                             )
-                          }
+                          }}
                         >
                           <Text size="small" weight="plus" leading="compact">
                             {item.label}