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.
This commit is contained in:
1 parent
a153bc477c
commit
dea86d8c87
2 files changed
+31
-17
No files matched your search
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@medusajs/dashboard": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix(dashboard): Fix active nav link styling for built-in routes
|
||||||
@@ -99,20 +99,27 @@ export const NavItem = ({
|
|||||||
|
|
||||||
const navLinkClassNames = useCallback(
|
const navLinkClassNames = useCallback(
|
||||||
({
|
({
|
||||||
|
to,
|
||||||
isActive,
|
isActive,
|
||||||
isNested = false,
|
isNested = false,
|
||||||
isSetting = false,
|
isSetting = false,
|
||||||
}: {
|
}: {
|
||||||
|
to: string
|
||||||
isActive: boolean
|
isActive: boolean
|
||||||
isNested?: boolean
|
isNested?: boolean
|
||||||
isSetting?: 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,
|
[NESTED_NAV_LINK_CLASSES]: isNested,
|
||||||
[ACTIVE_NAV_LINK_CLASSES]: isActive,
|
[ACTIVE_NAV_LINK_CLASSES]: isActive,
|
||||||
[SETTING_NAV_LINK_CLASSES]: isSetting,
|
[SETTING_NAV_LINK_CLASSES]: isSetting,
|
||||||
}),
|
})
|
||||||
[]
|
},
|
||||||
|
[type, pathname]
|
||||||
)
|
)
|
||||||
|
|
||||||
const isSetting = type === "setting"
|
const isSetting = type === "setting"
|
||||||
@@ -130,11 +137,11 @@ export const NavItem = ({
|
|||||||
}
|
}
|
||||||
: undefined
|
: undefined
|
||||||
}
|
}
|
||||||
className={(props) =>
|
className={({ isActive }) => {
|
||||||
clx(navLinkClassNames({ ...props, isSetting }), {
|
return clx(navLinkClassNames({ isActive, isSetting, to }), {
|
||||||
"max-lg:hidden": !!items?.length,
|
"max-lg:hidden": !!items?.length,
|
||||||
})
|
})
|
||||||
}
|
}}
|
||||||
>
|
>
|
||||||
{type !== "setting" && (
|
{type !== "setting" && (
|
||||||
<div className="flex size-6 items-center justify-center">
|
<div className="flex size-6 items-center justify-center">
|
||||||
@@ -169,15 +176,16 @@ export const NavItem = ({
|
|||||||
<NavLink
|
<NavLink
|
||||||
to={to}
|
to={to}
|
||||||
end
|
end
|
||||||
className={(props) =>
|
className={({ isActive }) => {
|
||||||
clx(
|
return clx(
|
||||||
navLinkClassNames({
|
navLinkClassNames({
|
||||||
...props,
|
to,
|
||||||
isNested: true,
|
isActive,
|
||||||
isSetting,
|
isSetting,
|
||||||
|
isNested: true,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
}
|
}}
|
||||||
>
|
>
|
||||||
<Text size="small" weight="plus" leading="compact">
|
<Text size="small" weight="plus" leading="compact">
|
||||||
{label}
|
{label}
|
||||||
@@ -192,15 +200,16 @@ export const NavItem = ({
|
|||||||
<NavLink
|
<NavLink
|
||||||
to={item.to}
|
to={item.to}
|
||||||
end
|
end
|
||||||
className={(props) =>
|
className={({ isActive }) => {
|
||||||
clx(
|
return clx(
|
||||||
navLinkClassNames({
|
navLinkClassNames({
|
||||||
...props,
|
to: item.to,
|
||||||
isNested: true,
|
isActive,
|
||||||
isSetting,
|
isSetting,
|
||||||
|
isNested: true,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
}
|
}}
|
||||||
>
|
>
|
||||||
<Text size="small" weight="plus" leading="compact">
|
<Text size="small" weight="plus" leading="compact">
|
||||||
{item.label}
|
{item.label}
|
||||||
|
|||||||
Reference in new issue
Block a user