fix(dashboard): Fix styling of nested NavLinks (#9637)

**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">
This commit is contained in:
Kasper Fabricius Kristensen
2024-10-17 16:16:31 +02:00
committed by GitHub
parent e9a06f4b4d
commit b50ac9730e
2 changed files with 17 additions and 4 deletions

View File

@@ -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 = []