Separate ItemViewAppBar form ItemView and add ItemView margin

src/App.js

@@ -3,14 +3,14 @@ import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
 import { Box, makeStyles } from "@material-ui/core";
 import CustomAppBar from "./CustomAppBar";
 import ItemTable from "./ItemTable";
+import ItemViewAppBar from "./ItemViewAppBar";
 import ItemView from "./ItemView";
 import clsx from "clsx";
-import { objectIsEmpty }  from "./utilities"
 
 function App(){
 	const [darkMode, setDarkMode] = useState(false);
 	const [activeItem, setActiveItem] = useState({});
-	const [sidebarOpen, setSidebarOpen] = useState(false)
+	const [sidebarOpen, setSidebarOpen] = useState(false);
 
 	const theme = createMuiTheme({
 		"palette": {
@@ -28,16 +28,16 @@ function App(){
 			overflow: "auto",
 			width: "100vw",
 			height: "100vh",
-			transition: transitionWidth
+			transition: transitionWidth,
 		},
 		"rightCol": {
-			overflow: "hidden",
+			overflow: "auto",
 			width: "0",
 			height: "100vh",
 			transition: transitionWidth
 		},
 		"rightColShift": {
-			overflow: "auto",
+			overflowY: "auto",
 			width: "100vw",
 			flexShrink: "0",
 			transition: transitionWidth
@@ -54,11 +54,12 @@ function App(){
 	return (
 		<ThemeProvider theme={theme}>
 			<Box display="flex">
-				<Box className={classes.leftCol} >
+				<Box className={classes.leftCol}>
 					<CustomAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
 					<ItemTable activeItem={activeItem} setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
 				</Box>
 				<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
+					<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />
 					<ItemView activeItem={activeItem} setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
 				</Box>
 			</Box>

src/CustomAppBar.js

@@ -21,7 +21,7 @@ export default function CustomAppBar(props){
 
 	return(
 		<>
-			<AppBar position="sticky">
+			<AppBar position="sticky" elevation={2}>
 				<Toolbar>
 					<Typography variant="h6" className={classes.title}>
 						{props.title}

src/ItemView.js

@@ -1,20 +1,23 @@
 import React from 'react';
-import { ListItem, ListItemIcon, ListItemText, Paper, Typography, Divider } from '@material-ui/core';
+import { ListItem, ListItemIcon, ListItemText, Paper, Typography, Divider, makeStyles } from '@material-ui/core';
 import PersonIcon from '@material-ui/icons/Person';
 import CalendarIcon from '@material-ui/icons/CalendarToday';
 import AssignmentdIcon from '@material-ui/icons/AssignmentInd';
 import InfoIcon from '@material-ui/icons/Info';
 import ClockIcon from '@material-ui/icons/QueryBuilder';
-import ItemViewAppBar from './ItemViewAppBar'
 
 function ItemView(props){
-	return(
-		<Paper>
-			<ItemViewAppBar 
-				title={props.activeItem["queue"] + " " + props.activeItem["number"]}
-				setSidebarOpen={props.setSidebarOpen}
-			/>
 
+	const useStyles = makeStyles((theme) => ({
+		"paperMargin": {
+			paddingLeft: theme.spacing(3),
+		}
+	}));
+
+	const classes = useStyles();
+
+return(
+		<Paper classes={{root: classes.paperMargin}}>
 			<ListItem>
 				<Typography variant="h5">
 					{props.activeItem["subject"]}

src/ItemViewAppBar.js

@@ -6,7 +6,7 @@ import CloseItemViewIcon from '@material-ui/icons/ChevronRight';
 export default function ItemViewAppBar(props){
 	const useStyles = makeStyles((theme) => ({
 		closeButton: {
-			marginRight: theme.spacing(2),
+			marginRight: theme.spacing(3),
 		},
 		title: {
 			flexGrow: "1"
@@ -17,7 +17,7 @@ export default function ItemViewAppBar(props){
 
 	return(
 		<>
-			<AppBar position="sticky" color="secondary" elevation={0}>
+			<AppBar position="sticky" color="secondary" elevation={2}>
 				<Toolbar>
                     <Tooltip title={"Close Item"} 
 						arrow