From b50ac9730e6cbc2e3bce2036e2647d2bf1beed3f Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Thu, 17 Oct 2024 16:16:31 +0200
Subject: [PATCH] fix(dashboard): Fix styling of nested NavLinks (#9637)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**What**
Adds the `end` prop to NavLinks, so they only use their active style when the current path is a perfect match.
This was added to prevent MenuItems from extensions both showing the parent and child items as active, when the child route was active.

Also added a check to prevent users from adding nested settings NavLinks.


<img width="218" alt="Skærmbillede 2024-10-17 kl  14 25 12" src="https://github.com/user-attachments/assets/9e4d530a-c7b4-410e-aaaf-5a21ac86eb03">
<img width="221" alt="Skærmbillede 2024-10-17 kl  14 24 03" src="https://github.com/user-attachments/assets/6769b951-8e48-4725-a373-dc64ed6936ce">
---
 .../components/layout/nav-item/nav-item.tsx    |  3 +++
 .../dashboard-extension-manager.tsx            | 18 ++++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

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 41d492ddba..562ff1be3c 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
@@ -122,6 +122,7 @@ export const NavItem = ({
       <NavItemTooltip to={to}>
         <NavLink
           to={to}
+          end
           state={
             from
               ? {
@@ -167,6 +168,7 @@ export const NavItem = ({
                   <NavItemTooltip to={to}>
                     <NavLink
                       to={to}
+                      end
                       className={(props) =>
                         clx(
                           navLinkClassNames({
@@ -189,6 +191,7 @@ export const NavItem = ({
                       <NavItemTooltip to={item.to}>
                         <NavLink
                           to={item.to}
+                          end
                           className={(props) =>
                             clx(
                               navLinkClassNames({
diff --git a/packages/admin/dashboard/src/extensions/dashboard-extension-manager/dashboard-extension-manager.tsx b/packages/admin/dashboard/src/extensions/dashboard-extension-manager/dashboard-extension-manager.tsx
index da8af22e2a..29cb13f254 100644
--- a/packages/admin/dashboard/src/extensions/dashboard-extension-manager/dashboard-extension-manager.tsx
+++ b/packages/admin/dashboard/src/extensions/dashboard-extension-manager/dashboard-extension-manager.tsx
@@ -90,7 +90,7 @@ export class DashboardExtensionManager {
       if (item.path.includes("/:")) {
         if (process.env.NODE_ENV === "development") {
           console.warn(
-            `Menu item for path "${item.path}" can't be added to the sidebar as it contains a parameter.`
+            `[@medusajs/dashboard] Menu item for path "${item.path}" can't be added to the sidebar as it contains a parameter.`
           )
         }
         return
@@ -99,6 +99,19 @@ export class DashboardExtensionManager {
       const isSettingsPath = item.path.startsWith("/settings")
       const key = isSettingsPath ? "settingsExtensions" : "coreExtensions"
 
+      const pathParts = item.path.split("/").filter(Boolean)
+      const parentPath = "/" + pathParts.slice(0, -1).join("/")
+
+      // Check if this is a nested settings path
+      if (isSettingsPath && pathParts.length > 2) {
+        if (process.env.NODE_ENV === "development") {
+          console.warn(
+            `[@medusajs/dashboard] Nested settings menu item "${item.path}" can't be added to the sidebar. Only top-level settings items are allowed.`
+          )
+        }
+        return // Skip this item entirely
+      }
+
       const navItem: INavItem = {
         label: item.label,
         to: item.path,
@@ -106,9 +119,6 @@ export class DashboardExtensionManager {
         items: [],
       }
 
-      const pathParts = item.path.split("/").filter(Boolean)
-      const parentPath = "/" + pathParts.slice(0, -1).join("/")
-
       if (parentPath !== "/" && tempRegistry[parentPath]) {
         if (!tempRegistry[parentPath].items) {
           tempRegistry[parentPath].items = []