Merge pull request #135 from CudoVentures/CUDOS-1322-expanded-left-me…

…nu-on-wider-screens

expanded-left-menu-on-wider-screens

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<number>(0)
+  const [menuItems, setMenuItems] = useState<MenuItems[]>([])
   const { chosenNetwork, loadingState } = useSelector((state: RootState) => state.profile)
   const { pathname } = useLocation()
+  const isMidLowRes = useMidlowResCheck()
 
-  const MenuItems = [
-    { icon: <DashboardIcon />, link: '/dashboard', text: 'Dashboard' },
-    { icon: <StakingIcon />, link: '/staking', text: 'Staking' },
-    { icon: <ProposalsIcon />, 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: <FaucetIcon />, 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 (
     <Box sx={styles.menuContainer}>
       <Box
         display="flex"
-        alignItems="center"
+        alignItems="flex-start"
         flexDirection="column"
         gap={2}
         height="100%"
+        width='100%'
       >
-        {MenuItems.map((item, index) => (
+        {menuItems.map((item, index) => (
           <Link
             to={item.link}
             key={item.link}
-            style={{ marginTop: item.link === '/faucet' ? 'auto' : 0 }}
+            style={{
+              width: '100%',
+              textDecoration: 'none',
+              marginTop: item.link === '/faucet' ? 'auto' : 0
+            }}
           >
             <Tooltip
-              title={item.text}
+              title={isMidLowRes ? item.text : ''}
               placement="right"
               componentsProps={{
                 tooltip: {
@@ -73,6 +79,13 @@ const Menu = () => {
                 onClick={() => setSelected(index)}
               >
                 {item.icon}
+                {isMidLowRes ? null : <Typography
+                  marginLeft={2.5}
+                  variant='subtitle2'
+                  color={selected === index ? 'white' : 'inherit'}
+                >
+                  {item.text}
+                </Typography>}
               </ToggleButton>
             </Tooltip>
           </Link>

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)` })

src/components/Layout/index.tsx

@@ -17,11 +17,10 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
       }}
     >
       <Header />
-      <Box display="flex" gap={8} flexGrow={1} sx={{ overflow: 'auto' }}>
+      <Box display="flex" gap={4.5} flexGrow={1} sx={{ overflow: 'auto' }}>
         <LeftMenu />
         <Box
           sx={{
-            paddingRight: '2rem',
             display: 'flex',
             justifyContent: 'space-between',
             flexDirection: 'column'

src/components/Layout/menuHelpers.tsx

@@ -0,0 +1,27 @@
+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 { CHAIN_DETAILS } from 'utils/constants'
+
+export interface MenuItems {
+    icon: JSX.Element;
+    link: string;
+    text: string;
+}
+
+export const getMenuItems = (chosenNetwork: string, loadingState: boolean): MenuItems[] => {
+
+    const MenuItems = [
+        { icon: <DashboardIcon />, link: '/dashboard', text: 'Dashboard' },
+        { icon: <StakingIcon />, link: '/staking', text: 'Staking' },
+        { icon: <ProposalsIcon />, 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: <FaucetIcon />, link: '/faucet', text: 'Faucet' })
+    }
+
+    return MenuItems
+}

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': {

src/containers/Dashboard/index.tsx

@@ -10,13 +10,15 @@ 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'
 
 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 (
     <Fade in timeout={500}>
@@ -33,16 +35,17 @@ const Dashboard = () => {
         </Box>
         <Container maxWidth={false} sx={{ mt: 4, mb: 4 }}>
           <Grid
+            style={{ paddingLeft: '-24px' }}
             justifyContent={isVeryBigScreen ? 'center' : 'initial'}
-            spacing={2}
+            spacing={3}
             container
           >
             <Grid
               style={{ paddingLeft: '0px' }}
               item
               xs={12}
               md={12}
-              lg={9}
+              lg={isScreenWidthLessThan1400px ? 12 : 9}
               xl={6}
             >
               <WalletInformation />
@@ -57,7 +60,7 @@ const Dashboard = () => {
               item
               xs={12}
               md={12}
-              lg={3}
+              lg={isScreenWidthLessThan1400px ? 12 : 3}
               xl={2}
             >
               <NetworkStatistics />

src/containers/Proposals/index.tsx

@@ -58,7 +58,7 @@ const Proposals = () => {
 
   return (
     <Fade in timeout={500}>
-      <Box display="flex" flexDirection="column" gap={2} height="100%">
+      <Box paddingRight='2rem' display="flex" flexDirection="column" gap={2} height="100%">
         <Box sx={styles.stickyHeader}>
           <Typography sx={styles.headerStyle}>Proposals</Typography>
           <Typography

src/containers/Staking/components/Validators/index.tsx

@@ -72,9 +72,10 @@ const Validators = () => {
           <Box
             sx={{
               display: 'flex',
-              height: '80vh',
               overflow: 'hidden',
-              flexDirection: 'column'
+              flexDirection: 'column',
+              height: 'calc(100vh - 370px)',
+              minHeight: '200px'
             }}
           >
             <ValidatorsTable />

src/containers/Staking/styles.ts

@@ -1,5 +1,6 @@
 export const styles: SxMap = {
   stakingContainer: {
+    paddingRight: '2rem',
     display: 'flex',
     flexDirection: 'column',
     height: '100%',