diff --git a/client/src/ui/molecules/plus-menu/index.tsx b/client/src/ui/molecules/plus-menu/index.tsx index 9c3d4be8909a..9455dc5011cb 100644 --- a/client/src/ui/molecules/plus-menu/index.tsx +++ b/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
; + return ( + + ); };