fix: improve responsiveness for mobile view

web/src/components/header.tsx

@@ -2,16 +2,18 @@ import React, { useState, useEffect, useContext } from 'react'
 import { Link, useNavigate, useLocation } from 'react-router-dom'
 
 import {
+  Box,
   AppBar,
   Toolbar,
   Tabs,
   Tab,
   Button,
   Menu,
-  MenuItem
+  MenuItem,
+  IconButton,
+  Typography
 } from '@mui/material'
-import OpenInNewIcon from '@mui/icons-material/OpenInNew'
-import SettingsIcon from '@mui/icons-material/Settings'
+import { OpenInNew, Settings, Menu as MenuIcon } from '@mui/icons-material'
 
 import Username from './username'
 import { AppContext } from '../context/appContext'
@@ -30,31 +32,38 @@ const Header = (props: any) => {
   const [tabValue, setTabValue] = useState(
     validTabs.includes(pathname) ? pathname : '/'
   )
-  const [anchorEl, setAnchorEl] = useState<
-    (EventTarget & HTMLButtonElement) | null
-  >(null)
+
+  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null)
+  const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
+    null
+  )
+
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget)
+  }
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget)
+  }
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null)
+  }
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null)
+  }
 
   useEffect(() => {
     setTabValue(validTabs.includes(pathname) ? pathname : '/')
   }, [pathname])
 
-  const handleMenu = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
   const handleTabChange = (event: React.SyntheticEvent, value: string) => {
     setTabValue(value)
   }
 
   const handleLogout = () => {
     if (appContext.logout) {
-      handleClose()
+      handleCloseUserMenu()
       appContext.logout()
     }
   }
@@ -64,43 +73,129 @@ const Header = (props: any) => {
       sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
     >
       <Toolbar variant="dense">
-        <img
-          src="logo.png"
-          alt="logo"
-          style={{
-            width: '35px',
-            cursor: 'pointer',
-            marginRight: '25px'
-          }}
-          onClick={() => {
-            setTabValue('/')
-            navigate('/')
-          }}
-        />
-        <Tabs
-          indicatorColor="secondary"
-          value={tabValue}
-          onChange={handleTabChange}
-        >
-          <Tab label="Home" value="/" to="/" component={Link} />
-          <Tab
-            label="Studio"
-            value="/SASjsStudio"
-            to="/SASjsStudio"
-            component={Link}
+        <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+          <img
+            src="logo.png"
+            alt="logo"
+            style={{
+              width: '35px',
+              height: '35px',
+              marginTop: '9px',
+              cursor: 'pointer',
+              marginRight: '25px'
+            }}
+            onClick={() => {
+              setTabValue('/')
+              navigate('/')
+            }}
           />
-        </Tabs>
-        <Button
-          href={`${baseUrl}/AppStream`}
-          target="_blank"
-          rel="noreferrer"
-          variant="contained"
-          color="primary"
-          size="large"
-          endIcon={<OpenInNewIcon />}
-        >
-          Apps
-        </Button>
+          <Tabs
+            indicatorColor="secondary"
+            value={tabValue}
+            onChange={handleTabChange}
+          >
+            <Tab label="Home" value="/" to="/" component={Link} />
+            <Tab
+              label="Studio"
+              value="/SASjsStudio"
+              to="/SASjsStudio"
+              component={Link}
+            />
+          </Tabs>
+          <Button
+            href={`${baseUrl}/AppStream`}
+            target="_blank"
+            rel="noreferrer"
+            variant="contained"
+            color="primary"
+            size="large"
+            endIcon={<OpenInNew />}
+          >
+            Apps
+          </Button>
+        </Box>
+
+        <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+          <IconButton size="large" onClick={handleOpenNavMenu} color="inherit">
+            <MenuIcon />
+          </IconButton>
+
+          <Menu
+            id="menu-appbar"
+            anchorEl={anchorElNav}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left'
+            }}
+            keepMounted
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'left'
+            }}
+            open={!!anchorElNav}
+            onClose={handleCloseNavMenu}
+            sx={{
+              display: { xs: 'block', md: 'none' }
+            }}
+          >
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                component={Link}
+                to="/"
+                onClick={handleCloseNavMenu}
+                variant="contained"
+                color="primary"
+              >
+                Home
+              </Button>
+            </MenuItem>
+
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                component={Link}
+                to="/SASjsStudio"
+                onClick={handleCloseNavMenu}
+                variant="contained"
+                color="primary"
+              >
+                Studio
+              </Button>
+            </MenuItem>
+
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                href={`${baseUrl}/AppStream`}
+                target="_blank"
+                rel="noreferrer"
+                onClick={handleCloseNavMenu}
+                variant="contained"
+                color="primary"
+                endIcon={<OpenInNew />}
+              >
+                Apps
+              </Button>
+            </MenuItem>
+          </Menu>
+        </Box>
+
+        <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
+          <img
+            src="logo.png"
+            alt="logo"
+            style={{
+              width: '35px',
+              height: '35px',
+              marginTop: '2px',
+              cursor: 'pointer',
+              marginRight: '25px'
+            }}
+            onClick={() => {
+              setTabValue('/')
+              navigate('/')
+            }}
+          />
+        </Box>
+
         <div
           style={{
             display: 'flex',
@@ -110,11 +205,11 @@ const Header = (props: any) => {
         >
           <Username
             username={appContext.displayName || appContext.username}
-            onClickHandler={handleMenu}
+            onClickHandler={handleOpenUserMenu}
           />
           <Menu
             id="menu-appbar"
-            anchorEl={anchorEl}
+            anchorEl={anchorElUser}
             anchorOrigin={{
               vertical: 'bottom',
               horizontal: 'center'
@@ -124,17 +219,30 @@ const Header = (props: any) => {
               vertical: 'top',
               horizontal: 'center'
             }}
-            open={!!anchorEl}
-            onClose={handleClose}
+            open={!!anchorElUser}
+            onClose={handleCloseUserMenu}
           >
+            {appContext.loggedIn && (
+              <MenuItem
+                sx={{ justifyContent: 'center', display: { md: 'none' } }}
+              >
+                <Typography
+                  variant="h5"
+                  sx={{ border: '1px solid black', padding: '5px' }}
+                >
+                  {appContext.displayName || appContext.username}
+                </Typography>
+              </MenuItem>
+            )}
+
             <MenuItem sx={{ justifyContent: 'center' }}>
               <Button
                 component={Link}
                 to="/SASjsSettings"
-                onClick={handleClose}
+                onClick={handleCloseUserMenu}
                 variant="contained"
                 color="primary"
-                startIcon={<SettingsIcon />}
+                startIcon={<Settings />}
               >
                 Settings
               </Button>
@@ -147,7 +255,7 @@ const Header = (props: any) => {
                 variant="contained"
                 size="large"
                 color="primary"
-                endIcon={<OpenInNewIcon />}
+                endIcon={<OpenInNew />}
               >
                 Docs
               </Button>
@@ -160,7 +268,7 @@ const Header = (props: any) => {
                 variant="contained"
                 color="primary"
                 size="large"
-                endIcon={<OpenInNewIcon />}
+                endIcon={<OpenInNew />}
               >
                 API
               </Button>