From 3f0b1cb9d42415f7cc52a107b31f146bb59ecdf1 Mon Sep 17 00:00:00 2001 From: Danh Date: Tue, 15 Aug 2023 12:53:58 +0700 Subject: [PATCH 1/2] refactor screen size show menu --- src/components/Header/groups/AboutNavGroup.tsx | 3 ++- .../Header/groups/AnalyticNavGroup.tsx | 3 ++- src/components/Header/groups/KyberDaoGroup.tsx | 3 ++- src/components/Header/index.tsx | 9 ++++++++- src/components/Menu/index.tsx | 16 +++++++++------- 5 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/components/Header/groups/AboutNavGroup.tsx b/src/components/Header/groups/AboutNavGroup.tsx index be4185cd5b..9c2410e8c5 100644 --- a/src/components/Header/groups/AboutNavGroup.tsx +++ b/src/components/Header/groups/AboutNavGroup.tsx @@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom' import { Flex } from 'rebass' import styled from 'styled-components' +import { THRESHOLD_HEADER } from 'components/Header' import { APP_PATHS } from 'constants/index' import { DropdownTextAnchor, StyledNavLink } from '../styleds' @@ -10,7 +11,7 @@ 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..4c35c3a3d5 100644 --- a/src/components/Header/groups/AnalyticNavGroup.tsx +++ b/src/components/Header/groups/AnalyticNavGroup.tsx @@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro' import { Flex } from 'rebass' import styled from 'styled-components' +import { THRESHOLD_HEADER } from 'components/Header' import { AGGREGATOR_ANALYTICS_URL, PROMM_ANALYTICS_URL } from 'constants/index' 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..21269fc49d 100644 --- a/src/components/Header/groups/KyberDaoGroup.tsx +++ b/src/components/Header/groups/KyberDaoGroup.tsx @@ -4,6 +4,7 @@ import styled from 'styled-components' import { ReactComponent as KyberLogo } from 'assets/svg/knc_black.svg' import Column from 'components/Column' +import { THRESHOLD_HEADER } from 'components/Header' import LightBulb from 'components/Icons/LightBulb' import StakeIcon from 'components/Icons/Stake' import VoteIcon from 'components/Icons/Vote' @@ -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..cac13c7f1b 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -27,6 +27,13 @@ import KyberDAONavGroup from './groups/KyberDaoGroup' import SwapNavGroup from './groups/SwapNavGroup' import { StyledNavExternalLink } from './styleds' +export const THRESHOLD_HEADER = { + BLOG: '1600px', + ABOUT: '1440px', + ANALYTIC: '1320px', + KYBERDAO: '1040px', +} + const HeaderFrame = styled.div` display: grid; grid-template-columns: 1fr 120px; @@ -141,7 +148,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..27ebef7c64 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -24,6 +24,7 @@ import { ReactComponent as LightIcon } from 'assets/svg/light.svg' import { ReactComponent as RoadMapIcon } from 'assets/svg/roadmap.svg' import { ButtonEmpty, ButtonPrimary } from 'components/Button' import { AutoColumn } from 'components/Column' +import { THRESHOLD_HEADER } from 'components/Header' import ApeIcon from 'components/Icons/ApeIcon' import ArrowRight from 'components/Icons/ArrowRight' import Faucet from 'components/Icons/Faucet' @@ -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 && ( From 09d689a03aa37a08e8f8633eee1b24ebd57bc065 Mon Sep 17 00:00:00 2001 From: Danh Date: Tue, 15 Aug 2023 13:00:16 +0700 Subject: [PATCH 2/2] move to const --- src/components/Header/groups/AboutNavGroup.tsx | 2 +- src/components/Header/groups/AnalyticNavGroup.tsx | 2 +- src/components/Header/groups/KyberDaoGroup.tsx | 2 +- src/components/Header/index.tsx | 9 +-------- src/components/Menu/index.tsx | 2 +- src/constants/styles.ts | 7 +++++++ 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/Header/groups/AboutNavGroup.tsx b/src/components/Header/groups/AboutNavGroup.tsx index 9c2410e8c5..e8a47f1c43 100644 --- a/src/components/Header/groups/AboutNavGroup.tsx +++ b/src/components/Header/groups/AboutNavGroup.tsx @@ -3,8 +3,8 @@ import { useLocation } from 'react-router-dom' import { Flex } from 'rebass' import styled from 'styled-components' -import { THRESHOLD_HEADER } from 'components/Header' import { APP_PATHS } from 'constants/index' +import { THRESHOLD_HEADER } from 'constants/styles' import { DropdownTextAnchor, StyledNavLink } from '../styleds' import NavGroup from './NavGroup' diff --git a/src/components/Header/groups/AnalyticNavGroup.tsx b/src/components/Header/groups/AnalyticNavGroup.tsx index 4c35c3a3d5..c742e4d4f1 100644 --- a/src/components/Header/groups/AnalyticNavGroup.tsx +++ b/src/components/Header/groups/AnalyticNavGroup.tsx @@ -2,8 +2,8 @@ import { Trans } from '@lingui/macro' import { Flex } from 'rebass' import styled from 'styled-components' -import { THRESHOLD_HEADER } from 'components/Header' 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' diff --git a/src/components/Header/groups/KyberDaoGroup.tsx b/src/components/Header/groups/KyberDaoGroup.tsx index 21269fc49d..918647cfc6 100644 --- a/src/components/Header/groups/KyberDaoGroup.tsx +++ b/src/components/Header/groups/KyberDaoGroup.tsx @@ -4,12 +4,12 @@ import styled from 'styled-components' import { ReactComponent as KyberLogo } from 'assets/svg/knc_black.svg' import Column from 'components/Column' -import { THRESHOLD_HEADER } from 'components/Header' import LightBulb from 'components/Icons/LightBulb' 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' diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index cac13c7f1b..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' @@ -27,13 +27,6 @@ import KyberDAONavGroup from './groups/KyberDaoGroup' import SwapNavGroup from './groups/SwapNavGroup' import { StyledNavExternalLink } from './styleds' -export const THRESHOLD_HEADER = { - BLOG: '1600px', - ABOUT: '1440px', - ANALYTIC: '1320px', - KYBERDAO: '1040px', -} - const HeaderFrame = styled.div` display: grid; grid-template-columns: 1fr 120px; diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 27ebef7c64..1a9af2cd5a 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -24,7 +24,6 @@ import { ReactComponent as LightIcon } from 'assets/svg/light.svg' import { ReactComponent as RoadMapIcon } from 'assets/svg/roadmap.svg' import { ButtonEmpty, ButtonPrimary } from 'components/Button' import { AutoColumn } from 'components/Column' -import { THRESHOLD_HEADER } from 'components/Header' import ApeIcon from 'components/Icons/ApeIcon' import ArrowRight from 'components/Icons/ArrowRight' import Faucet from 'components/Icons/Faucet' @@ -41,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' 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', +}