From 2c3950f853d85db0185489b02002336686f7e97d Mon Sep 17 00:00:00 2001
From: Anton Lykhoyda <lykhoyda@gmail.com>
Date: Mon, 24 Apr 2023 16:49:19 +0200
Subject: [PATCH] adjust mobile menu

---
 ui/src/components/Drawer/DrawerMenu.tsx   |  9 ++--
 ui/src/components/Header/index.tsx        | 54 ++++++++++++++++++-----
 ui/src/components/MultiProxySelection.tsx |  1 +
 ui/src/constants.ts                       |  6 +++
 4 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/ui/src/components/Drawer/DrawerMenu.tsx b/ui/src/components/Drawer/DrawerMenu.tsx
index 7c3d5b14..14375c61 100644
--- 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
index 1b2b1d7d..702df580 100644
--- 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,6 +15,8 @@ interface Props {
 }
 
 const Header = ({className, handleDrawerOpen}: Props) => {
+  const {accountList} = useAccounts()
+
   return (
     <MuiAppBar position="fixed" className={className}>
       <Toolbar>
@@ -20,32 +24,58 @@ const Header = ({className, handleDrawerOpen}: Props) => {
           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
index 3acd55ed..f41c09dc 100644
--- 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
index 8cfe8749..562c5b55 100644
--- 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"