diff --git a/docs/utils/CodeSnippet.js b/docs/utils/CodeSnippet.js
index dc936020f..61011aa31 100644
--- a/docs/utils/CodeSnippet.js
+++ b/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 => ({});
diff --git a/docs/utils/Menu.js b/docs/utils/Menu.js
new file mode 100644
index 000000000..6e9e139b0
--- /dev/null
+++ b/docs/utils/Menu.js
@@ -0,0 +1,74 @@
+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: "Simple", href: "https://codesandbox.io/s/new" },
+ { name: "Customize columns", href: "https://codesandbox.io/s/new" },
+ { name: "Customize footer", href: "https://codesandbox.io/s/new" },
+ { name: "Customize styling", href: "https://codesandbox.io/s/new" },
+ { name: "Customize toolbar", href: "https://codesandbox.io/s/new" },
+ { name: "Customize toolbarselect", href: "https://codesandbox.io/s/new" },
+ { name: "Resizable columns", href: "https://codesandbox.io/s/new" },
+ { name: "Serverside options", href: "https://codesandbox.io/s/new" },
+ { name: "Text localization", href: "https://codesandbox.io/s/new" },
+];
+
+const Exemple = props => (
+
+);
+
+Exemple.propTypes = {
+ href: PropTypes.string,
+ name: PropTypes.string,
+};
+
+class Menu extends React.Component {
+ render() {
+ const { isOpen, toggle, classes } = this.props;
+ return (
+
+
+ Exemples}
+ >
+ {sandboxes.map((item) => (
+
+ ))}
+
+
+
+ );
+ }
+}
+
+Menu.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ toggle: PropTypes.func.isRequired,
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Menu);
\ No newline at end of file
diff --git a/docs/utils/getPageContext.js b/docs/utils/getPageContext.js
index 3cc33b288..9bb5e935f 100644
--- a/docs/utils/getPageContext.js
+++ b/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.
diff --git a/docs/utils/layout.js b/docs/utils/layout.js
index 11f794c3f..dc67ed932 100644
--- a/docs/utils/layout.js
+++ b/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 (