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>

js/apps/account-ui/public/content.json

@@ -1,5 +1,5 @@
 [
-  { "label": "personalInfo", "path": "/" },
+  { "label": "personalInfo", "path": "" },
   {
     "label": "accountSecurity",
     "children": [

js/apps/account-ui/src/root/PageNav.tsx

@@ -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) =>