fix(swap): mobile menu bar hide broken buttons (#6608)

Author: crutch12

apps/cowswap-frontend/src/modules/application/containers/AppMenu/index.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren, ReactNode, useMemo } from 'react'
 import { SUPPORTED_LOCALES } from '@cowprotocol/common-const'
 import { useMediaQuery } from '@cowprotocol/common-hooks'
 import { isInjectedWidget } from '@cowprotocol/common-utils'
-import { Color, Media, MenuBar } from '@cowprotocol/ui'
+import { Color, MenuBar } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
 import { useLingui } from '@lingui/react/macro'
@@ -19,6 +19,8 @@ import { useIsInternationalizationEnabled } from 'common/hooks/featureFlags/useI
 import { useCustomTheme } from 'common/hooks/useCustomTheme'
 import { useMenuItems } from 'common/hooks/useMenuItems'
 
+import { HideMobile, isMobileQuery } from './styled'
+
 import { NAV_ITEMS, PRODUCT_VARIANT } from '../App/menuConsts'
 
 const LinkComponent = ({ href, children }: PropsWithChildren<{ href: string }>): ReactNode => {
@@ -41,7 +43,7 @@ export function AppMenu({ children }: AppMenuProps): ReactNode {
   const menuItems = useMenuItems()
   const [darkMode, toggleDarkMode] = useDarkModeManager()
   const { setLocale } = useUserLocaleManager()
-  const isMobile = useMediaQuery(Media.upToMedium(false))
+  const isMobile = useMediaQuery(isMobileQuery(false))
   const customTheme = useCustomTheme()
   const getTradeUrlParams = useGetTradeUrlParams()
   const { t } = useLingui()
@@ -108,7 +110,7 @@ export function AppMenu({ children }: AppMenuProps): ReactNode {
       id={APP_HEADER_ELEMENT_ID}
       languageNavItems={languageNavItems}
       navItems={navItems}
-      persistentAdditionalContent={isMobile ? null : children} // This will stay at its original location
+      persistentAdditionalContent={isMobile ? null : <HideMobile>{children}</HideMobile>} // This will stay at its original location
       productVariant={PRODUCT_VARIANT}
       settingsNavItems={settingsNavItems}
       showGlobalSettings

apps/cowswap-frontend/src/modules/application/containers/AppMenu/styled.ts

@@ -0,0 +1,11 @@
+import { Media } from '@cowprotocol/ui'
+
+import styled from 'styled-components/macro'
+
+export const isMobileQuery = Media.upToMedium
+
+export const HideMobile = styled.div`
+  ${isMobileQuery(true)} {
+    display: none;
+  }
+`

libs/ui/src/pure/MenuBar/index.tsx

@@ -48,6 +48,8 @@ import {
   RightAligned,
   RootNavItem,
   StyledDropdownContentItem,
+  HideMobile,
+  isMobileQuery,
 } from './styled'
 
 import { Media } from '../../consts'
@@ -933,7 +935,7 @@ export const MenuBar = (props: MenuBarProps) => {
   // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
   const handleSettingsToggle = () => setIsSettingsOpen((prev) => !prev)
 
-  const isMobile = useMediaQuery(Media.upToLarge(false))
+  const isMobile = useMediaQuery(isMobileQuery(false))
   const isMedium = useMediaQuery(Media.upToMedium(false))
 
   useOnClickOutside([menuRef], () => setIsDaoOpen(false))
@@ -999,20 +1001,22 @@ export const MenuBar = (props: MenuBarProps) => {
         <ProductLogo variant={productVariant} logoIconOnly={isMobile} height={30} href="/" theme={customTheme} />
 
         {!isMobile && (
-          <NavItems ref={navItemsRef}>
-            {navItems.map((item, index) => (
-              <NavItem
-                key={index}
-                item={item}
-                LinkComponent={LinkComponent}
-                mobileMode={isMobile}
-                openDropdown={openDropdown}
-                closeDropdown={() => setOpenDropdown(null)}
-                setOpenDropdown={setOpenDropdown}
-                rootDomain={rootDomain}
-              />
-            ))}
-          </NavItems>
+          <HideMobile>
+            <NavItems ref={navItemsRef}>
+              {navItems.map((item, index) => (
+                <NavItem
+                  key={index}
+                  item={item}
+                  LinkComponent={LinkComponent}
+                  mobileMode={isMobile}
+                  openDropdown={openDropdown}
+                  closeDropdown={() => setOpenDropdown(null)}
+                  setOpenDropdown={setOpenDropdown}
+                  rootDomain={rootDomain}
+                />
+              ))}
+            </NavItems>
+          </HideMobile>
         )}
 
         <RightAligned mobileMode={isMedium} flexFlowMobile="row wrap">

libs/ui/src/pure/MenuBar/styled.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components/macro'
 
-import { Font } from '../../consts'
+import { Font, Media } from '../../consts'
 import { UI } from '../../enum'
 import { CowSwapTheme } from '../../types'
 import { ProductLogoWrapper } from '../ProductLogo'
@@ -769,3 +769,11 @@ export const GlobalSettingsButton = styled.button<{ mobileMode?: boolean }>`
     }
   }
 `
+
+export const isMobileQuery = Media.upToLarge
+
+export const HideMobile = styled.div`
+  ${isMobileQuery(true)} {
+    display: none;
+  }
+`