ItemViewAppBar displays unexpectedly

[campb303]

After this commit, the ItemViewAppBar component displays unexpectedly in the documentation. This should be looked into to see if there's a better way to implement the fix for Safari or if the documentation example should have custom styling.

Example: ItemViewAppBar Unexpected Behavior

Example: ItemTableAppBar Expected Behavior

[campb303]

Fixes for this have been reverted because of regression errors. This needs revisited.

[campb303]

This is related to #49

[campb303]

This is still an issue though non-urgent.

[campb303]

This will need to be looked into again -- possible using an MUI drawer for the sidebar instead of CSS boxes.

[wrigh393]

The Drawer component from MaterialUI works in a similar fashion to the way that we are currently rendering the ItemView. Currently, we are rendering the ItemView in a Box component that renders the data based on the item that is selected from the ItemTable component. This same functionality should be achievable using the Drawer component. In our case, the persistent drawer example does a good job of how we could implement the component as it allows the drawer to be both opened and closed.

[campb303]

It seems that using the drawer will first require a fully responsive ItemTable to avoid horizontal scrolling.

[wrigh393]

In order to fix how ItemViewAppBar is displaying in the docs the width was changed from being inherited from the parent to 100% of the container that its in. The position prop was also changed from fixed to sticky:

Previous:

//This is the class that is applied to the component to change the width
appBarRoot: {width: "inherit"},

<AppBar position="fixed" color="secondary" elevation={2} classes={{root: classes.appBarRoot}}>

Current:

//The width was changed from "inherit" to "100%" 
//Leaving it as "inherit" causes the ItemView to be scrollable horizontally 
appBarRoot: {width: "100%"},

//The position prop was changed to "sticky" to get the component to render in the proper place in the docs
<AppBar position="sticky" color="secondary" elevation={2} classes={{root: classes.appBarRoot}}>

Previous docs view:

Current docs view

The next step is to address the extra space below the component in the doc view.

[campb303]

Waiting for #191 to be merged.

[campb303]

When moving to Storybook this problem poofed.