fix: Menu active subitems and remove submenu from views (#10803)

Issues Fixed: 

https://pancakeswap.finance/liquidity/positions doesn't highlight Earn
in menu

Removing the dependency between views to make treeshaking work correctly

Refactors:

Instead of using seperate submenu components, make everything done in
menu config

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on removing the `SubMenu` component from various views
across the application, while also making adjustments to how active
sub-menu items are determined and displayed in the menu configuration.

### Detailed summary
- Deleted `SubMenu` from `PositionManagers`, `LandingV4`, `Farms`,
`Predictions`, `Pools`, `CakeStaking`, and `Lottery` views.
- Updated `getActiveSubMenuItem` to include additional matching logic
for sub-menu items.
- Modified `ConfigMenuItemsType` to include `overrideSubNavItems` and
`matchHrefs`.
- Enhanced menu configuration with new `overrideSubNavItems` for various
menu items.
- Adjusted `IfoPageLayout` to remove `SubMenuItems` and related logic.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

apps/web/src/components/Menu/config/config.ts

@@ -18,9 +18,16 @@ import { SUPPORT_CAKE_STAKING, SUPPORT_FARMS, SUPPORT_ONLY_BSC } from 'config/co
 import { getOptionsUrl } from 'utils/getOptionsUrl'
 import { getPerpetualUrl } from 'utils/getPerpetualUrl'
 
-export type ConfigMenuDropDownItemsType = DropdownMenuItems & { hideSubNav?: boolean }
-export type ConfigMenuItemsType = Omit<MenuItemsType, 'items'> & { hideSubNav?: boolean; image?: string } & {
+export type ConfigMenuDropDownItemsType = DropdownMenuItems & {
+  hideSubNav?: boolean
+  overrideSubNavItems?: DropdownMenuItems['items']
+  matchHrefs?: string[]
+}
+export type ConfigMenuItemsType = Omit<MenuItemsType, 'items'> & {
+  hideSubNav?: boolean
+  image?: string
   items?: ConfigMenuDropDownItemsType[]
+  overrideSubNavItems?: ConfigMenuDropDownItemsType[]
 }
 
 export const addMenuItemSupported = (item, chainId) => {
@@ -83,11 +90,33 @@ const config: (
       fillIcon: EarnFillIcon,
       image: '/images/decorations/pe2.png',
       supportChainIds: SUPPORT_FARMS,
-      hideSubNav: true,
+      overrideSubNavItems: [
+        {
+          label: t('Farm / Liquidity'),
+          href: '/liquidity/pools',
+          supportChainIds: SUPPORT_FARMS,
+        },
+        {
+          label: t('Position Manager'),
+          href: '/position-managers',
+          supportChainIds: POSITION_MANAGERS_SUPPORTED_CHAINS,
+        },
+        {
+          label: t('CAKE Staking'),
+          href: '/cake-staking',
+          supportChainIds: SUPPORT_CAKE_STAKING,
+        },
+        {
+          label: t('Syrup Pools'),
+          href: '/pools',
+          supportChainIds: POOL_SUPPORTED_CHAINS,
+        },
+      ].map((item) => addMenuItemSupported(item, chainId)),
       items: [
         {
           label: t('Farm / Liquidity'),
           href: '/liquidity/pools',
+          matchHrefs: ['/liquidity/positions'],
           supportChainIds: SUPPORT_FARMS,
         },
         {
@@ -150,8 +179,17 @@ const config: (
     {
       label: t('Play'),
       icon: GameIcon,
-      hideSubNav: true,
       href: '/prediction',
+      overrideSubNavItems: [
+        {
+          label: t('Prediction'),
+          href: '/prediction',
+        },
+        {
+          label: t('Lottery'),
+          href: '/lottery',
+        },
+      ],
       items: [
         {
           label: t('Prediction (BETA)'),
@@ -186,6 +224,16 @@ const config: (
           label: t('IFO'),
           href: '/ifo',
           image: '/images/ifos/ifo-bunny.png',
+          overrideSubNavItems: [
+            {
+              label: t('Latest'),
+              href: '/ifo',
+            },
+            {
+              label: t('Finished'),
+              href: '/ifo/history',
+            },
+          ],
         },
         {
           label: t('Voting'),
@@ -216,11 +264,6 @@ const config: (
           href: 'https://docs.pancakeswap.finance',
           type: DropdownMenuItemType.EXTERNAL_LINK,
         },
-        {
-          label: t('v4'),
-          href: '/v4',
-          isMobileOnly: true,
-        },
       ].map((item) => addMenuItemSupported(item, chainId)),
     },
   ].map((item) => addMenuItemSupported(item, chainId))

apps/web/src/components/Menu/index.tsx

@@ -27,8 +27,6 @@ const LinkComponent = (linkProps) => {
   return <NextLinkFromReactRouter to={linkProps.href} {...linkProps} prefetch={false} />
 }
 
-const EMPTY_ARRAY = []
-
 const Menu = (props) => {
   const { enabled } = useWebNotifications()
   const { chainId } = useActiveChainId()
@@ -90,7 +88,7 @@ const Menu = (props) => {
   const activeMenuItem = useMemo(() => getActiveMenuItem({ menuConfig: menuItems, pathname }), [menuItems, pathname])
   const activeSubMenuItem = useMemo(
     () => getActiveSubMenuItem({ menuItem: activeMenuItem, pathname }),
-    [menuItems, pathname],
+    [pathname, activeMenuItem],
   )
   const activeSubChildMenuItem = useMemo(
     () => getActiveSubMenuChildItem({ menuItem: activeMenuItem, pathname }),
@@ -129,7 +127,13 @@ const Menu = (props) => {
       setLang={setLanguage}
       cakePriceUsd={cakePrice.eq(BIG_ZERO) ? undefined : cakePrice}
       links={menuItems}
-      subLinks={activeMenuItem?.hideSubNav || activeSubMenuItem?.hideSubNav ? EMPTY_ARRAY : activeMenuItem?.items}
+      subLinks={
+        activeSubMenuItem?.overrideSubNavItems ??
+        activeMenuItem?.overrideSubNavItems ??
+        (activeMenuItem?.hideSubNav || activeSubMenuItem?.hideSubNav
+          ? []
+          : activeSubMenuItem?.items ?? activeMenuItem?.items)
+      }
       footerLinks={getFooterLinks}
       activeItem={activeMenuItem?.href}
       activeSubItem={activeSubMenuItem?.href}

apps/web/src/components/Menu/utils.ts

@@ -11,7 +11,15 @@ export const getActiveMenuItem = ({ pathname, menuConfig }: { pathname: string;
 
 export const getActiveSubMenuItem = ({ pathname, menuItem }: { pathname: string; menuItem?: ConfigMenuItemsType }) => {
   const activeSubMenuItems =
-    menuItem?.items?.filter((subMenuItem) => subMenuItem?.href && pathname.startsWith(subMenuItem?.href)) ?? []
+    menuItem?.items?.filter((subMenuItem) => {
+      if (subMenuItem?.href && pathname.startsWith(subMenuItem?.href)) {
+        return true
+      }
+      if (subMenuItem?.matchHrefs?.some((matchHref) => pathname.startsWith(matchHref))) {
+        return true
+      }
+      return false
+    }) ?? []
 
   // Pathname doesn't include any submenu item href - return undefined
   if (!activeSubMenuItems || activeSubMenuItems.length === 0) {
@@ -37,8 +45,8 @@ export const getActiveSubMenuChildItem = ({
   menuItem?: ConfigMenuItemsType
 }) => {
   const getChildItems = menuItem?.items
-    ?.map((i) => i.items)
-    ?.filter((i) => Boolean(i))
+    ?.map((i) => [...(i.items ?? []), ...(i.overrideSubNavItems ?? [])])
+    ?.filter(Boolean)
     .flat()
 
   const activeSubMenuItems =

apps/web/src/views/CakeStaking/index.tsx

@@ -10,7 +10,6 @@ import useTheme from 'hooks/useTheme'
 import { useCallback, useState } from 'react'
 import styled from 'styled-components'
 import { useGauges } from 'views/GaugesVoting/hooks/useGauges'
-import { SubMenu } from 'views/PositionManagers/components/SubMenu'
 import { BenefitCard } from './components/BenefitCard'
 import { CakeRewardsCard } from './components/CakeRewardsCard'
 import { LockCake } from './components/LockCake'
@@ -36,7 +35,6 @@ const CakeStaking = () => {
       <ModalV2 isOpen={cakeRewardModalVisible} closeOnOverlayClick onDismiss={handleDismiss}>
         <CakeRewardsCard onDismiss={handleDismiss} />
       </ModalV2>
-      <SubMenu />
       <StyledPageHeader background={isMobile ? theme.colors.gradientInverseBubblegum : undefined}>
         <PageHead />
         <LockCake />

apps/web/src/views/Farms/index.tsx

@@ -1,6 +1,5 @@
 import { ConnectorNames } from 'config/wallet'
 import { ExtendEthereum } from 'global'
-import { SubMenu } from 'views/PositionManagers/components/SubMenu'
 import { useAccount } from 'wagmi'
 import { mainnet } from 'wagmi/chains'
 import FarmsV3 from './FarmsV3'
@@ -19,12 +18,7 @@ export function useIsBloctoETH() {
 }
 
 export const FarmsV3PageLayout: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  return (
-    <>
-      <SubMenu />
-      <FarmsV3>{children}</FarmsV3>
-    </>
-  )
+  return <FarmsV3>{children}</FarmsV3>
 }
 
 export { FarmsContext, FarmsV3Context }

apps/web/src/views/Ifos/index.tsx

@@ -1,16 +1,13 @@
-import { useEffect, useMemo } from 'react'
-import { SubMenuItems, useModal } from '@pancakeswap/uikit'
+import { useEffect } from 'react'
+import { useModal } from '@pancakeswap/uikit'
 import { useTranslation } from '@pancakeswap/localization'
-import { useRouter } from 'next/router'
 import { useUserNotUsCitizenAcknowledgement, IdType } from 'hooks/useUserIsUsCitizenAcknowledgement'
 import USCitizenConfirmModal from 'components/Modal/USCitizenConfirmModal'
 import Hero from './components/Hero'
 import IfoProvider from './contexts/IfoContext'
 
 export const IfoPageLayout = ({ children }) => {
   const { t } = useTranslation()
-  const router = useRouter()
-  const isExact = router.route === '/ifo'
 
   const [userNotUsCitizenAcknowledgement] = useUserNotUsCitizenAcknowledgement(IdType.IFO)
   const [onUSCitizenModalPresent] = useModal(
@@ -39,23 +36,8 @@ export const IfoPageLayout = ({ children }) => {
     return () => clearTimeout(timer)
   }, [userNotUsCitizenAcknowledgement, onUSCitizenModalPresent])
 
-  const subMenuItems = useMemo(
-    () => [
-      {
-        label: t('Latest'),
-        href: '/ifo',
-      },
-      {
-        label: t('Finished'),
-        href: '/ifo/history',
-      },
-    ],
-    [t],
-  )
-
   return (
     <IfoProvider>
-      <SubMenuItems items={subMenuItems} activeItem={isExact ? '/ifo' : '/ifo/history'} />
       <Hero />
       {children}
     </IfoProvider>

apps/web/src/views/LandingV4/index.tsx

@@ -6,7 +6,6 @@ import { ExploreHooks } from 'views/LandingV4/components/ExploreHooks'
 import { Features } from 'views/LandingV4/components/Features'
 import { NewsAndEvents } from 'views/LandingV4/components/NewsAndEvents'
 import { StartBuilding } from 'views/LandingV4/components/StartBuilding'
-import { SubMenu } from 'views/LandingV4/components/SubMenu'
 
 export const LandingV4 = () => {
   const { asPath } = useRouter()
@@ -22,7 +21,6 @@ export const LandingV4 = () => {
 
   return (
     <Box ref={wrapperEl}>
-      <SubMenu />
       <Banner />
       <Features />
       <StartBuilding />