feat(dashboard): dashboard layout with sidebar menu

package.json

@@ -54,6 +54,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^1.0.0",
+    "@material-ui/icons": "^1.1.0",
     "axios": "^0.18.0",
     "jsona": "^1.1.10",
     "prop-types": "^15.6.1",

src/layouts/DashboardLayout/DashboardLayout.js

@@ -0,0 +1,67 @@
+/**
+ * @file DashboardLayout.js
+ * Exports a React component that renders EditVR's dashboard layout.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import {
+  withStyles,
+  AppBar,
+  Drawer,
+  Toolbar,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText
+} from '@material-ui/core';
+import { ExitToApp, PanoramaWideAngle } from '@material-ui/icons';
+import LoadingBar from 'react-redux-loading-bar';
+
+import { ThemeProvider } from '../../hoc';
+import DashboardLayoutStyles from './DashboardLayout.style';
+import EditVRLogo from '../../assets/editvr-logo.svg';
+
+const DashboardLayout = ({ children, classes }) => (
+  <div id="layout__wrapper" className={classes.wrapper}>
+    <LoadingBar style={{ backgroundColor: '#FFFFFF' }} />
+    <AppBar className={classes.appBar}>
+      <Toolbar>
+        <img src={EditVRLogo} alt="EditVR logo" className={classes.logo} />
+      </Toolbar>
+    </AppBar>
+    <Drawer variant="permanent" classes={{ paper: classes.drawerPaper }}>
+      <List>
+        <ListItem button component={Link} to="/dashboard">
+          <ListItemIcon>
+            <PanoramaWideAngle />
+          </ListItemIcon>
+          <ListItemText>Experiences</ListItemText>
+        </ListItem>
+        <ListItem button component={Link} to="/logout">
+          <ListItemIcon>
+            <ExitToApp />
+          </ListItemIcon>
+          <ListItemText>Logout</ListItemText>
+        </ListItem>
+      </List>
+    </Drawer>
+    <main className={classes.content}>{children}</main>
+  </div>
+);
+
+DashboardLayout.propTypes = {
+  children: PropTypes.node,
+  classes: PropTypes.shape({
+    wrapper: PropTypes.string.isRequired
+  }).isRequired
+};
+
+DashboardLayout.defaultProps = {
+  children: null
+};
+
+export default ThemeProvider(
+  withStyles(DashboardLayoutStyles)(DashboardLayout)
+);

src/layouts/DashboardLayout/DashboardLayout.style.js

@@ -0,0 +1,37 @@
+/**
+ * @file DashboardLayout.style.js
+ * Exports styling that's shared across many layouts.
+ */
+
+export default theme => ({
+  wrapper: {
+    backgroundColor: theme.palette.background.default,
+    paddingTop: theme.spacing.unit * 8,
+    flexGrow: 1,
+    zIndex: 1,
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+    height: '100%'
+  },
+  appBar: {
+    position: 'absolute',
+    zIndex: theme.zIndex.drawer + 1
+  },
+  drawerPaper: {
+    position: 'relative',
+    width: 200,
+    textAlign: 'left'
+  },
+  content: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing.unit * 3,
+    minWidth: 0,
+    maxWidth: 600
+  },
+  logo: {
+    height: theme.spacing.unit * 3,
+    marginRight: theme.spacing.unit * 5
+  }
+});

src/layouts/DashboardLayout/DashboardLayout.test.js

@@ -0,0 +1,36 @@
+/**
+ * @file DashboardLayout.test.js
+ * Contains tests for DashboardLayout.js.
+ */
+
+import React from 'react';
+import { MemoryRouter as Router } from 'react-router-dom';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+
+import DashboardLayout from './DashboardLayout';
+
+describe('<DashboardLayout />', () => {
+  it('Matches its snapshot', () => {
+    const store = configureStore()({
+      loadingBar: {
+        default: 0
+      }
+    });
+
+    expect(
+      renderer
+        .create(
+          <Provider store={store}>
+            <Router>
+              <DashboardLayout>
+                <div>child</div>
+              </DashboardLayout>
+            </Router>
+          </Provider>
+        )
+        .toJSON()
+    ).toMatchSnapshot();
+  });
+});

