Update Next.js, Material UI

admin/src/components/Layout.tsx

@@ -1,31 +1,31 @@
 import React from "react";
 import {
-  makeStyles,
   Theme,
-  createStyles,
   useTheme,
-  AppBar,
   Toolbar,
   IconButton,
   Typography,
-  Drawer,
   Divider,
   List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
   Tooltip,
-} from "@material-ui/core";
+  styled,
+  CSSObject,
+  Box,
+  ListItemText,
+} from "@mui/material";
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
+import MuiDrawer from "@mui/material/Drawer";
+import MuiListItemButton, { ListItemButtonProps } from "@mui/material/ListItemButton";
+import MuiListItemIcon, { ListItemIconProps } from "@mui/material/ListItemIcon";
 import Link from "next/link";
-import MenuIcon from "@material-ui/icons/Menu";
-import HomeIcon from "@material-ui/icons/Home";
-import SettingsEthernetIcon from "@material-ui/icons/SettingsEthernet";
-import SendIcon from "@material-ui/icons/Send";
-import FolderIcon from "@material-ui/icons/Folder";
-import LocationSearchingIcon from "@material-ui/icons/LocationSearching";
-import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
-import ChevronRightIcon from "@material-ui/icons/ChevronRight";
-import clsx from "clsx";
+import MenuIcon from "@mui/icons-material/Menu";
+import HomeIcon from "@mui/icons-material/Home";
+import SettingsEthernetIcon from "@mui/icons-material/SettingsEthernet";
+import SendIcon from "@mui/icons-material/Send";
+import FolderIcon from "@mui/icons-material/Folder";
+import LocationSearchingIcon from "@mui/icons-material/LocationSearching";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 export enum Page {
   Home,
@@ -39,85 +39,91 @@ export enum Page {
 
 const drawerWidth = 240;
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: "flex",
-      width: "100%",
-    },
-    appBar: {
-      zIndex: theme.zIndex.drawer + 1,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-    },
-    appBarShift: {
-      marginLeft: drawerWidth,
-      width: `calc(100% - ${drawerWidth}px)`,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-    },
-    menuButton: {
-      marginRight: 28,
-    },
-    hide: {
-      display: "none",
-    },
-    drawer: {
-      width: drawerWidth,
-      flexShrink: 0,
-      whiteSpace: "nowrap",
-    },
-    drawerOpen: {
-      width: drawerWidth,
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-    },
-    drawerClose: {
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-      overflowX: "hidden",
-      width: theme.spacing(7) + 1,
-      [theme.breakpoints.up("sm")]: {
-        width: theme.spacing(7) + 8,
+const openedMixin = (theme: Theme): CSSObject => ({
+  width: drawerWidth,
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.enteringScreen,
+  }),
+  overflowX: "hidden",
+});
+
+const closedMixin = (theme: Theme): CSSObject => ({
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  overflowX: "hidden",
+  width: 56,
+});
+
+const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  padding: theme.spacing(0, 1),
+  // necessary for content to be below app bar
+  ...theme.mixins.toolbar,
+}));
+
+interface AppBarProps extends MuiAppBarProps {
+  open?: boolean;
+}
+
+const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<AppBarProps>(({ theme, open }) => ({
+  backgroundColor: theme.palette.secondary.dark,
+  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,
+    }),
+  }),
+}));
+
+const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
+  width: drawerWidth,
+  flexShrink: 0,
+  whiteSpace: "nowrap",
+  boxSizing: "border-box",
+  ...(open && {
+    ...openedMixin(theme),
+    "& .MuiDrawer-paper": openedMixin(theme),
+  }),
+  ...(!open && {
+    ...closedMixin(theme),
+    "& .MuiDrawer-paper": closedMixin(theme),
+  }),
+}));
+
+const ListItemButton = styled(MuiListItemButton)<ListItemButtonProps>(({ theme }) => ({
+  [theme.breakpoints.up("sm")]: {
+    px: 1,
+  },
+  "&.MuiListItemButton-root": {
+    "&.Mui-selected": {
+      backgroundColor: theme.palette.primary.main,
+      "& .MuiListItemIcon-root": {
+        color: theme.palette.secondary.dark,
+      },
+      "& .MuiListItemText-root": {
+        color: theme.palette.secondary.dark,
       },
     },
-    toolbar: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      padding: theme.spacing(0, 1),
-      // necessary for content to be below app bar
-      ...theme.mixins.toolbar,
-    },
-    content: {
-      flexGrow: 1,
-      padding: theme.spacing(3),
-    },
-    listItem: {
-      paddingLeft: 16,
-      paddingRight: 16,
-      [theme.breakpoints.up("sm")]: {
-        paddingLeft: 20,
-        paddingRight: 20,
-      },
-    },
-    listItemIcon: {
-      minWidth: 42,
-    },
-    titleHighlight: {
-      color: theme.palette.secondary.main,
-      marginRight: 4,
-    },
-  })
-);
+  },
+}));
+
+const ListItemIcon = styled(MuiListItemIcon)<ListItemIconProps>(() => ({
+  minWidth: 42,
+}));
 
 interface Props {
   children: React.ReactNode;
@@ -126,7 +132,6 @@ interface Props {
 }
 
 export function Layout({ title, page, children }: Props): JSX.Element {
-  const classes = useStyles();
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
 
@@ -138,145 +143,109 @@ export function Layout({ title, page, children }: Props): JSX.Element {
     setOpen(false);
   };
 
+  const SiteTitle = styled("span")({
+    ...(title !== "" && {
+      color: theme.palette.primary.main,
+      marginRight: 4,
+    }),
+  });
+
   return (
-    <div className={classes.root}>
-      <AppBar
-        position="fixed"
-        className={clsx(classes.appBar, {
-          [classes.appBarShift]: open,
-        })}
-      >
+    <Box sx={{ display: "flex" }}>
+      <AppBar position="fixed" open={open}>
         <Toolbar>
           <IconButton
             color="inherit"
-            aria-label="open drawer"
+            aria-label="Open drawer"
             onClick={handleDrawerOpen}
             edge="start"
-            className={clsx(classes.menuButton, {
-              [classes.hide]: open,
-            })}
+            sx={{
+              mr: 5,
+              ...(open && { display: "none" }),
+            }}
           >
             <MenuIcon />
           </IconButton>
-          <Typography variant="h5" noWrap>
-            <span className={title !== "" ? classes.titleHighlight : ""}>
-              Hetty://
-            </span>
-            {title}
-          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "space-around",
+              width: "100%",
+            }}
+          >
+            <Typography variant="h5" noWrap sx={{ width: "100%" }}>
+              <SiteTitle>Hetty://</SiteTitle>
+              {title}
+            </Typography>
+            <Box sx={{ flexShrink: 0, pt: 0.75 }}>v{process.env.NEXT_PUBLIC_VERSION || "0.0"}</Box>
+          </Box>
         </Toolbar>
       </AppBar>
-      <Drawer
-        variant="permanent"
-        className={clsx(classes.drawer, {
-          [classes.drawerOpen]: open,
-          [classes.drawerClose]: !open,
-        })}
-        classes={{
-          paper: clsx({
-            [classes.drawerOpen]: open,
-            [classes.drawerClose]: !open,
-          }),
-        }}
-      >
-        <div className={classes.toolbar}>
+      <Drawer variant="permanent" open={open}>
+        <DrawerHeader>
           <IconButton onClick={handleDrawerClose}>
-            {theme.direction === "rtl" ? (
-              <ChevronRightIcon />
-            ) : (
-              <ChevronLeftIcon />
-            )}
+            {theme.direction === "rtl" ? <ChevronRightIcon /> : <ChevronLeftIcon />}
           </IconButton>
-        </div>
+        </DrawerHeader>
         <Divider />
-        <List>
+        <List sx={{ p: 0 }}>
           <Link href="/" passHref>
-            <ListItem
-              button
-              component="a"
-              key="home"
-              selected={page === Page.Home}
-              className={classes.listItem}
-            >
+            <ListItemButton key="home" selected={page === Page.Home}>
               <Tooltip title="Home">
-                <ListItemIcon className={classes.listItemIcon}>
+                <ListItemIcon>
                   <HomeIcon />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary="Home" />
-            </ListItem>
+            </ListItemButton>
           </Link>
           <Link href="/proxy/logs" passHref>
-            <ListItem
-              button
-              component="a"
-              key="proxyLogs"
-              selected={page === Page.ProxyLogs}
-              className={classes.listItem}
-            >
+            <ListItemButton key="proxyLogs" selected={page === Page.ProxyLogs}>
               <Tooltip title="Proxy">
-                <ListItemIcon className={classes.listItemIcon}>
+                <ListItemIcon>
                   <SettingsEthernetIcon />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary="Proxy" />
-            </ListItem>
+            </ListItemButton>
           </Link>
           <Link href="/sender" passHref>
-            <ListItem
-              button
-              component="a"
-              key="sender"
-              selected={page === Page.Sender}
-              className={classes.listItem}
-            >
+            <ListItemButton key="sender" selected={page === Page.Sender}>
               <Tooltip title="Sender">
-                <ListItemIcon className={classes.listItemIcon}>
+                <ListItemIcon>
                   <SendIcon />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary="Sender" />
-            </ListItem>
+            </ListItemButton>
           </Link>
           <Link href="/scope" passHref>
-            <ListItem
-              button
-              component="a"
-              key="scope"
-              selected={page === Page.Scope}
-              className={classes.listItem}
-            >
+            <ListItemButton key="scope" selected={page === Page.Scope}>
               <Tooltip title="Scope">
-                <ListItemIcon className={classes.listItemIcon}>
+                <ListItemIcon>
                   <LocationSearchingIcon />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary="Scope" />
-            </ListItem>
+            </ListItemButton>
           </Link>
           <Link href="/projects" passHref>
-            <ListItem
-              button
-              component="a"
-              key="projects"
-              selected={page === Page.Projects}
-              className={classes.listItem}
-            >
+            <ListItemButton key="projects" selected={page === Page.Projects}>
               <Tooltip title="Projects">
-                <ListItemIcon className={classes.listItemIcon}>
+                <ListItemIcon>
                   <FolderIcon />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary="Projects" />
-            </ListItem>
+            </ListItemButton>
           </Link>
         </List>
       </Drawer>
-      <main className={classes.content}>
-        <div className={classes.toolbar} />
+      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+        <DrawerHeader />
         {children}
-      </main>
-    </div>
+      </Box>
+    </Box>
   );
 }