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" && (
@@ -169,15 +176,16 @@ export const NavItem = ({ - clx( + className={({ isActive }) => { + return clx( navLinkClassNames({ - ...props, - isNested: true, + to, + isActive, isSetting, + isNested: true, }) ) - } + }} > {label} @@ -192,15 +200,16 @@ export const NavItem = ({ - clx( + className={({ isActive }) => { + return clx( navLinkClassNames({ - ...props, - isNested: true, + to: item.to, + isActive, isSetting, + isNested: true, }) ) - } + }} > {item.label}