src/layouts/DashboardLayout/__snapshots__/DashboardLayout.test.js.snap

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DashboardLayout /> Matches its snapshot 1`] = `
+<div
+  className="DashboardLayout-wrapper-1"
+  id="layout__wrapper"
+>
+  <div />
+  <header
+    className="MuiPaper-root-14 MuiPaper-elevation4-20 MuiAppBar-root-6 MuiAppBar-positionFixed-7 MuiAppBar-colorPrimary-12 mui-fixed DashboardLayout-appBar-2"
+  >
+    <div
+      className="MuiToolbar-root-41 MuiToolbar-gutters-42"
+    >
+      <img
+        alt="EditVR logo"
+        className="DashboardLayout-logo-5"
+        src="editvr-logo.svg"
+      />
+    </div>
+  </header>
+  <div
+    className="MuiDrawer-docked-43"
+  >
+    <div
+      className="MuiPaper-root-14 MuiPaper-elevation0-16 MuiDrawer-paper-44 DashboardLayout-drawerPaper-3 MuiDrawer-paperAnchorLeft-45 MuiDrawer-paperAnchorDockedLeft-49"
+    >
+      <ul
+        className="MuiList-root-54 MuiList-padding-55"
+      >
+        <a
+          className="MuiButtonBase-root-68 MuiListItem-root-58 MuiListItem-default-61 MuiListItem-gutters-65 MuiListItem-button-66"
+          href="/dashboard"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <svg
+            aria-hidden="true"
+            className="MuiSvgIcon-root-72 MuiListItemIcon-root-71"
+            color={undefined}
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <g>
+              <path
+                d="M12 6c2.45 0 4.71.2 7.29.64.47 1.78.71 3.58.71 5.36 0 1.78-.24 3.58-.71 5.36-2.58.44-4.84.64-7.29.64s-4.71-.2-7.29-.64C4.24 15.58 4 13.78 4 12c0-1.78.24-3.58.71-5.36C7.29 6.2 9.55 6 12 6m0-2c-2.73 0-5.22.24-7.95.72l-.93.16-.25.9C2.29 7.85 2 9.93 2 12s.29 4.15.87 6.22l.25.89.93.16c2.73.49 5.22.73 7.95.73s5.22-.24 7.95-.72l.93-.16.25-.89c.58-2.08.87-4.16.87-6.23s-.29-4.15-.87-6.22l-.25-.89-.93-.16C17.22 4.24 14.73 4 12 4z"
+              />
+            </g>
+          </svg>
+          <div
+            className="MuiListItemText-root-78"
+          >
+            <h3
+              className="MuiTypography-root-84 MuiTypography-subheading-91 MuiListItemText-primary-81"
+            >
+              Experiences
+            </h3>
+          </div>
+          <span
+            className="MuiTouchRipple-root-108"
+          />
+        </a>
+        <a
+          className="MuiButtonBase-root-68 MuiListItem-root-58 MuiListItem-default-61 MuiListItem-gutters-65 MuiListItem-button-66"
+          href="/logout"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          role="button"
+          tabIndex="0"
+        >
+          <svg
+            aria-hidden="true"
+            className="MuiSvgIcon-root-72 MuiListItemIcon-root-71"
+            color={undefined}
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <g>
+              <path
+                d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+              />
+            </g>
+          </svg>
+          <div
+            className="MuiListItemText-root-78"
+          >
+            <h3
+              className="MuiTypography-root-84 MuiTypography-subheading-91 MuiListItemText-primary-81"
+            >
+              Logout
+            </h3>
+          </div>
+          <span
+            className="MuiTouchRipple-root-108"
+          />
+        </a>
+      </ul>
+    </div>
+  </div>
+  <main
+    className="DashboardLayout-content-4"
+  >
+    <div>
+      child
+    </div>
+  </main>
+</div>
+`;

src/layouts/ThinLayout/ThinLayout.style.js

@@ -1,11 +1,11 @@
 /**
- * @file Layout.style.js
+ * @file ThinLayout.style.js
  * Exports styling that's shared across many layouts.
  */
 
 export default theme => ({
   wrapper: {
-    background: theme.palette.grays['500'],
+    background: theme.palette.background.default,
     width: '100%',
     height: '100%',
     position: 'absolute',

src/layouts/index.js

@@ -4,7 +4,8 @@
  */
 
 import ThinLayout from './ThinLayout/ThinLayout';
+import DashboardLayout from './DashboardLayout/DashboardLayout';
 import Header from './Header/Header';
 import Footer from './Footer/Footer';
 
-export { ThinLayout, Header, Footer };
+export { ThinLayout, DashboardLayout, Header, Footer };

src/pages/Dashboard/Dashboard.js

@@ -15,7 +15,7 @@ import {
   withStyles
 } from '@material-ui/core';
 
-import { ThinLayout } from '../../layouts';
+import { DashboardLayout } from '../../layouts';
 import { Message } from '../../components';
 import { EXPERIENCES_FETCH_FOR_USER } from '../../constants';
 import DashboardStyles from './Dashboard.style';
@@ -74,7 +74,7 @@ class Dashboard extends Component {
     } = this.props;
 
     return (
-      <ThinLayout>
+      <DashboardLayout>
         <Typography variant="headline">Experiences</Typography>
         <Typography component="p">
           Please select an experience below. Click the Open button to open the
@@ -110,7 +110,7 @@ class Dashboard extends Component {
             </Card>
           )
         )}
-      </ThinLayout>
+      </DashboardLayout>
     );
   }
 }