refactor screen size show menu (#2171)

src/components/Header/groups/AboutNavGroup.tsx

@@ -4,13 +4,14 @@ import { Flex } from 'rebass'
 import styled from 'styled-components'
 
 import { APP_PATHS } from 'constants/index'
+import { THRESHOLD_HEADER } from 'constants/styles'
 
 import { DropdownTextAnchor, StyledNavLink } from '../styleds'
 import NavGroup from './NavGroup'
 
 const AboutWrapper = styled.span`
   display: inline-flex;
-  @media (max-width: 1440px) {
+  @media (max-width: ${THRESHOLD_HEADER.ABOUT}) {
     display: none;
   }
 `

src/components/Header/groups/AnalyticNavGroup.tsx

@@ -3,6 +3,7 @@ import { Flex } from 'rebass'
 import styled from 'styled-components'
 
 import { AGGREGATOR_ANALYTICS_URL, PROMM_ANALYTICS_URL } from 'constants/index'
+import { THRESHOLD_HEADER } from 'constants/styles'
 import { useActiveWeb3React } from 'hooks'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 
@@ -12,7 +13,7 @@ import NavGroup from './NavGroup'
 const AnalyticsWrapper = styled.span`
   display: flex;
   align-items: center;
-  @media (max-width: 1320px) {
+  @media (max-width: ${THRESHOLD_HEADER.ANALYTIC}) {
     display: none;
   }
 `

src/components/Header/groups/KyberDaoGroup.tsx

@@ -9,14 +9,15 @@ 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 { THRESHOLD_HEADER } from 'constants/styles'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 
 import { DropdownTextAnchor, StyledNavExternalLink, StyledNavLink } from '../styleds'
 import NavGroup from './NavGroup'
 
 const KyberDaoWrapper = styled.span`
   display: inline-flex;
-  @media (max-width: 1040px) {
+  @media (max-width: ${THRESHOLD_HEADER.KYBERDAO}) {
     display: none;
   }
 `

src/components/Header/index.tsx

@@ -12,7 +12,7 @@ import SignWallet from 'components/Header/web3/SignWallet'
 import Menu from 'components/Menu'
 import Row, { RowFixed } from 'components/Row'
 import { APP_PATHS } from 'constants/index'
-import { Z_INDEXS } from 'constants/styles'
+import { THRESHOLD_HEADER, Z_INDEXS } from 'constants/styles'
 import { useActiveWeb3React } from 'hooks'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
@@ -141,7 +141,7 @@ const IconImage = styled.img<{ isChristmas?: boolean }>`
 `
 
 const BlogWrapper = styled.span`
-  @media (max-width: 1600px) {
+  @media (max-width: ${THRESHOLD_HEADER.BLOG}) {
     display: none;
   }
 `

src/components/Menu/index.tsx

@@ -40,6 +40,7 @@ import { AGGREGATOR_ANALYTICS_URL, APP_PATHS, DMM_ANALYTICS_URL, TERM_FILES_PATH
 import { getLocaleLabel } from 'constants/locales'
 import { FAUCET_NETWORKS } from 'constants/networks'
 import { EVMNetworkInfo } from 'constants/networks/type'
+import { THRESHOLD_HEADER } from 'constants/styles'
 import { ENV_TYPE } from 'constants/type'
 import { useActiveWeb3React } from 'hooks'
 import useClaimReward from 'hooks/useClaimReward'
@@ -246,9 +247,10 @@ export default function Menu() {
     toggle()
   }
 
-  const under1440 = useMedia('(max-width: 1440px)')
-  const above1321 = useMedia('(min-width: 1321px)')
-  const under1040 = useMedia('(max-width: 1040px)')
+  const showAbout = useMedia(`(max-width: ${THRESHOLD_HEADER.ABOUT})`)
+  const showBlog = useMedia(`(max-width: ${THRESHOLD_HEADER.BLOG})`)
+  const showAnalytics = useMedia(`(max-width: ${THRESHOLD_HEADER.ANALYTIC})`)
+  const showKyberDao = useMedia(`(max-width: ${THRESHOLD_HEADER.KYBERDAO})`)
 
   const bridgeLink = networkInfo.bridgeURL
   const toggleClaimPopup = useToggleModal(ApplicationModal.CLAIM_POPUP)
@@ -392,7 +394,7 @@ export default function Menu() {
               />
             </MenuItem>
 
-            {under1440 && (
+            {showAbout && (
               <MenuItem>
                 <NavDropDown
                   icon={<Info />}
@@ -405,7 +407,7 @@ export default function Menu() {
                 />
               </MenuItem>
             )}
-            {under1040 && (
+            {showKyberDao && (
               <MenuItem>
                 <NavDropDown
                   icon={<Info />}
@@ -420,7 +422,7 @@ export default function Menu() {
                 />
               </MenuItem>
             )}
-            {!above1321 && (
+            {!showAnalytics && (
               <MenuItem>
                 <NavDropDown
                   icon={<PieChart />}
@@ -475,7 +477,7 @@ export default function Menu() {
               </ExternalLink>
             </MenuItem>
 
-            {under1440 && (
+            {showBlog && (
               <MenuItem>
                 <ExternalLink href="https://blog.kyberswap.com">
                   <BlogIcon />

src/constants/styles.ts

@@ -13,3 +13,10 @@ export const Z_INDEXS = {
   TRUE_SIGHT_FOOTER: 2,
   SWAP_PAGE_HEADER_RIGHT_MENU: 1,
 }
+
+export const THRESHOLD_HEADER = {
+  BLOG: '1600px',
+  ABOUT: '1440px',
+  ANALYTIC: '1320px',
+  KYBERDAO: '1040px',
+}