♻️(frontend) menu item activation on multiple path

certificate entry on learner sidebar menu can render multiple routes:
* order certificate
* enrollment certificate

our menu item must be selected when any of theses two route is active.

src/frontend/js/widgets/Dashboard/components/DashboardSidebar/components/MenuNavLink/index.tsx

@@ -11,10 +11,13 @@ interface MenuNavLinkProps {
 
 const MenuNavLink = ({ link, badgeCount }: MenuNavLinkProps) => {
   const location = useLocation();
+  const activePaths = [...(link.activePaths || []), link.to];
+  const isMenuNavLinkActive = activePaths.some((path) => isMenuLinkActive(path, location));
+
   return (
     <li
       className={classNames('dashboard-sidebar__container__nav__item', {
-        active: isMenuLinkActive(link.to, location),
+        active: isMenuNavLinkActive,
       })}
     >
       <NavLink to={link.to} end>

src/frontend/js/widgets/Dashboard/components/DashboardSidebar/index.tsx

@@ -8,6 +8,7 @@ export interface MenuLink {
   to: string;
   label: string;
   component?: ReactNode;
+  activePaths?: string[];
 }
 
 export interface DashboardSidebarProps extends PropsWithChildren {

src/frontend/js/widgets/Dashboard/components/LearnerDashboardSidebar/index.tsx

@@ -40,6 +40,13 @@ export const LearnerDashboardSidebar = (props: Partial<DashboardSidebarProps>) =
       ].map((path) => ({
         to: generatePath(path),
         label: getRouteLabel(path),
+        activePaths:
+          path === LearnerDashboardPaths.CERTIFICATES
+            ? [
+                LearnerDashboardPaths.ORDER_CERTIFICATES,
+                LearnerDashboardPaths.ENROLLMENT_CERTIFICATES,
+              ]
+            : undefined,
       })),
     [],
   );