chore(menu): polish menu interface

apps/kyberswap-interface/src/components/Header/groups/AboutNavGroup.tsx

@@ -1,53 +1,51 @@
 import { Trans } from '@lingui/macro'
 import { useLocation } from 'react-router-dom'
-import { useMedia } from 'react-use'
 
-import NavGroup from 'components/Header/groups/NavGroup'
+import NavGroup, { type DropdownAlign } from 'components/Header/groups/NavGroup'
 import { DropdownTextAnchor, StyledNavExternalLink, StyledNavLink } from 'components/Header/styleds'
 import { APP_PATHS } from 'constants/index'
 import useTracking, { TRACKING_EVENT_TYPE } from 'hooks/useTracking'
-import { MEDIA_WIDTHS } from 'theme'
 
-const AboutNavGroup = () => {
+type Props = {
+  dropdownAlign?: DropdownAlign
+}
+
+const AboutNavGroup = ({ dropdownAlign }: Props) => {
   const { pathname } = useLocation()
   const isActive = pathname.includes(APP_PATHS.ABOUT)
-  const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
 
   const { trackingHandler } = useTracking()
 
-  if (upToSmall) return null
   return (
-    <span className="hidden xs:inline-flex">
-      <NavGroup
-        dropdownAlign={upToSmall ? 'right' : 'left'}
-        isActive={isActive}
-        anchor={
-          <DropdownTextAnchor>
-            <Trans>About</Trans>
-          </DropdownTextAnchor>
-        }
-        dropdownContent={
-          <div className="flex flex-col">
-            <StyledNavLink id="about-kyberswap" to={`${APP_PATHS.ABOUT}/kyberswap`}>
-              <Trans>KyberSwap</Trans>
-            </StyledNavLink>
+    <NavGroup
+      dropdownAlign={dropdownAlign}
+      isActive={isActive}
+      anchor={
+        <DropdownTextAnchor>
+          <Trans>About</Trans>
+        </DropdownTextAnchor>
+      }
+      dropdownContent={
+        <div className="flex flex-col">
+          <StyledNavLink id="about-kyberswap" to={`${APP_PATHS.ABOUT}/kyberswap`}>
+            <Trans>KyberSwap</Trans>
+          </StyledNavLink>
 
-            <StyledNavLink id="about-knc" to={`${APP_PATHS.ABOUT}/knc`}>
-              <Trans> KNC</Trans>
-            </StyledNavLink>
-            <StyledNavExternalLink
-              onClick={() => {
-                trackingHandler(TRACKING_EVENT_TYPE.BLOG_MENU_CLICKED)
-              }}
-              target="_blank"
-              href="https://blog.kyberswap.com"
-            >
-              <Trans>Blog</Trans>
-            </StyledNavExternalLink>
-          </div>
-        }
-      />
-    </span>
+          <StyledNavLink id="about-knc" to={`${APP_PATHS.ABOUT}/knc`}>
+            <Trans> KNC</Trans>
+          </StyledNavLink>
+          <StyledNavExternalLink
+            onClick={() => {
+              trackingHandler(TRACKING_EVENT_TYPE.BLOG_MENU_CLICKED)
+            }}
+            target="_blank"
+            href="https://blog.kyberswap.com"
+          >
+            <Trans>Blog</Trans>
+          </StyledNavExternalLink>
+        </div>
+      }
+    />
   )
 }
 

apps/kyberswap-interface/src/components/Header/groups/CampaignNavGroup.tsx

@@ -1,31 +1,30 @@
 import { Trans, t } from '@lingui/macro'
 import { useState } from 'react'
 import { useLocation } from 'react-router-dom'
-import { useMedia } from 'react-use'
 
 import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import Column from 'components/Column'
-import NavGroup from 'components/Header/groups/NavGroup'
-import { DropdownTextAnchor, StyledNavLink } from 'components/Header/styleds'
-import { NewLabel } from 'components/Menu'
+import NavGroup, { type DropdownAlign } from 'components/Header/groups/NavGroup'
+import { DropdownTextAnchor, NewLabel, StyledNavLink } from 'components/Header/styleds'
 import { APP_PATHS } from 'constants/index'
 import { cn } from 'utils/cn'
 
 const showCampaignNew = new Date() < new Date('2026-05-04T23:59:59Z')
 
-const CampaignNavGroup = () => {
+type Props = {
+  dropdownAlign?: DropdownAlign
+}
+
+const CampaignNavGroup = ({ dropdownAlign }: Props) => {
   const { pathname } = useLocation()
   const isActiveMayTrading = pathname.includes('/campaigns/may-trading')
   const isActive = pathname.includes('/campaigns') && !isActiveMayTrading
-  const upTo500 = useMedia('(max-width: 500px)')
 
   const [showStip, setShowStip] = useState(false)
 
-  if (upTo500) return null
-
   return (
     <NavGroup
-      dropdownAlign={upTo500 ? 'right' : 'left'}
+      dropdownAlign={dropdownAlign}
       isActive={isActive}
       anchor={
         <DropdownTextAnchor className="relative flex w-max">

apps/kyberswap-interface/src/components/Header/groups/EarnNavGroup.tsx

@@ -8,17 +8,17 @@ import { ReactComponent as PositionsIcon } from 'assets/svg/earn/ic_earn_positio
 import { ReactComponent as FarmingIcon } from 'assets/svg/earn/ic_farming.svg'
 import { ReactComponent as ListSmartExitIcon } from 'assets/svg/earn/ic_list_smart_exit.svg'
 import { ReactComponent as KemIcon } from 'assets/svg/kyber/kem.svg'
-import NavGroup from 'components/Header/groups/NavGroup'
-import { DropdownTextAnchor, StyledNavLink } from 'components/Header/styleds'
-import { NewLabel } from 'components/Menu'
+import NavGroup, { type DropdownAlign } from 'components/Header/groups/NavGroup'
+import { DropdownTextAnchor, NewLabel, StyledNavLink } from 'components/Header/styleds'
 import { APP_PATHS } from 'constants/index'
 import { FilterTag } from 'pages/Earns/PoolExplorer/Filter'
 import { MEDIA_WIDTHS } from 'theme'
 
-const EarnNavGroup = () => {
-  const upTo430 = useMedia('(max-width: 430px)')
-  const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
+type Props = {
+  dropdownAlign?: DropdownAlign
+}
 
+const EarnNavGroup = ({ dropdownAlign }: Props) => {
   const { pathname, search } = useLocation()
   const isActive = [
     APP_PATHS.EARN,
@@ -28,9 +28,11 @@ const EarnNavGroup = () => {
     APP_PATHS.EARN_SMART_EXIT,
   ].some(path => pathname.includes(path))
 
+  const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
+
   return (
     <NavGroup
-      dropdownAlign={upTo430 ? 'right' : 'left'}
+      dropdownAlign={dropdownAlign}
       isActive={isActive}
       anchor={
         <DropdownTextAnchor>

apps/kyberswap-interface/src/components/Header/groups/KyberDaoGroup.tsx

@@ -1,28 +1,30 @@
 import { Trans } from '@lingui/macro'
 import { useLocation } from 'react-router-dom'
-import { useMedia } from 'react-use'
 
 import { ReactComponent as KyberLogo } from 'assets/svg/kyber/knc_black.svg'
 import Column from 'components/Column'
-import NavGroup from 'components/Header/groups/NavGroup'
+import NavGroup, { type DropdownAlign } from 'components/Header/groups/NavGroup'
 import { DropdownTextAnchor, StyledNavLink } from 'components/Header/styleds'
 import StakeIcon from 'components/Icons/Stake'
 import VoteIcon from 'components/Icons/Vote'
 import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant'
 import { APP_PATHS } from 'constants/index'
 import useTracking, { TRACKING_EVENT_TYPE } from 'hooks/useTracking'
 
-const KyberDAONavGroup = () => {
+type Props = {
+  dropdownAlign?: DropdownAlign
+}
+
+const KyberDAONavGroup = ({ dropdownAlign }: Props) => {
   const { pathname } = useLocation()
   const isActive = pathname.includes(APP_PATHS.KYBERDAO_STAKE)
+
   const { trackingHandler } = useTracking()
-  const upToMedium = useMedia('(max-width: 992px)')
-  if (upToMedium) return null
 
   return (
     <span id={TutorialIds.KYBER_DAO_LINK} className="inline-flex">
       <NavGroup
-        dropdownAlign={upToMedium ? 'right' : 'left'}
+        dropdownAlign={dropdownAlign}
         isActive={isActive}
         anchor={
           <DropdownTextAnchor>

apps/kyberswap-interface/src/components/Header/groups/NavGroup.tsx

@@ -4,7 +4,7 @@ import { isMobile } from 'react-device-detect'
 import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import { cn } from 'utils/cn'
 
-type DropdownAlign = 'left' | 'right' | 'center'
+export type DropdownAlign = 'left' | 'right' | 'center'
 
 type Props = {
   id?: string

apps/kyberswap-interface/src/components/Header/groups/SwapNavGroup.tsx

@@ -5,32 +5,36 @@ import { useMedia } from 'react-use'
 
 import { ReactComponent as CrossChainIcon } from 'assets/svg/cross_chain_icon.svg'
 import { ReactComponent as LimitOrderIcon } from 'assets/svg/limit_order.svg'
-import NavGroup from 'components/Header/groups/NavGroup'
-import { DropdownTextAnchor, StyledNavLink } from 'components/Header/styleds'
-import { NewLabel } from 'components/Menu'
+import NavGroup, { type DropdownAlign } from 'components/Header/groups/NavGroup'
+import { DropdownTextAnchor, NewLabel, StyledNavLink } from 'components/Header/styleds'
 import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant'
 import { APP_PATHS, CHAINS_SUPPORT_CROSS_CHAIN } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import { useTutorialSwapGuide } from 'state/tutorial/hooks'
+import { MEDIA_WIDTHS } from 'theme'
 import { isInSafeApp, isSupportLimitOrder } from 'utils'
 import { cn } from 'utils/cn'
 
 const IconWrapper = ({ children }: { children: React.ReactNode }) => (
   <div className="flex size-4 flex-[0_0_16px] items-center">{children}</div>
 )
 
-const SwapNavGroup = () => {
+type Props = {
+  dropdownAlign?: DropdownAlign
+}
+
+const SwapNavGroup = ({ dropdownAlign }: Props) => {
   const { networkInfo, chainId } = useActiveWeb3React()
   const { pathname } = useLocation()
-  const upTo430 = useMedia('(max-width: 430px)')
+  const isActive = [APP_PATHS.SWAP, APP_PATHS.LIMIT, APP_PATHS.CROSS_CHAIN].some(path => pathname.startsWith(path))
 
-  const [{ show: isShowTutorial = false, stepInfo }] = useTutorialSwapGuide()
+  const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
 
-  const isActive = [APP_PATHS.SWAP, APP_PATHS.LIMIT, APP_PATHS.CROSS_CHAIN].some(path => pathname.startsWith(path))
+  const [{ show: isShowTutorial = false, stepInfo }] = useTutorialSwapGuide()
 
   return (
     <NavGroup
-      dropdownAlign={upTo430 ? 'center' : 'left'}
+      dropdownAlign={dropdownAlign}
       isActive={isActive}
       forceOpen={isShowTutorial && stepInfo?.selector === `#${TutorialIds.BRIDGE_LINKS}`}
       anchor={
@@ -39,7 +43,10 @@ const SwapNavGroup = () => {
         </DropdownTextAnchor>
       }
       dropdownContent={
-        <div id={TutorialIds.BRIDGE_LINKS} className={cn('flex flex-col', upTo430 ? 'min-w-[160px]' : 'min-w-[250px]')}>
+        <div
+          id={TutorialIds.BRIDGE_LINKS}
+          className={cn('flex flex-col', upToSmall ? 'min-w-[180px]' : 'min-w-[240px]')}
+        >
           <StyledNavLink
             id={`swapv2-nav-link`}
             to={`${APP_PATHS.SWAP}/${networkInfo.route}`}

apps/kyberswap-interface/src/components/Header/index.tsx

@@ -39,9 +39,12 @@ export default function Header() {
   const upToXXSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToXXSmall}px)`)
   const upToLarge = useMedia(`(max-width: ${MEDIA_WIDTHS.upToLarge}px)`)
   const upToMedium = useMedia(`(max-width: ${MEDIA_WIDTHS.upToMedium}px)`)
+  const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
   const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
+  const upTo500 = useMedia('(max-width: 500px)')
 
   const hide = isEmbeddedSwap && upToLarge
+  const navGroupDropdownAlign = upToMedium ? 'right' : 'left'
 
   const menu = (
     <div className="flex items-center gap-2 rounded-[36px] border border-background bg-background px-1.5 text-subText hover:border-border-primary hover:brightness-105">
@@ -85,23 +88,23 @@ export default function Header() {
           </Link>
         )}
         {!isEmbeddedSwap && (
-          <div className="flex w-full flex-row flex-nowrap items-center justify-center gap-1 max-lg:justify-end max-xxs:gap-0">
-            <SwapNavGroup />
-            <EarnNavGroup />
+          <div className="flex w-full flex-row flex-nowrap items-center justify-center gap-1 max-lg:justify-end">
+            <SwapNavGroup dropdownAlign={navGroupDropdownAlign} />
+            <EarnNavGroup dropdownAlign={navGroupDropdownAlign} />
 
             {!upToExtraSmall && (
               <StyledNavLink to={`${APP_PATHS.MARKET_OVERVIEW}`}>
                 <Trans>Market</Trans>
               </StyledNavLink>
             )}
-            <CampaignNavGroup />
-            <KyberDAONavGroup />
+            {!upTo500 && <CampaignNavGroup dropdownAlign={navGroupDropdownAlign} />}
+            {!upToMedium && <KyberDAONavGroup dropdownAlign={navGroupDropdownAlign} />}
             {!upToMedium && (
               <StyledNavExternalLink target="_blank" href={AGGREGATOR_ANALYTICS_URL}>
                 <Trans>Analytics</Trans>
               </StyledNavExternalLink>
             )}
-            <AboutNavGroup />
+            {!upToSmall && <AboutNavGroup dropdownAlign={navGroupDropdownAlign} />}
             <RecapButton />
           </div>
         )}

apps/kyberswap-interface/src/components/Header/styleds.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, forwardRef } from 'react'
+import { type CSSProperties, type PropsWithChildren, forwardRef } from 'react'
 import { NavLink as BaseNavLink, NavLinkProps } from 'react-router-dom'
 
 import usePrefetchOnIntent from 'hooks/usePrefetchOnIntent'
@@ -95,3 +95,7 @@ export const DropdownTextAnchor = ({ className, ...props }: React.HTMLAttributes
     {...props}
   />
 )
+
+export const NewLabel = ({ isNew, children }: PropsWithChildren<{ isNew?: boolean }>) => (
+  <span className={cn('ml-1 text-[10px]', isNew ? 'text-red' : 'text-subText')}>{children}</span>
+)