migrate material-ui to v5

src/components/navbar/NavBar.tsx

@@ -6,12 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useContext, useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
+import makeStyles from '@mui/styles/makeStyles';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
 import NavBarContext from '../../context/NavbarContext';
 import DarkTheme from '../../context/DarkTheme';
 import TemporaryDrawer from '../TemporaryDrawer';
@@ -39,29 +39,30 @@ export default function NavBar() {
         <>
             {override.status && override.value}
             {!override.status
-        && (
-            <div className={classes.root}>
-                <AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
-                    <Toolbar>
-                        <IconButton
-                            edge="start"
-                            className={classes.menuButton}
-                            color="inherit"
-                            aria-label="menu"
-                            disableRipple
-                            onClick={() => setDrawerOpen(true)}
-                        >
-                            <MenuIcon />
-                        </IconButton>
-                        <Typography variant="h6" className={classes.title}>
-                            {title}
-                        </Typography>
-                        {action}
-                    </Toolbar>
-                </AppBar>
-                <TemporaryDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
-            </div>
-        )}
+    && (
+        <div className={classes.root}>
+            <AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
+                <Toolbar>
+                    <IconButton
+                        edge="start"
+                        className={classes.menuButton}
+                        color="inherit"
+                        aria-label="menu"
+                        disableRipple
+                        onClick={() => setDrawerOpen(true)}
+                        size="large"
+                    >
+                        <MenuIcon />
+                    </IconButton>
+                    <Typography variant="h6" className={classes.title}>
+                        {title}
+                    </Typography>
+                    {action}
+                </Toolbar>
+            </AppBar>
+            <TemporaryDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
+        </div>
+    )}
         </>
     );
 }