Fix current page highlight in Account UI sidebar navigation (#30403)
Correctly set the isActive attribute for NavItems in the PageNav. Also corrects the link for the "Personal info" page in the content.json (no double slash) Fixes #30383 Signed-off-by: René Zeidler <rene.zeidler@gmx.de>
This commit is contained in:
parent
8f72a77582
commit
8031703228
2 changed files with 11 additions and 8 deletions
|
@ -1,5 +1,5 @@
|
|||
[
|
||||
{ "label": "personalInfo", "path": "/" },
|
||||
{ "label": "personalInfo", "path": "" },
|
||||
{
|
||||
"label": "accountSecurity",
|
||||
"children": [
|
||||
|
|
|
@ -17,7 +17,6 @@ import {
|
|||
} from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
To,
|
||||
matchPath,
|
||||
useHref,
|
||||
useLinkClickHandler,
|
||||
|
@ -92,7 +91,7 @@ function NavMenuItem({ menuItem }: NavMenuItemProps) {
|
|||
|
||||
if ("path" in menuItem) {
|
||||
return (
|
||||
<NavLink to={menuItem.path} isActive={isActive}>
|
||||
<NavLink path={menuItem.path} isActive={isActive}>
|
||||
{t(menuItem.label)}
|
||||
</NavLink>
|
||||
);
|
||||
|
@ -116,31 +115,35 @@ function NavMenuItem({ menuItem }: NavMenuItemProps) {
|
|||
);
|
||||
}
|
||||
|
||||
function getFullUrl(path: string) {
|
||||
return `${new URL(environment.baseUrl).pathname}${path}`;
|
||||
}
|
||||
|
||||
function matchMenuItem(currentPath: string, menuItem: MenuItem): boolean {
|
||||
if ("path" in menuItem) {
|
||||
return !!matchPath(menuItem.path, currentPath);
|
||||
return !!matchPath(getFullUrl(menuItem.path), currentPath);
|
||||
}
|
||||
|
||||
return menuItem.children.some((child) => matchMenuItem(currentPath, child));
|
||||
}
|
||||
|
||||
type NavLinkProps = {
|
||||
to: To;
|
||||
path: string;
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
export const NavLink = ({
|
||||
to,
|
||||
path,
|
||||
isActive,
|
||||
children,
|
||||
}: PropsWithChildren<NavLinkProps>) => {
|
||||
const menuItemPath = `${new URL(environment.baseUrl).pathname}${to}`;
|
||||
const menuItemPath = getFullUrl(path);
|
||||
const href = useHref(menuItemPath);
|
||||
const handleClick = useLinkClickHandler(menuItemPath);
|
||||
|
||||
return (
|
||||
<NavItem
|
||||
data-testid={to}
|
||||
data-testid={path}
|
||||
to={href}
|
||||
isActive={isActive}
|
||||
onClick={(event) =>
|
||||
|
|
Loading…
Reference in a new issue