Create CustomAppBar component

src/CustomAppBar.js

@@ -0,0 +1,56 @@
+import React from "react";
+import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom} from "@material-ui/core"
+import MenuIcon from "@material-ui/icons/Menu";
+import DarkModeIcon from '@material-ui/icons/Brightness4';
+import LightModeIcon from '@material-ui/icons/Brightness7';
+
+
+export default function CustomAppBar(props){
+	const useStyles = makeStyles((theme) => ({
+		root: {
+			flexGrow: 1,
+		},
+		menuButton: {
+			marginLeft: theme.spacing(2),
+		},
+		title: {
+			flexGrow: 1,
+		},
+		tooltip: {
+			fontSize: theme.typography.pxToRem(14),
+		}
+	}));
+
+	const classes = useStyles(props.theme);
+
+	const toggleDarkMode = () => props.setDarkMode(!props.darkMode);
+
+	return(
+		<div className={classes.root}>
+			<AppBar position="fixed">
+				<Toolbar>
+					<Typography variant="h6" className={classes.title}>
+						{props.title}
+					</Typography>
+
+					<Tooltip title={"Turn " + (props.darkMode ? "off" : "on") + " dark mode"} 
+						arrow 
+						classes={classes.tooltip}
+						onClick={toggleDarkMode} 
+						TransitionComponent={Zoom}
+					>
+						<IconButton color="inherit">
+							{props.darkMode ? <DarkModeIcon /> : <LightModeIcon />}
+						</IconButton>
+					</Tooltip>
+
+					<IconButton edge="end" className={classes.menuButton} color="inherit" aria-label="menu">
+						<MenuIcon />
+					</IconButton>
+				</Toolbar>
+			</AppBar>
+			{/* Empty toolbar is to offset content below AppBar */}
+			<Toolbar />
+		</div>
+	);
+}