make menu responsive, update sci-react-ui

web-conexs-client/package.json

@@ -12,7 +12,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@diamondlightsource/sci-react-ui": "^0.2.0",
+    "@diamondlightsource/sci-react-ui": "^0.3.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@h5web/lib": "^13.0.0",

web-conexs-client/src/App.tsx

@@ -41,6 +41,7 @@ function App() {
         <UserProvider>
           <Stack height="100vh" width="100vw" spacing={1}>
             <Header />
+
             {/* <Stack direction="row" flex={1}> */}
             <SideDrawer />
             <Routes>
@@ -154,8 +155,11 @@ function App() {
             </Routes>
             <Footer
               copyright="Diamond Light Source"
-              logo={"null"}
-              sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
+              logo={undefined}
+              sx={{
+                zIndex: (theme) => theme.zIndex.drawer + 1,
+                height: "6rem",
+              }}
             ></Footer>
           </Stack>
         </UserProvider>

web-conexs-client/src/components/Header.tsx

@@ -1,34 +1,103 @@
-import { Stack, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  Drawer,
+  IconButton,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
 
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { UserContext } from "../UserContext";
 import {
   ColourSchemeButton,
   Navbar,
   User,
+  Logo,
 } from "@diamondlightsource/sci-react-ui";
 
 import ClusterBadge from "./ClusterBadge";
+import SideToolbar from "./SideToolbar";
 
 export default function Header() {
   const user = useContext(UserContext);
   const theme = useTheme();
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+
+  const handleDrawerClose = () => {
+    setIsClosing(true);
+    setMobileOpen(false);
+  };
+
+  const handleDrawerTransitionEnd = () => {
+    setIsClosing(false);
+  };
+
+  const handleDrawerToggle = () => {
+    if (!isClosing) {
+      setMobileOpen(!mobileOpen);
+    }
+  };
 
   const handleLogin = () => window.location.assign("/login");
 
   const handleLogout = () => window.location.assign("/oauth2/sign_out");
 
+  const icon = theme.logos?.short;
+
   return (
     <Navbar
       sx={{
         zIndex: (theme) => theme.zIndex.drawer + 1,
+        height: "4rem",
       }}
-      logo="theme"
+      leftSlot={
+        <Stack direction="row" alignItems="center">
+          <IconButton
+            size="large"
+            onClick={handleDrawerToggle}
+            sx={{
+              color: theme.palette.primary.contrastText,
+              display: { xs: "block", md: "none" },
+            }}
+          >
+            <MenuIcon fontSize="inherit"></MenuIcon>
+          </IconButton>
+          <Drawer
+            variant="temporary"
+            open={mobileOpen}
+            onTransitionEnd={handleDrawerTransitionEnd}
+            onClose={handleDrawerClose}
+            onClick={() => {
+              handleDrawerClose();
+              handleDrawerTransitionEnd();
+            }}
+          >
+            <SideToolbar open={mobileOpen}></SideToolbar>
+          </Drawer>
+          {icon && (
+            <Box
+              maxWidth="2rem"
+              margin="5px"
+              height="100%"
+              sx={{
+                "&:hover": { filter: "brightness(80%);" },
+                marginRight: { xs: "0", md: "50px" },
+              }}
+            >
+              <Logo short={true}></Logo>
+            </Box>
+          )}
+        </Stack>
+      }
+      logo={undefined}
       rightSlot={
         <Stack direction="row" alignItems="center">
           <ClusterBadge></ClusterBadge>
           <User
-            color="white"
+            colour="white"
             onLogin={handleLogin}
             onLogout={handleLogout}
             user={

web-conexs-client/src/components/MainPanel.tsx

@@ -16,7 +16,8 @@ export default function MainPanel(props: { children: React.ReactNode }) {
       <Paper
         flex={1}
         sx={{
-          margin: "10px 10px 10px " + sideGap,
+          margin: "10px 10px 10px 10px",
+          ml: { sm: "10px", md: sideGap },
           flex: 1,
           minHeight: 0,
           alignItems: "stretch",