From 32998409e127b6ad94f683b3b0319088b9121685 Mon Sep 17 00:00:00 2001
From: Christian Thomas Elfreich <celfreic@w2vm3.ecn.purdue.edu>
Date: Mon, 19 Oct 2020 11:25:58 -0400
Subject: [PATCH] Updated documentation, fixed styling bug, and update to use
 useTheme hook

---
 .../ItemViewAppBar/ItemViewAppBar.js          | 22 +++++++++++++------
 .../ItemViewAppBar/ItemViewAppBar.md          |  4 ++--
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/ItemViewAppBar/ItemViewAppBar.js b/src/components/ItemViewAppBar/ItemViewAppBar.js
index 9e7240d..a517cb3 100644
--- a/src/components/ItemViewAppBar/ItemViewAppBar.js
+++ b/src/components/ItemViewAppBar/ItemViewAppBar.js
@@ -1,16 +1,18 @@
 import React, { useEffect } from "react";
+import { useHistory } from "react-router-dom";
 import PropTypes from "prop-types";
-import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom} from "@material-ui/core"
+import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom, useTheme} from "@material-ui/core"
 import CloseItemViewIcon from '@material-ui/icons/ChevronRight';
 
 
-export default function ItemViewAppBar({ title, theme, setSidebarOpen }){
+export default function ItemViewAppBar({ title, setSidebarOpen }){
 
 	useEffect(() => {
 		setSidebarOpen(true)
 		return () => setSidebarOpen(false)
 	});
 
+	const theme = useTheme();
 	const useStyles = makeStyles((theme) => ({
 		closeButton: {
 			marginRight: theme.spacing(3),
@@ -21,11 +23,15 @@ export default function ItemViewAppBar({ title, theme, setSidebarOpen }){
 		appBarRoot: {
 			width: "inherit",
 			position: "inherit"
+		},
+		paddingToolbar: {
+			position: "absolute"
 		}
 	}));
-
 	const classes = useStyles(theme);
 
+	const history = useHistory();
+
 	return(
 		<>
 			<AppBar position="fixed" color="secondary" elevation={2} classes={{root: classes.appBarRoot}}>
@@ -33,7 +39,10 @@ export default function ItemViewAppBar({ title, theme, setSidebarOpen }){
 				<Toolbar variant="dense">
                     <Tooltip title={"Close Item"} 
 						arrow 
-						onClick={() => setSidebarOpen(false)}
+						onClick={() => 
+						{
+							history.push("/");
+						}}
 						TransitionComponent={Zoom}
 					>
 						<IconButton color="inherit" className={classes.closeButton}>
@@ -46,14 +55,13 @@ export default function ItemViewAppBar({ title, theme, setSidebarOpen }){
 					</Typography>
 				</Toolbar>
 			</AppBar>
-			<Toolbar variant="dense"/>
+			<Toolbar classes={{root: classes.paddingToolbar}} variant="dense"/>
 		</>
 	);
 }
 
 ItemViewAppBar.propTypes = {
-	/** The webqueue2 MUI theme. */
-	"theme": PropTypes.object.isRequired,
+
 	/** Function to toggle sidebar open. */
 	"setSidebarOpen": PropTypes.func.isRequired,
 	/** The title of the app bar. */
diff --git a/src/components/ItemViewAppBar/ItemViewAppBar.md b/src/components/ItemViewAppBar/ItemViewAppBar.md
index 26fdb9e..3eba2e4 100644
--- a/src/components/ItemViewAppBar/ItemViewAppBar.md
+++ b/src/components/ItemViewAppBar/ItemViewAppBar.md
@@ -9,9 +9,9 @@ const theme = webqueue2Theme(false);
 
 const [sidebarOpen, setSidebarOpen] = useState(false);
 
-<ItemViewAppBar title="ce 100" setSidebarOpen={setSidebarOpen} theme={theme} />
+<ItemViewAppBar title="ce 100" setSidebarOpen={setSidebarOpen} />
 ```
 
 ```jsx static
-<ItemViewAppBar  title={"ce 100"} setSidebarOpen={someFunc} theme={theme} />
+<ItemViewAppBar  title={"ce 100"} setSidebarOpen={someFunc} />
 ```
\ No newline at end of file