From 43730b1e165cc15db5fbd65843571cfa9e8a6638 Mon Sep 17 00:00:00 2001 From: SpaghettiOverload Date: Mon, 28 Nov 2022 10:38:22 +0200 Subject: [PATCH] expanded-left-menu-on-wider-screens --- src/components/Layout/LeftMenu.tsx | 63 +++++++++++-------- .../Layout/hooks/useScreenChecks.tsx | 5 ++ src/components/Layout/index.tsx | 3 +- src/components/Layout/menuHelpers.tsx | 27 ++++++++ src/components/Layout/styles.ts | 7 ++- src/containers/Dashboard/index.tsx | 9 ++- src/containers/Proposals/index.tsx | 2 +- .../Staking/components/Validators/index.tsx | 5 +- src/containers/Staking/styles.ts | 1 + 9 files changed, 87 insertions(+), 35 deletions(-) create mode 100644 src/components/Layout/menuHelpers.tsx diff --git a/src/components/Layout/LeftMenu.tsx b/src/components/Layout/LeftMenu.tsx index a2f5412..53a90ea 100644 --- a/src/components/Layout/LeftMenu.tsx +++ b/src/components/Layout/LeftMenu.tsx @@ -1,56 +1,62 @@ import { useEffect, useState } from 'react' -import { Box, ToggleButton, Tooltip } from '@mui/material' +import { Box, ToggleButton, Tooltip, Typography } from '@mui/material' import { Link, useLocation } from 'react-router-dom' -import DashboardIcon from 'assets/vectors/dashboard.svg?component' -import ProposalsIcon from 'assets/vectors/proposals.svg?component' -import StakingIcon from 'assets/vectors/staking.svg?component' -import FaucetIcon from 'assets/vectors/faucet.svg?component' - -import { styles } from './styles' -import { CHAIN_DETAILS } from 'utils/constants' import { useSelector } from 'react-redux' import { RootState } from 'store' +import { getMenuItems, MenuItems } from './menuHelpers' +import { useMidlowResCheck } from './hooks/useScreenChecks' + +import { styles } from './styles' const Menu = () => { const [selected, setSelected] = useState(0) + const [menuItems, setMenuItems] = useState([]) const { chosenNetwork, loadingState } = useSelector((state: RootState) => state.profile) const { pathname } = useLocation() + const isMidLowRes = useMidlowResCheck() - const MenuItems = [ - { icon: , link: '/dashboard', text: 'Dashboard' }, - { icon: , link: '/staking', text: 'Staking' }, - { icon: , link: '/proposals', text: 'Proposals' } - ] + useEffect(() => { - if (CHAIN_DETAILS.CHAIN_ID[chosenNetwork! as keyof typeof CHAIN_DETAILS.CHAIN_ID] - !== CHAIN_DETAILS.CHAIN_ID.MAINNET && !loadingState) { - MenuItems.push({ icon: , link: '/faucet', text: 'Faucet' }) - } + setMenuItems(getMenuItems(chosenNetwork, loadingState)) + + }, [chosenNetwork, loadingState]) useEffect(() => { - const selectedIndex = MenuItems.findIndex( - (menuItem) => menuItem.link === pathname - ) - setSelected(selectedIndex) + + if (menuItems.length) { + const selectedIndex = menuItems.findIndex( + (menuItem) => menuItem.link === pathname + ) + setSelected(selectedIndex) + return + } + + setSelected(0) + }, [pathname]) return ( - {MenuItems.map((item, index) => ( + {menuItems.map((item, index) => ( { onClick={() => setSelected(index)} > {item.icon} + {isMidLowRes ? null : + {item.text} + } diff --git a/src/components/Layout/hooks/useScreenChecks.tsx b/src/components/Layout/hooks/useScreenChecks.tsx index 2bcae02..5c251d6 100644 --- a/src/components/Layout/hooks/useScreenChecks.tsx +++ b/src/components/Layout/hooks/useScreenChecks.tsx @@ -1,6 +1,11 @@ import { useMediaQuery } from 'react-responsive' import { SCREEN_RESOLUTIONS } from "utils/constants" +//CUSTOM +export const useIsScreenLessThan = (pixels: string, measure: 'width' | 'height') => { + return useMediaQuery({ query: `(max-${measure}: ${pixels})` }) +} + //WIDTH export const useHighResCheck = () => { return useMediaQuery({ query: `(max-width: ${SCREEN_RESOLUTIONS.HIGH}px)` }) diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index d43922c..cc785a3 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -17,11 +17,10 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => { }} >
- + { + + const MenuItems = [ + { icon: , link: '/dashboard', text: 'Dashboard' }, + { icon: , link: '/staking', text: 'Staking' }, + { icon: , link: '/proposals', text: 'Proposals' }, + ] + + if (CHAIN_DETAILS.CHAIN_ID[chosenNetwork! as keyof typeof CHAIN_DETAILS.CHAIN_ID] + !== CHAIN_DETAILS.CHAIN_ID.MAINNET && !loadingState) { + MenuItems.push({ icon: , link: '/faucet', text: 'Faucet' }) + } + + return MenuItems +} diff --git a/src/components/Layout/styles.ts b/src/components/Layout/styles.ts index 22e8327..70164d7 100644 --- a/src/components/Layout/styles.ts +++ b/src/components/Layout/styles.ts @@ -1,7 +1,8 @@ export const styles: SxMap = { menuContainer: ({ custom }) => ({ background: custom.backgrounds.primary, - width: '88px', + width: 'min-content', + minHeight: '300px', borderRadius: '1.3rem', marginBottom: '1rem', padding: '20px', @@ -44,7 +45,9 @@ export const styles: SxMap = { navigationButton: ({ custom, palette }) => ({ padding: '1rem', height: '3rem', - width: '3rem', + width: '100%', + display: 'flex', + justifyContent: 'flex-start', borderRadius: '10px', color: palette.text.secondary, '&:hover': { diff --git a/src/containers/Dashboard/index.tsx b/src/containers/Dashboard/index.tsx index 5c1adfc..1cdf483 100644 --- a/src/containers/Dashboard/index.tsx +++ b/src/containers/Dashboard/index.tsx @@ -10,6 +10,7 @@ import { import WalletInformation from './WalletInformation' import NetworkStatistics from './NetworkStatistics/NetworkStatistics' import LatestActivity from './LatestActivity/LatestActivity' +import { useIsScreenLessThan } from 'components/Layout/hooks/useScreenChecks' import { styles } from './styles' @@ -17,6 +18,7 @@ const Dashboard = () => { const theme = useTheme() const isBigScreen = useMediaQuery(theme.breakpoints.up('lg')) const isVeryBigScreen = useMediaQuery(theme.breakpoints.up('xl')) + const isScreenWidthLessThan1400px = useIsScreenLessThan('1400px', 'width') return ( @@ -33,8 +35,9 @@ const Dashboard = () => { { item xs={12} md={12} - lg={9} + lg={isScreenWidthLessThan1400px ? 12 : 9} xl={6} > @@ -57,7 +60,7 @@ const Dashboard = () => { item xs={12} md={12} - lg={3} + lg={isScreenWidthLessThan1400px ? 12 : 3} xl={2} > diff --git a/src/containers/Proposals/index.tsx b/src/containers/Proposals/index.tsx index c765b75..70de3d3 100644 --- a/src/containers/Proposals/index.tsx +++ b/src/containers/Proposals/index.tsx @@ -58,7 +58,7 @@ const Proposals = () => { return ( - + Proposals { diff --git a/src/containers/Staking/styles.ts b/src/containers/Staking/styles.ts index 541ad45..63584fa 100644 --- a/src/containers/Staking/styles.ts +++ b/src/containers/Staking/styles.ts @@ -1,5 +1,6 @@ export const styles: SxMap = { stakingContainer: { + paddingRight: '2rem', display: 'flex', flexDirection: 'column', height: '100%',