#157 add Menu drawer on documentation website

.gitignore

@@ -1,3 +1,6 @@
+#Osx
+.DS_Store
+
 # Logs
 logs
 *.log

docs/icons/GitHub.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 
 import React from "react";
-import SvgIcon from "material-ui/SvgIcon";
+import SvgIcon from "@material-ui/core/SvgIcon";
 
 function GitHub(props) {
   return (

docs/pages/index.js

@@ -1,14 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Typography from "material-ui/Typography";
-import IconButton from "material-ui/IconButton";
-import Tooltip from "material-ui/Tooltip";
+import Typography from "@material-ui/core/Typography";
+import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
 import DownloadIcon from "@material-ui/icons/CloudDownload";
 import BuildIcon from "@material-ui/icons/Build"; // eslint-disable-line import/no-unresolved
 import CodeSnippet from "../utils/CodeSnippet";
 import Layout from "../utils/layout";
 import withRoot from "../utils/withRoot";
-import { withStyles } from "material-ui/styles";
+import { withStyles } from "@material-ui/core/styles";
 
 const styles = theme => ({
   stepIcon: {
@@ -38,7 +38,7 @@ class Homepage extends React.Component {
             selectable rows, pagination, and sorting. On top of the ability to customize styling on most views, there
             are two responsive modes "stacked" and "scroll" for mobile/tablet devices.
           </p>
-          <img src="/static/mui-datatables-main.jpg" className={classes.mainImage} border="0" />
+          <img src="/static/mui-datatables-main.jpg" className={classes.mainImage} border="0" alt="The look of the component" />
 
           <div className={classes.stepWrapper}>
             <DownloadIcon className={classes.stepIcon} />

docs/utils/CodeSnippet.js

@@ -4,8 +4,8 @@ import classnames from "classnames";
 import prism from "prismjs";
 import "prismjs/components/prism-jsx";
 import "prismjs/components/prism-bash";
-import Paper from "material-ui/Paper";
-import { withStyles } from "material-ui/styles";
+import Paper from "@material-ui/core/Paper";
+import { withStyles } from "@material-ui/core/styles";
 
 const styles = theme => ({});
 

docs/utils/Menu.js

@@ -0,0 +1,72 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withStyles } from "@material-ui/core";
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListSubheader from '@material-ui/core/ListSubheader';
+
+const styles = theme => ({
+    list: {
+        width: 250,
+    },
+    listTitle: {
+        fontSize: 25,
+    }
+});
+
+const sandboxes = [
+    { name: "Custom Component", href: "https://codesandbox.io/embed/xrvrzryjvp?autoresize=1&hidenavigation=1" },
+    { name: "Customize Columns", href: "https://codesandbox.io/embed/xowj5oj8w?autoresize=1&hidenavigation=1" },
+    { name: "Customize Footer", href: "https://codesandbox.io/embed/5z0w0w9jyk?autoresize=1&hidenavigation=1" },
+    { name: "Customize Styling", href: "https://codesandbox.io/embed/0ylq1lqwp0?autoresize=1&hidenavigation=1" },
+    { name: "Customize Toolbar", href: "https://codesandbox.io/embed/wy2rl1nyzl?autoresize=1&hidenavigation=1" },
+    { name: "Customize ToolbarSelect", href: "https://codesandbox.io/embed/545ym5ov6p?autoresize=1&hidenavigation=1" },
+    { name: "Resizable Columns", href: "https://codesandbox.io/embed/q8w3230qpj?autoresize=1&hidenavigation=1" },
+];
+
+const Exemple = props => (
+    <ListItem button>
+        <ListItemText onClick={() => window.open(props.href, "_blank")} primary={props.name} />
+    </ListItem>
+);
+
+Exemple.propTypes = {
+    href: PropTypes.string,
+    name: PropTypes.string,
+};
+
+class Menu extends React.Component {
+    render() {
+        const { isOpen, toggle, classes } = this.props;
+        return (
+            <Drawer open={isOpen} onClose={toggle} >
+                <div
+                    tabIndex={0}
+                    role="button"
+                    onClick={toggle}
+                    onKeyDown={toggle}
+                    className={classes.list}
+                >
+                    <List
+                        component="nav"
+                        subheader={<ListSubheader className={classes.listTitle} component="h2">Exemples</ListSubheader>}
+                    >
+                        {sandboxes.map((item) => (
+                            <Exemple href={item.href} name={item.name} />
+                        ))}
+                    </List>
+                </div>
+            </Drawer>
+        );
+    }
+}
+
+Menu.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    toggle: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Menu);

docs/utils/getPageContext.js

@@ -1,9 +1,9 @@
 /* eslint-disable no-underscore-dangle */
 
 import { SheetsRegistry } from "jss";
-import { createMuiTheme, createGenerateClassName } from "material-ui/styles";
-import purple from "material-ui/colors/purple";
-import green from "material-ui/colors/green";
+import { createMuiTheme, createGenerateClassName } from "@material-ui/core/styles";
+import purple from "@material-ui/core/colors/purple";
+import green from "@material-ui/core/colors/green";
 
 // A theme with custom primary and secondary color.
 // It's optional.

docs/utils/layout.js

@@ -1,15 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Head from "next/head";
-import Typography from "material-ui/Typography";
-import AppBar from "material-ui/AppBar";
-import Toolbar from "material-ui/Toolbar";
-import IconButton from "material-ui/IconButton";
+import Typography from "@material-ui/core/Typography";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import IconButton from "@material-ui/core/IconButton";
 import MenuIcon from "@material-ui/icons/Menu";
-import Tooltip from "material-ui/Tooltip";
+import Tooltip from "@material-ui/core/Tooltip";
 import GitHub from "../icons/GitHub";
 import withRoot from "../utils/withRoot";
-import { withStyles } from "material-ui/styles";
+import { withStyles } from "@material-ui/core/styles";
+import Menu from "./Menu";
 
 /* eslint-disable import/no-webpack-loader-syntax  */
 import lightTheme from "!raw-loader!prismjs/themes/prism.css";
@@ -45,6 +46,11 @@ const styles = theme => ({
 });
 
 class Layout extends React.Component {
+
+  state = {
+    drawerIsOpen: false
+  }
+
   componentDidMount() {
     const styleNode = document.createElement("style");
     styleNode.setAttribute("data-prism", "true");
@@ -55,14 +61,24 @@ class Layout extends React.Component {
     styleNode.textContent = lightTheme;
   }
 
+  toggleDrawer = () => {
+    const drawerIsOpen = this.state.drawerIsOpen ? false : true;
+    this.setState({ drawerIsOpen });
+  }
+
   render() {
     const { classes, children } = this.props;
+    const { drawerIsOpen } = this.state;
 
     return (
       <div className={classes.wrapper}>
+        <Menu
+          isOpen={drawerIsOpen}
+          toggle={this.toggleDrawer}
+        />
         <AppBar classes={{ root: classes.appBar }}>
           <Toolbar classes={{ root: classes.toolBar }}>
-            <IconButton color="inherit" aria-label="open drawer">
+            <IconButton onClick={this.toggleDrawer} color="inherit" aria-label="open drawer">
               <MenuIcon />
             </IconButton>
             <a href="/">

docs/utils/withRoot.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { MuiThemeProvider } from "material-ui/styles";
+import { MuiThemeProvider } from "@material-ui/core/styles";
 import getPageContext from "./getPageContext";
 
 function withRoot(Component) {