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 && (
)}
- {under1040 && (
+ {showKyberDao && (
)}
- {!above1321 && (
+ {!showAnalytics && (
- {under1440 && (
+ {showBlog && (