Merge pull request #1671 from mars-protocol/develop

v3.0.0

Author: linkielink

src/components/header/navigation/mobile/MobileNavigation.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import AccountMenu from 'components/account/AccountMenu'
 import AccountSummary from 'components/account/AccountSummary'
 import Card from 'components/common/Card'
-import { ChevronDown, Discord, Telegram, Twitter } from 'components/common/Icons'
+import { Check, ChevronDown, Discord, Telegram, Twitter } from 'components/common/Icons'
 import Settings from 'components/common/Settings'
 import Text from 'components/common/Text'
 import ChainSelect from 'components/header/ChainSelect'
@@ -13,7 +13,7 @@ import useAccountId from 'hooks/accounts/useAccountId'
 import useAccountTitle from 'hooks/accounts/useAccountTitle'
 import useChainConfig from 'hooks/chain/useChainConfig'
 import useV1Account from 'hooks/v1/useV1Account'
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 import useStore from 'store'
 import { DocURL } from 'types/enums'
@@ -55,10 +55,33 @@ function Content(props: Props & { account?: Account }) {
   const address = useStore((s) => s.address)
   const { pathname } = useLocation()
   const currentPage = getPage(pathname, chainConfig)
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
 
   const menu = useMemo(() => menuTree(chainConfig), [chainConfig, menuTree])
   const accountTitle = useAccountTitle(account, true)
 
+  const menuItems = useMemo(() => {
+    const items: Array<{ value: string; label: string }> = []
+    for (const item of menu) {
+      if (item.submenu) {
+        const filteredItems = item.submenu.filter((subItem) => !subItem.isSeparator)
+        for (const subItem of filteredItems) {
+          const value = subItem.page || subItem.externalUrl || ''
+          items.push({ value, label: subItem.label })
+        }
+      } else {
+        items.push({ value: item.pages[0], label: item.label })
+      }
+    }
+    return items
+  }, [menu])
+
+  const currentPageLabel = useMemo(() => {
+    const item = menuItems.find((item) => item.value === currentPage)
+    return item?.label || 'Select Page'
+  }, [menuItems, currentPage])
+
   useEffect(() => {
     if (mobileNavExpanded) {
       document.body.classList.add('h-screen-full', 'overflow-hidden')
@@ -71,8 +94,26 @@ function Content(props: Props & { account?: Account }) {
     }
   }, [mobileNavExpanded])
 
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false)
+      }
+    }
+
+    if (isDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isDropdownOpen])
+
   const selectPage = useCallback(
     (page: Page) => {
+      setIsDropdownOpen(false)
       window.scrollTo(0, 0)
       if (typeof window !== 'undefined') setTimeout(() => window.scrollTo(0, 0), 200)
       useStore.setState({ mobileNavExpanded: false })
@@ -101,38 +142,32 @@ function Content(props: Props & { account?: Account }) {
         </div>
         <div className='flex items-center justify-between w-full'>
           <Text size='sm'>Page:</Text>
-          <div className='relative'>
-            <select
-              className='py-1.5 pl-2 pr-6 text-sm text-white bg-transparent border rounded-sm appearance-none border-white/30 focus:outline-none active:outline-none'
-              onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
-                selectPage(event.target.value as Page)
-              }
-              defaultValue={currentPage}
+          <div className='relative' ref={dropdownRef}>
+            <button
+              className='py-1.5 pl-2 pr-6 text-sm text-white bg-transparent border rounded-sm border-white/30 focus:outline-none active:outline-none leading-normal min-w-[140px] text-left'
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
             >
-              {menu.map((item) => {
-                if (item.submenu) {
-                  return item.submenu
-                    .filter((subItem) => !subItem.isSeparator && !subItem.icon)
-                    .map((subItem) => {
-                      const value = subItem.page || subItem.externalUrl || ''
-                      return (
-                        <option key={value} value={value}>
-                          {`${item.label} - ${subItem.label}`}
-                        </option>
-                      )
-                    })
-                }
-
-                return (
-                  <option key={item.pages[0]} value={item.pages[0]}>
-                    {item.label}
-                  </option>
-                )
-              })}
-            </select>
-            <div className='absolute w-3 -translate-y-1/2 right-2 top-1/2 -z-1'>
+              {currentPageLabel}
+            </button>
+            <div className='absolute w-3 -translate-y-1/2 right-2 top-1/2 pointer-events-none'>
               <ChevronDown />
             </div>
+            {isDropdownOpen && (
+              <div className='absolute top-full left-0 right-0 mt-1 bg-white/10 backdrop-blur-md border border-white/30 rounded-sm max-h-[400px] overflow-y-auto z-50'>
+                {menuItems.map((item) => (
+                  <button
+                    key={item.value}
+                    className='w-full px-2 py-2 text-sm text-left hover:bg-white/20 transition-colors flex items-center gap-2'
+                    onClick={() => selectPage(item.value as Page)}
+                  >
+                    <span className='w-4 h-4 flex items-center justify-center flex-shrink-0'>
+                      {item.value === currentPage && <Check className='w-4 h-4 text-white' />}
+                    </span>
+                    <span className='text-white flex-1'>{item.label}</span>
+                  </button>
+                ))}
+              </div>
+            )}
           </div>
         </div>
         {!isV1 && address && (

src/components/trade/TradeModule/index.tsx

@@ -18,7 +18,7 @@ export default function TradeModule(props: Props) {
       <div
         className={classNames(
           'md:min-h-[850px] md:h-full',
-          'relative isolate max-w-full overflow-hidden pb-4 z-30 flex flex-wrap flex-col bg-surface',
+          'relative isolate max-w-full overflow-hidden pb-4 z-30 flex flex-col bg-surface',
         )}
       >
         <SwapForm

tailwind.config.ts

@@ -146,13 +146,13 @@ module.exports = {
         'surface-dark': 'hsl(var(--color-surface-dark) / <alpha-value>)',
       },
       containers: {
-        'nav-0': '140px',
-        'nav-1': '225px',
-        'nav-2': '310px',
-        'nav-3': '440px',
-        'nav-4': '540px',
-        'nav-5': '600px',
-        'nav-6': '650px',
+        'nav-0': '200px',
+        'nav-1': '300px',
+        'nav-2': '400px',
+        'nav-3': '500px',
+        'nav-4': '600px',
+        'nav-5': '700px',
+        'nav-6': '800px',
       },
       fontFamily: {
         sans: ['Inter', 'sans-serif'],