From a8604698a87f4c29d31cf61c0d3ce4ac46b304df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguy=E1=BB=85n=20Ho=C3=A0i=20Danh?= <33005392+nguyenhoaidanh@users.noreply.github.com> Date: Tue, 15 Aug 2023 13:01:39 +0700 Subject: [PATCH] refactor screen size show menu (#2171) --- src/components/Header/groups/AboutNavGroup.tsx | 3 ++- .../Header/groups/AnalyticNavGroup.tsx | 3 ++- src/components/Header/groups/KyberDaoGroup.tsx | 3 ++- src/components/Header/index.tsx | 4 ++-- src/components/Menu/index.tsx | 16 +++++++++------- src/constants/styles.ts | 7 +++++++ 6 files changed, 24 insertions(+), 12 deletions(-) diff --git a/src/components/Header/groups/AboutNavGroup.tsx b/src/components/Header/groups/AboutNavGroup.tsx index be4185cd5b..e8a47f1c43 100644 --- a/src/components/Header/groups/AboutNavGroup.tsx +++ b/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; } ` diff --git a/src/components/Header/groups/AnalyticNavGroup.tsx b/src/components/Header/groups/AnalyticNavGroup.tsx index 9f9e64bd15..c742e4d4f1 100644 --- a/src/components/Header/groups/AnalyticNavGroup.tsx +++ b/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; } ` diff --git a/src/components/Header/groups/KyberDaoGroup.tsx b/src/components/Header/groups/KyberDaoGroup.tsx index 11efd6414c..918647cfc6 100644 --- a/src/components/Header/groups/KyberDaoGroup.tsx +++ b/src/components/Header/groups/KyberDaoGroup.tsx @@ -9,6 +9,7 @@ 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' @@ -16,7 +17,7 @@ import NavGroup from './NavGroup' const KyberDaoWrapper = styled.span` display: inline-flex; - @media (max-width: 1040px) { + @media (max-width: ${THRESHOLD_HEADER.KYBERDAO}) { display: none; } ` diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 6a7a81f210..9490da9300 100644 --- a/src/components/Header/index.tsx +++ b/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; } ` diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index f6bb568c71..1a9af2cd5a 100644 --- a/src/components/Menu/index.tsx +++ b/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() { /> - {under1440 && ( + {showAbout && ( } @@ -405,7 +407,7 @@ export default function Menu() { /> )} - {under1040 && ( + {showKyberDao && ( } @@ -420,7 +422,7 @@ export default function Menu() { /> )} - {!above1321 && ( + {!showAnalytics && ( } @@ -475,7 +477,7 @@ export default function Menu() { - {under1440 && ( + {showBlog && ( diff --git a/src/constants/styles.ts b/src/constants/styles.ts index 639f455025..9cfe3ba5aa 100644 --- a/src/constants/styles.ts +++ b/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', +}