Updated documentation, fixed styling bug, and update to use useTheme …

…hook

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,19 +23,26 @@ 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}}>
 
 				<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. */

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} />
 ```