Migrate TopBar component to typescript and MUI 5

frontend/src/components/layout/TopBar.js

@@ -1,51 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import clsx from "clsx";
-import { useTheme } from "@mui/material/styles";
-import { AppBar, Toolbar, Typography, IconButton } from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
-import ProfileButton from "./ProfileButton";
-import LightDarkToggle from "./LightDarkToggle";
-import SensitiveInfoToggle from "./SensitiveInfoToggle";
-import { getStyles } from "./styles";
-
-const TopBar = ({ open, handleDrawerOpen }) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
-
-  return (
-    <AppBar
-      position="fixed"
-      sx={clsx(styles.appBar, {
-        [styles.appBarShift]: open
-      })}
-    >
-      <Toolbar>
-        <IconButton
-          color="inherit"
-          aria-label="open drawer"
-          onClick={handleDrawerOpen}
-          edge="start"
-          sx={clsx(styles.menuButton, {
-            [styles.hide]: open
-          })}
-        >
-          <MenuIcon />
-        </IconButton>
-        <Typography variant="h6" noWrap sx={styles.title}>
-          Network resurrector
-        </Typography>
-        <SensitiveInfoToggle />
-        <LightDarkToggle />
-        <ProfileButton />
-      </Toolbar>
-    </AppBar>
-  );
-};
-
-TopBar.propTypes = {
-  open: PropTypes.bool.isRequired,
-  handleDrawerOpen: PropTypes.func.isRequired
-};
-
-export default TopBar;

frontend/src/components/layout/TopBar.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { Toolbar, Typography, IconButton, Box } from "@mui/material";
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
+import MenuIcon from "@mui/icons-material/Menu";
+import ProfileButton from "./ProfileButton";
+import LightDarkToggle from "./LightDarkToggle";
+import SensitiveInfoToggle from "./SensitiveInfoToggle";
+import { styled } from "@mui/material/styles";
+import { drawerWidth } from "./constants";
+
+interface AppBarProps extends MuiAppBarProps {
+  open?: boolean;
+}
+
+const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: prop => prop !== "open"
+})<AppBarProps>(({ theme, open }) => ({
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(["width", "margin"], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen
+  }),
+  ...(open && {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  })
+}));
+
+type TopBarProps = {
+  open: boolean;
+  onDrawerOpen: () => void;
+};
+
+const title = "Network resurrector";
+const TopBar: React.FC<TopBarProps> = ({ open, onDrawerOpen }) => {
+  // const { userInfo } = useTuitioUserInfo();
+  // to do: Avatar: userInfo.profilePictureUrl
+  return (
+    <AppBar position="fixed" open={open}>
+      <Toolbar>
+        <IconButton
+          color="inherit"
+          aria-label="open drawer"
+          onClick={onDrawerOpen}
+          edge="start"
+          sx={{
+            marginRight: 5,
+            ...(open && { display: "none" })
+          }}
+        >
+          <MenuIcon />
+        </IconButton>
+        <Typography variant="h6" noWrap component="div">
+          {title}
+        </Typography>
+        <Box sx={{ flexGrow: 1 }} />
+        <Box sx={{ display: { xs: "none", md: "flex" } }}>
+          <SensitiveInfoToggle />
+          <LightDarkToggle />
+          <ProfileButton />
+        </Box>
+      </Toolbar>
+      {/* <ProgressBar /> */}
+    </AppBar>
+  );
+};
+
+export default TopBar;

frontend/src/components/layout/constants.ts

@@ -0,0 +1 @@
+export const drawerWidth = 240;

frontend/src/components/layout/styles.js

@@ -56,9 +56,6 @@ const getStyles = theme => ({
     // necessary for content to be below app bar
     ...theme.mixins.toolbar
   },
-  title: {
-    flexGrow: 1
-  },
   content: {
     flexGrow: 1,
     padding: theme.spacing(2)