adjust mobile menu

ChainSafe · Apr 24, 2023 · 2c3950f · 2c3950f
1 parent 04fc160
commit 2c3950f
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 18 deletions.
diff --git a/ui/src/components/Drawer/DrawerMenu.tsx b/ui/src/components/Drawer/DrawerMenu.tsx
@@ -9,12 +9,9 @@ import ListItemText from "@mui/material/ListItemText";
 import * as React from "react";
 import {styled} from "@mui/material/styles";
 import {useAccounts} from "../../contexts/AccountsContext";
+import {ROUTES} from "../../constants";
+
 
-const routes = [
-  {url: '/', name: 'Home'},
-  {url: '/create', name: 'New Multisig'},
-  {url: '/about', name: 'About'},
-]
 
 interface DrawerMenuProps {
     handleDrawerClose: () => void
@@ -33,7 +30,7 @@ function DrawerMenu({handleDrawerClose}: DrawerMenuProps) {
       <Divider/>
       <List>
         {!!accountList?.length && (
-          routes.map(({url, name}) => (
+          ROUTES.map(({url, name}) => (
             <ListItem key={name} disablePadding>
               <ListItemButton onClick={handleDrawerClose} component={Link} to={url}>
                 <ListItemText primary={name}/>

diff --git a/ui/src/components/Header/index.tsx b/ui/src/components/Header/index.tsx
@@ -1,10 +1,12 @@
-import {Toolbar, Typography} from "@mui/material"
+import {Box, Button, IconButton, Toolbar, Typography} from "@mui/material"
 import styled from "styled-components"
-import IconButton from "@mui/material/IconButton";
-import MenuIcon from "@mui/icons-material/Menu";
 import * as React from "react";
 import MuiAppBar from '@mui/material/AppBar';
 import MultiProxySelection from "../MultiProxySelection";
+import {useAccounts} from "../../contexts/AccountsContext";
+import {Link} from "react-router-dom";
+import MenuIcon from "@mui/icons-material/Menu";
+import {ROUTES} from "../../constants";
 // import NetworkSelection from "../NetworkSelection"
 
 interface Props {
@@ -13,39 +15,67 @@ interface Props {
 }
 
 const Header = ({className, handleDrawerOpen}: Props) => {
+  const {accountList} = useAccounts()
+
   return (
     <MuiAppBar position="fixed" className={className}>
       <Toolbar>
         <TypographyStyled
           variant="h6"
           noWrap
         >
-                    Multix
+            Multix
         </TypographyStyled>
+        {!!accountList?.length && (
+          <BoxStyled>
+            {ROUTES.map(({url, name}) => (
+              <Button
+                component={Link}
+                to={url}
+                className="buttonHeader"
+              >
+                {name}
+              </Button>
+            ))}
+          </BoxStyled>
+        )}
         <MultiProxySelection/>
-        {/*<NetworkSelection />*/}
-        <IconButton
+        {/*/!*<NetworkSelection />*!/*/}
+        <IconButtonStyled
           color="inherit"
           aria-label="open drawer"
           edge="end"
           onClick={handleDrawerOpen}
         >
           <MenuIcon/>
-        </IconButton>
+        </IconButtonStyled>
       </Toolbar>
     </MuiAppBar>
   )
 }
 
+const BoxStyled = styled(Box)(({theme}) => `
+    display: none;
+    
+    @media (min-width: ${theme.breakpoints.values.sm}px) {
+        flex-grow: 1;
+        display: flex;
+    }
+`)
+
+
 const TypographyStyled = styled(Typography)`
   flex-grow: 1;
 `
-export default styled(Header)(({theme}) => `
-  .buttonContainer {
-    flex-grow: 1;
-    display: flex;
-  }
 
+const IconButtonStyled = styled(IconButton)(({theme}) => `
+    display: block;
+    @media (min-width: ${theme.breakpoints.values.sm}px) {
+        display: none;
+    }
+`)
+
+export default styled(Header)(({theme}) => `
   .buttonHeader {
     color: ${theme.palette.primary.white};
     text-align: center;

diff --git a/ui/src/components/MultiProxySelection.tsx b/ui/src/components/MultiProxySelection.tsx
@@ -95,6 +95,7 @@ const MultiProxySelection = ({ className }: Props) => {
 }
 
 export default styled(MultiProxySelection)(({ theme }) => `
+  min-width: 180px;
   flex: 1;
   text-align: right;
 

diff --git a/ui/src/constants.ts b/ui/src/constants.ts
@@ -2,6 +2,12 @@ import { chainsKusamaSVG } from "./logos/kusamaSVG "
 import { localSVG } from "./logos/localSVG"
 import { chainsRococoSVG } from "./logos/rococoSVG"
 
+export const ROUTES = [
+  {url: '/', name: 'Home'},
+  {url: '/create', name: 'New Multisig'},
+  {url: '/about', name: 'About'},
+  {url: '/help', name: 'Help'},
+]
 export const DAPP_NAME = "Multix"
 export const ICON_SIZE = 40
 export const ICON_THEME = "polkadot"