fix(plus-menu): exclude AI Help from isActive state

client/src/ui/molecules/plus-menu/index.tsx

@@ -5,6 +5,7 @@ import { useIsServer, useLocale, useViewedState } from "../../../hooks";
 import { useUserData } from "../../../user-context";
 import { MenuEntry } from "../submenu";
 import { FeatureId } from "../../../constants";
+import { useLocation } from "react-router";
 
 export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => {
   const plusUrl = usePlusUrl();
@@ -15,6 +16,13 @@ export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => {
 
   const { isViewed } = useViewedState();
 
+  // Avoid that "Plus" and "AI Help" are both active.
+  const { pathname } = useLocation();
+  const aiHelpUrl = `/${locale}/plus/ai-help`;
+  const isActive =
+    pathname.startsWith(plusUrl.split("#", 2)[0]) &&
+    !pathname.startsWith(aiHelpUrl);
+
   const plusMenu: MenuEntry = {
     label: "Plus",
     id: "mdn-plus",
@@ -32,7 +40,7 @@ export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => {
         hasIcon: true,
         iconClasses: "submenu-icon",
         label: "AI Help (beta)",
-        url: `/${locale}/plus/ai-help`,
+        url: aiHelpUrl,
       },
       ...(!isServer && isAuthenticated
         ? [
@@ -75,5 +83,12 @@ export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => {
   };
   const isOpen = visibleSubMenuId === plusMenu.id;
 
-  return <Menu menu={plusMenu} isOpen={isOpen} toggle={toggleMenu} />;
+  return (
+    <Menu
+      menu={plusMenu}
+      isActive={isActive}
+      isOpen={isOpen}
+      toggle={toggleMenu}
+    />
+  );
 };