Merge branch 'gabshr' into dayana

19 files changed, 1494 insertions, 0 deletions

diff --git a/front/odiparpack/app/containers/Layouts/AppLayout.js b/front/odiparpack/app/containers/Layouts/AppLayout.js
new file mode 100644
index 0000000..c0e96d0
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/AppLayout.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { SidebarLayout, SidebarLayoutRight, FullHeader } from './demos';
+
+class AppLayout extends Component {
+  render() {
+    const title = brand.name + ' - Layout';
+    const description = brand.desc;
+    const docSrc = 'containers/Layouts/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="App Layout with Sidebars" desc="The Drawer slides in from the side. It is a common pattern found in Google apps and follows the keylines and metrics for lists.">
+          <div>
+            <SidebarLayout />
+            <SourceReader componentName={docSrc + 'SidebarLayout.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Right Sidebar Mode" desc="The Drawer slides in from the side. It is a common pattern found in Google apps and follows the keylines and metrics for lists.">
+          <div>
+            <SidebarLayoutRight />
+            <SourceReader componentName={docSrc + 'SidebarLayoutRight.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Full Header Mode" desc="Apps focused on productivity that require balance across the screen.">
+          <div>
+            <FullHeader />
+            <SourceReader componentName={docSrc + 'FullHeader.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default AppLayout;
diff --git a/front/odiparpack/app/containers/Layouts/Grid.js b/front/odiparpack/app/containers/Layouts/Grid.js
new file mode 100644
index 0000000..6a1057d
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/Grid.js
@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Grid } from '@material-ui/core';
+import {
+  GridLayout,
+  FullWidth,
+  Centered,
+  Interactive,
+  AutoLayout,
+  Limitation
+} from './demos';
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class GridPage extends Component {
+  render() {
+    const { classes } = this.props;
+    const title = brand.name + ' - Layout';
+    const description = brand.desc;
+    const docSrc = 'containers/Layouts/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Grid Spacing" desc="The responsive grid focuses on consistent spacing widths, rather than column width. Material design margins and columns follow an 8dp square baseline grid. Spacing can be 8, 16, 24, or 40dp wide.">
+          <div>
+            <GridLayout />
+            <SourceReader componentName={docSrc + 'GridLayout.js'} />
+          </div>
+        </PapperBlock>
+
+        <PapperBlock title="Full-width" desc="Full-width grids: use fluid columns and breakpoints to determine when a layout needs to change.">
+          <div>
+            <FullWidth />
+            <SourceReader componentName={docSrc + 'FullWidth.js'} />
+          </div>
+        </PapperBlock>
+
+        <PapperBlock title="Centered Grid" desc="Centered grids: use fixed columns and re-flow the layout when all columns (plus a defined margin) no longer fit on the screen.">
+          <div>
+            <Centered />
+            <SourceReader componentName={docSrc + 'Centered.js'} />
+          </div>
+        </PapperBlock>
+
+        <PapperBlock title="Interactive" desc="Below is an interactive demo that lets you explore the visual results of the different settings:">
+          <div>
+            <Interactive />
+            <SourceReader componentName={docSrc + 'Interactive.js'} />
+          </div>
+        </PapperBlock>
+
+        <div className={classes.root}>
+          <Grid container spacing={3}>
+            <Grid item md={6} xs={12}>
+              <PapperBlock title="Auto Layout" desc="The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.">
+                <div>
+                  <AutoLayout />
+                  <SourceReader componentName={docSrc + 'AutoLayout.js'} />
+                </div>
+              </PapperBlock>
+            </Grid>
+            <Grid item md={6} xs={12}>
+              <PapperBlock title="Limitations" overflowX desc="There is one limitation with the negative margin we use to implement the spacing between items.">
+                <div>
+                  <Limitation />
+                  <SourceReader componentName={docSrc + 'Limitation.js'} />
+                </div>
+              </PapperBlock>
+            </Grid>
+          </Grid>
+        </div>
+      </div>
+    );
+  }
+}
+
+GridPage.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(GridPage);
diff --git a/front/odiparpack/app/containers/Layouts/Responsive.js b/front/odiparpack/app/containers/Layouts/Responsive.js
new file mode 100644
index 0000000..b5d6db2
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/Responsive.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import Markdown from 'react-markdown';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Breakpoint, BreakpointGrid, MediaQueries, WIthWIdth } from './demos';
+import breakpointsTable from './demos/breakpoint.md';
+
+class Responsive extends Component {
+  render() {
+    const title = brand.name + ' - Layout';
+    const description = brand.desc;
+    const docSrc = 'containers/Layouts/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Media Queries" desc="CSS media queries is the idiomatic approach to make your UI responsive.. We provide some CSS-in-JS helpers to do so. In the following demo, we change the background color (red, blue & green) based on the screen width.">
+          <div>
+            <MediaQueries />
+            <SourceReader componentName={docSrc + 'MediaQueries.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="With Width" desc="Sometimes, using CSS isn't enough. You might want to change the React rendering tree based on the breakpoint value, in JavaScript. We provide a withWidth() higher-order component for this use case. In the following demo, we change the rendered DOM element (em, u, del & span) based on the screen width.">
+          <div>
+            <WIthWIdth />
+            <SourceReader componentName={docSrc + 'WIthWIdth.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock overflowX title="Hidden" desc="Hidden works with a range of breakpoints e.g. xsUp or mdDown, or one or more breakpoints e.g. only='sm' or only={['md', 'xl']}. Ranges and individual breakpoints can be used simultaneously to achieve very customized behavior. The ranges are inclusive of the specified breakpoints.">
+          <div>
+            <Markdown source={breakpointsTable} />
+            <Breakpoint />
+            <SourceReader componentName={docSrc + 'Breakpoint.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Integration with Grid" desc="It is quite common to alter Grid at different responsive breakpoints, and in many cases, you want to hide some of those elements.">
+          <div>
+            <BreakpointGrid />
+            <SourceReader componentName={docSrc + 'BreakpointGrid.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default Responsive;
diff --git a/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js b/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js
new file mode 100644
index 0000000..864d17e
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Typography, Paper, Divider, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+  container: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(12, 1fr)',
+    gridGap: `${theme.spacing(3)}px`,
+  },
+  paper: {
+    padding: theme.spacing(1),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+    whiteSpace: 'nowrap',
+    marginBottom: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.light,
+  },
+  divider: {
+    margin: `${theme.spacing(2)}px 0`,
+  },
+});
+
+function CSSGrid(props) {
+  const { classes } = props;
+
+  return (
+    <div>
+      <Typography variant="subtitle1" gutterBottom>
+        Material-UI Grid:
+      </Typography>
+      <Grid container spacing={3}>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={8}>
+          <Paper className={classes.paper}>xs=8</Paper>
+        </Grid>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>xs=4</Paper>
+        </Grid>
+      </Grid>
+      <Divider className={classes.divider} />
+      <Typography variant="subtitle1" gutterBottom>
+        CSS Grid Layout:
+      </Typography>
+      <div className={classes.container}>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 8' }}>
+          <Paper className={classes.paper}>xs=8</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 4' }}>
+          <Paper className={classes.paper}>xs=4</Paper>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+CSSGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CSSGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js b/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js
new file mode 100644
index 0000000..be557b4
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import compose from 'recompose/compose';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Hidden, Divider, withWidth, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  container: {
+    display: 'flex',
+  },
+  paper: {
+    padding: theme.spacing(2),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+    flex: '1 0 auto',
+    margin: theme.spacing(1),
+  },
+  divider: {
+    display: 'block',
+    margin: `${theme.spacing(3)}px 0`,
+  }
+});
+
+function Breakpoint(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      {/* Breakpoin up block */}
+      <Typography variant="h5">Breakpoint up</Typography>
+      <Typography gutterBottom noWrap>
+        Using any breakpoint up property, the given children will be hidden at or above the breakpoint.
+      </Typography>
+      <div className={classes.container}>
+        <Hidden xsUp>
+          <Paper className={classes.paper}>xsUp</Paper>
+        </Hidden>
+        <Hidden smUp>
+          <Paper className={classes.paper}>smUp</Paper>
+        </Hidden>
+        <Hidden mdUp>
+          <Paper className={classes.paper}>mdUp</Paper>
+        </Hidden>
+        <Hidden lgUp>
+          <Paper className={classes.paper}>lgUp</Paper>
+        </Hidden>
+        <Hidden xlUp>
+          <Paper className={classes.paper}>xlUp</Paper>
+        </Hidden>
+      </div>
+      <Typography variant="caption" gutterBottom align="center">
+Current width:
+        {props.width}
+      </Typography>
+      <Divider className={classes.divider} />
+      {/* Breakpoin down block */}
+      <Typography variant="h5">Breakpoint down</Typography>
+      <Typography gutterBottom noWrap>
+        Using any breakpoint down property, the given children will be hidden at or below the breakpoint.
+      </Typography>
+      <div className={classes.container}>
+        <Hidden xsDown>
+          <Paper className={classes.paper}>xsDown</Paper>
+        </Hidden>
+        <Hidden smDown>
+          <Paper className={classes.paper}>smDown</Paper>
+        </Hidden>
+        <Hidden mdDown>
+          <Paper className={classes.paper}>mdDown</Paper>
+        </Hidden>
+        <Hidden lgDown>
+          <Paper className={classes.paper}>lgDown</Paper>
+        </Hidden>
+        <Hidden xlDown>
+          <Paper className={classes.paper}>xlDown</Paper>
+        </Hidden>
+      </div>
+      <Typography variant="caption" gutterBottom align="center">
+Current width:
+        {props.width}
+      </Typography>
+      <Divider className={classes.divider} />
+      {/* Breakpoin only block */}
+      <Typography variant="h5">Breakpoint only</Typography>
+      <Typography gutterBottom noWrap>
+        Using the breakpoint only property, the given children will be hidden at the specified breakpoint(s).
+      </Typography>
+      <div className={classes.container}>
+        <Hidden only="lg">
+          <Paper className={classes.paper}>Hidden on lg</Paper>
+        </Hidden>
+        <Hidden only="sm">
+          <Paper className={classes.paper}>Hidden on sm</Paper>
+        </Hidden>
+        <Hidden only={['sm', 'lg']}>
+          <Paper className={classes.paper}>Hidden on sm and lg</Paper>
+        </Hidden>
+      </div>
+      <Typography variant="caption" gutterBottom align="center">
+Current width:
+        {props.width}
+      </Typography>
+    </div>
+  );
+}
+
+Breakpoint.propTypes = {
+  classes: PropTypes.object.isRequired,
+  width: PropTypes.string.isRequired,
+};
+
+export default compose(withStyles(styles), withWidth())(Breakpoint);
diff --git a/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js b/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js
new file mode 100644
index 0000000..cd94ef9
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import compose from 'recompose/compose';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Grid, withWidth, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  container: {
+    display: 'flex',
+  },
+  paper: {
+    padding: theme.spacing(2),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+    flex: '1 0 auto',
+    margin: theme.spacing(1),
+  },
+});
+
+function GridIntegration(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.container}>
+        <Grid container spacing={3}>
+          <Grid item xs hidden={{ xsUp: true }}>
+            <Paper className={classes.paper}>xsUp</Paper>
+          </Grid>
+          <Grid item xs hidden={{ smUp: true }}>
+            <Paper className={classes.paper}>smUp</Paper>
+          </Grid>
+          <Grid item xs hidden={{ mdUp: true }}>
+            <Paper className={classes.paper}>mdUp</Paper>
+          </Grid>
+          <Grid item xs hidden={{ lgUp: true }}>
+            <Paper className={classes.paper}>lgUp</Paper>
+          </Grid>
+          <Grid item xs hidden={{ xlUp: true }}>
+            <Paper className={classes.paper}>xlUp</Paper>
+          </Grid>
+        </Grid>
+      </div>
+      <Typography variant="caption" align="center">
+Current width:
+        {props.width}
+      </Typography>
+    </div>
+  );
+}
+
+GridIntegration.propTypes = {
+  classes: PropTypes.object.isRequired,
+  width: PropTypes.string.isRequired,
+};
+
+export default compose(withStyles(styles), withWidth())(GridIntegration);
diff --git a/front/odiparpack/app/containers/Layouts/demos/Centered.js b/front/odiparpack/app/containers/Layouts/demos/Centered.js
new file mode 100644
index 0000000..cdd1c10
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/Centered.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  paper: {
+    padding: theme.spacing(2),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+    backgroundColor: theme.palette.secondary.light,
+  },
+});
+
+function CenteredGrid(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Paper className={classes.paper}>xs=12</Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper className={classes.paper}>xs=6</Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper className={classes.paper}>xs=6</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+CenteredGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CenteredGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/FullHeader.js b/front/odiparpack/app/containers/Layouts/demos/FullHeader.js
new file mode 100644
index 0000000..d5ef402
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/FullHeader.js
@@ -0,0 +1,153 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MenuIcon from '@material-ui/icons/Menu';
+import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    height: 430,
+    zIndex: 1,
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+  },
+  menuButton: {
+    marginLeft: 0,
+    marginRight: 36,
+  },
+  drawerPaper: {
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    [theme.breakpoints.up('md')]: {
+      position: 'relative',
+    },
+  },
+  drawerPaperClose: {
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: 70,
+    [theme.breakpoints.up('sm')]: {
+      width: 70,
+    },
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: '0 8px',
+    ...theme.mixins.toolbar,
+  },
+  content: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing(3),
+  },
+});
+
+class FullHeader extends React.Component {
+  state = {
+    open: true,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resize.bind(this));
+    this.resize();
+  }
+
+  resize() {
+    this.setState({ open: window.innerWidth >= 760 });
+  }
+
+  handleDrawerToggle = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { open } = this.state;
+    const drawer = (
+      <div>
+        <div className={classes.toolbar} />
+        <Divider />
+        <List>{mailFolderListItems}</List>
+        <Divider />
+        <List>{otherMailFolderListItems}</List>
+      </div>
+    );
+    return (
+      <div className={classes.root}>
+        <AppBar
+          position="absolute"
+          className={classes.appBar}
+        >
+          <Toolbar>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={this.handleDrawerToggle}
+              className={classNames(classes.menuButton)}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" color="inherit" noWrap>
+              Clipped under the app bar
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Hidden mdUp>
+          <Drawer
+            variant="temporary"
+            anchor="left"
+            open={open}
+            onClose={this.handleDrawerToggle}
+            classes={{
+              paper: classes.drawerPaper,
+            }}
+            ModalProps={{
+              keepMounted: true, // Better open performance on mobile.
+            }}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+        <Hidden smDown implementation="css">
+          <Drawer
+            variant="permanent"
+            classes={{
+              paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose),
+            }}
+            open={open}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+        <main className={classes.content}>
+          <div className={classes.toolbar} />
+          <Typography noWrap>Your App Content</Typography>
+        </main>
+      </div>
+    );
+  }
+}
+
+FullHeader.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(FullHeader);
diff --git a/front/odiparpack/app/containers/Layouts/demos/FullWidth.js b/front/odiparpack/app/containers/Layouts/demos/FullWidth.js
new file mode 100644
index 0000000..fa7dbce
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/FullWidth.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  paper: {
+    padding: theme.spacing(2),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+    backgroundColor: theme.palette.secondary.light
+  },
+});
+
+function FullWidthGrid(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Paper className={classes.paper}>xs=12</Paper>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Paper className={classes.paper}>xs=12 sm=6</Paper>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Paper className={classes.paper}>xs=12 sm=6</Paper>
+        </Grid>
+        <Grid item xs={6} sm={3}>
+          <Paper className={classes.paper}>xs=6 sm=3</Paper>
+        </Grid>
+        <Grid item xs={6} sm={3}>
+          <Paper className={classes.paper}>xs=6 sm=3</Paper>
+        </Grid>
+        <Grid item xs={6} sm={3}>
+          <Paper className={classes.paper}>xs=6 sm=3</Paper>
+        </Grid>
+        <Grid item xs={6} sm={3}>
+          <Paper className={classes.paper}>xs=6 sm=3</Paper>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+FullWidthGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(FullWidthGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/GridLayout.js b/front/odiparpack/app/containers/Layouts/demos/GridLayout.js
new file mode 100644
index 0000000..d764c1c
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/GridLayout.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Grid, FormLabel, FormControlLabel, Radio, RadioGroup, Paper } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  paper: {
+    height: 140,
+    width: 100,
+    backgroundColor: theme.palette.secondary.light,
+  },
+  control: {
+    marginTop: theme.spacing(2),
+    padding: theme.spacing(2),
+  },
+});
+
+class GuttersGrid extends React.Component {
+  state = {
+    spacing: '2',
+  };
+
+  handleChange = key => (event, value) => {
+    this.setState({
+      [key]: value,
+    });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { spacing } = this.state;
+
+    return (
+      <Grid container className={classes.root}>
+        <Grid item xs={12}>
+          <Grid container className={classes.demo} justify="center" spacing={Number(spacing)}>
+            {[0, 1, 2].map(value => (
+              <Grid key={value} item>
+                <Paper className={classes.paper} />
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Paper className={classes.control}>
+            <Grid container>
+              <Grid item>
+                <FormLabel>spacing</FormLabel>
+                <RadioGroup
+                  name="spacing"
+                  aria-label="spacing"
+                  value={spacing}
+                  onChange={this.handleChange('spacing')}
+                  row
+                >
+                  <FormControlLabel value="0" control={<Radio />} label="0" />
+                  <FormControlLabel value="1" control={<Radio />} label="1" />
+                  <FormControlLabel value="2" control={<Radio />} label="2" />
+                  <FormControlLabel value="3" control={<Radio />} label="3" />
+                  <FormControlLabel value="4" control={<Radio />} label="4" />
+                </RadioGroup>
+              </Grid>
+            </Grid>
+          </Paper>
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+GuttersGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(GuttersGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/Interactive.js b/front/odiparpack/app/containers/Layouts/demos/Interactive.js
new file mode 100644
index 0000000..2f46841
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/Interactive.js
@@ -0,0 +1,138 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Grid, FormControl, FormLabel, FormControlLabel, RadioGroup, Radio, Paper } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  demo: {
+    height: 240,
+  },
+  paper: {
+    padding: theme.spacing(2),
+    height: '100%',
+    backgroundColor: theme.palette.secondary.light,
+  },
+  control: {
+    padding: theme.spacing(2),
+  },
+});
+
+class InteractiveGrid extends React.Component {
+  state = {
+    direction: 'row',
+    justify: 'center',
+    alignItems: 'center',
+  };
+
+  handleChange = key => (event, value) => {
+    this.setState({
+      [key]: value,
+    });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { alignItems, direction, justify } = this.state;
+    return (
+      <Grid container className={classes.root}>
+        <Grid item xs={12}>
+          <Grid
+            container
+            className={classes.demo}
+            alignItems={alignItems}
+            direction={direction}
+            justify={justify}
+          >
+            {[0, 1, 2].map(value => (
+              <Grid key={value} item>
+                <Paper
+                  className={classes.paper}
+                  style={{ paddingTop: (value + 1) * 10, paddingBottom: (value + 1) * 10 }}
+                >
+                  {`Cell ${value + 1}`}
+                </Paper>
+              </Grid>
+            ))}
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Paper className={classes.control}>
+            <Grid container>
+              <Grid item xs={6} sm={4}>
+                <FormControl component="fieldset">
+                  <FormLabel>direction</FormLabel>
+                  <RadioGroup
+                    name="direction"
+                    aria-label="direction"
+                    value={direction}
+                    onChange={this.handleChange('direction')}
+                  >
+                    <FormControlLabel value="row" control={<Radio />} label="row" />
+                    <FormControlLabel value="row-reverse" control={<Radio />} label="row-reverse" />
+                    <FormControlLabel value="column" control={<Radio />} label="column" />
+                    <FormControlLabel
+                      value="column-reverse"
+                      control={<Radio />}
+                      label="column-reverse"
+                    />
+                  </RadioGroup>
+                </FormControl>
+              </Grid>
+              <Grid item xs={6} sm={4}>
+                <FormControl component="fieldset">
+                  <FormLabel>justify</FormLabel>
+                  <RadioGroup
+                    name="justify"
+                    aria-label="justify"
+                    value={justify}
+                    onChange={this.handleChange('justify')}
+                  >
+                    <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
+                    <FormControlLabel value="center" control={<Radio />} label="center" />
+                    <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
+                    <FormControlLabel
+                      value="space-between"
+                      control={<Radio />}
+                      label="space-between"
+                    />
+                    <FormControlLabel
+                      value="space-around"
+                      control={<Radio />}
+                      label="space-around"
+                    />
+                  </RadioGroup>
+                </FormControl>
+              </Grid>
+              <Grid item xs={6} sm={4}>
+                <FormControl component="fieldset">
+                  <FormLabel>alignItems</FormLabel>
+                  <RadioGroup
+                    name="alignItems"
+                    aria-label="alignItems"
+                    value={alignItems}
+                    onChange={this.handleChange('alignItems')}
+                  >
+                    <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
+                    <FormControlLabel value="center" control={<Radio />} label="center" />
+                    <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
+                    <FormControlLabel value="stretch" control={<Radio />} label="stretch" />
+                    <FormControlLabel value="baseline" control={<Radio />} label="baseline" />
+                  </RadioGroup>
+                </FormControl>
+              </Grid>
+            </Grid>
+          </Paper>
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+InteractiveGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(InteractiveGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/Limitation.js b/front/odiparpack/app/containers/Layouts/demos/Limitation.js
new file mode 100644
index 0000000..076c85f
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/Limitation.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Grid, Avatar, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    overflow: 'hidden',
+    padding: `0 ${theme.spacing(3)}px`,
+  },
+  wrapper: {
+    maxWidth: 400,
+  },
+  paper: {
+    margin: theme.spacing(1),
+    padding: theme.spacing(2),
+    backgroundColor: theme.palette.secondary.light,
+  },
+});
+
+function AutoGridNoWrap(props) {
+  const { classes } = props;
+  const message = `Truncation should be conditionally applicable on this long line of text
+                    as this is a much longer line than what the container can support. `;
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.wrapper}>
+        <Paper className={classes.paper}>
+          <Grid container wrap="nowrap">
+            <Grid item>
+              <Avatar>W</Avatar>
+            </Grid>
+            <Grid item xs zeroMinWidth>
+              <Typography noWrap>{message}</Typography>
+            </Grid>
+          </Grid>
+        </Paper>
+        <Paper className={classes.paper}>
+          <Grid container wrap="nowrap">
+            <Grid item>
+              <Avatar>W</Avatar>
+            </Grid>
+            <Grid item xs>
+              <Typography noWrap>{message}</Typography>
+            </Grid>
+          </Grid>
+        </Paper>
+        <Paper className={classes.paper}>
+          <Grid container wrap="nowrap">
+            <Grid item>
+              <Avatar>W</Avatar>
+            </Grid>
+            <Grid item xs>
+              <Typography>{message}</Typography>
+            </Grid>
+          </Grid>
+        </Paper>
+      </div>
+    </div>
+  );
+}
+
+AutoGridNoWrap.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AutoGridNoWrap);
diff --git a/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js b/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js
new file mode 100644
index 0000000..89de6fc
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { red, green, indigo as blue } from '@material-ui/core/colors';
+import { Typography } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    padding: theme.spacing(1),
+    '& h3': {
+      color: theme.palette.common.white,
+    },
+    [theme.breakpoints.down('sm')]: {
+      backgroundColor: red[500],
+    },
+    [theme.breakpoints.up('md')]: {
+      backgroundColor: blue[500],
+    },
+    [theme.breakpoints.up('lg')]: {
+      backgroundColor: green[500],
+    },
+  },
+});
+
+function MediaQuery(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <Typography variant="subtitle1">down(sm): red</Typography>
+      <Typography variant="subtitle1">up(md): blue</Typography>
+      <Typography variant="subtitle1">up(lg): green</Typography>
+    </div>
+  );
+}
+
+MediaQuery.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(MediaQuery);
diff --git a/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js b/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js
new file mode 100644
index 0000000..3f1c10c
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js
@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MenuIcon from '@material-ui/icons/Menu';
+import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    height: 430,
+    zIndex: 1,
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  appBarShift: {
+    marginLeft: 0,
+    width: '100%',
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    [theme.breakpoints.up('md')]: {
+      marginLeft: drawerWidth,
+      width: `calc(100% - ${drawerWidth}px)`,
+    },
+  },
+  menuButton: {
+    marginLeft: 0,
+    marginRight: 36,
+  },
+  drawerPaper: {
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    [theme.breakpoints.up('md')]: {
+      position: 'relative',
+    },
+  },
+  drawerPaperClose: {
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: 70,
+    [theme.breakpoints.up('sm')]: {
+      width: 70,
+    },
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: '0 8px',
+    ...theme.mixins.toolbar,
+  },
+  content: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing(3),
+  },
+});
+
+class SidebarLayout extends React.Component {
+  state = {
+    open: true,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resize.bind(this));
+    this.resize();
+  }
+
+  resize() {
+    this.setState({ open: window.innerWidth >= 760 });
+  }
+
+  handleDrawerToggle = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { open } = this.state;
+    const drawer = (
+      <div>
+        <div className={classes.toolbar} />
+        <Divider />
+        <List>{mailFolderListItems}</List>
+        <Divider />
+        <List>{otherMailFolderListItems}</List>
+      </div>
+    );
+    return (
+      <div className={classes.root}>
+        <AppBar
+          position="absolute"
+          className={classNames(classes.appBar, open && classes.appBarShift)}
+        >
+          <Toolbar>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={this.handleDrawerToggle}
+              className={classNames(classes.menuButton)}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" color="inherit" noWrap>
+              App Layout with Sidebar
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Hidden mdUp>
+          <Drawer
+            variant="temporary"
+            anchor="left"
+            open={open}
+            onClose={this.handleDrawerToggle}
+            classes={{
+              paper: classes.drawerPaper,
+            }}
+            ModalProps={{
+              keepMounted: true, // Better open performance on mobile.
+            }}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+        <Hidden smDown implementation="css">
+          <Drawer
+            variant="permanent"
+            classes={{
+              paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose),
+            }}
+            open={open}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+        <main className={classes.content}>
+          <div className={classes.toolbar} />
+          <Typography noWrap>Your App Content</Typography>
+        </main>
+      </div>
+    );
+  }
+}
+
+SidebarLayout.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(SidebarLayout);
diff --git a/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js b/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js
new file mode 100644
index 0000000..85c5229
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js
@@ -0,0 +1,175 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MenuIcon from '@material-ui/icons/Menu';
+import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    height: 430,
+    zIndex: 1,
+    overflow: 'hidden',
+    position: 'relative',
+    display: 'flex',
+  },
+  flexwrap: {
+    display: 'flex'
+  },
+  flex: {
+    flex: 1
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  appBarShift: {
+    marginRight: 0,
+    width: '100%',
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    [theme.breakpoints.up('md')]: {
+      marginRight: drawerWidth,
+      width: `calc(100% - ${drawerWidth}px)`,
+    },
+  },
+  menuButton: {
+    marginRight: 0,
+    marginLeft: 36,
+  },
+  drawerPaper: {
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    [theme.breakpoints.up('md')]: {
+      position: 'relative',
+    },
+  },
+  drawerPaperClose: {
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: 70,
+    [theme.breakpoints.up('sm')]: {
+      width: 70,
+    },
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: '0 8px',
+    ...theme.mixins.toolbar,
+  },
+  content: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing(3),
+  },
+});
+
+class SidebarLayoutRight extends React.Component {
+  state = {
+    open: true,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resize.bind(this));
+    this.resize();
+  }
+
+  resize() {
+    this.setState({ open: window.innerWidth >= 760 });
+  }
+
+  handleDrawerToggle = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { open } = this.state;
+    const drawer = (
+      <div>
+        <div className={classes.toolbar} />
+        <Divider />
+        <List>{mailFolderListItems}</List>
+        <Divider />
+        <List>{otherMailFolderListItems}</List>
+      </div>
+    );
+    return (
+      <div className={classes.root}>
+        <AppBar
+          position="absolute"
+          className={classNames(classes.appBar, open && classes.appBarShift)}
+        >
+          <Toolbar className={classes.flexwrap}>
+            <Typography variant="h6" color="inherit" className={classes.flex} noWrap>
+              App Layout with Right Sidebar
+            </Typography>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={this.handleDrawerToggle}
+              className={classNames(classes.menuButton)}
+            >
+              <MenuIcon />
+            </IconButton>
+          </Toolbar>
+        </AppBar>
+        <main className={classes.content}>
+          <div className={classes.toolbar} />
+          <Typography noWrap>Your App Content</Typography>
+        </main>
+        <Hidden mdUp>
+          <Drawer
+            variant="temporary"
+            anchor="right"
+            open={open}
+            onClose={this.handleDrawerToggle}
+            classes={{
+              paper: classes.drawerPaper,
+            }}
+            ModalProps={{
+              keepMounted: true, // Better open performance on mobile.
+            }}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+        <Hidden smDown implementation="css">
+          <Drawer
+            variant="permanent"
+            classes={{
+              paper: classNames(classes.drawerPaper, !open && classes.drawerPaperClose),
+            }}
+            open={open}
+          >
+            {drawer}
+          </Drawer>
+        </Hidden>
+      </div>
+    );
+  }
+}
+
+SidebarLayoutRight.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(SidebarLayoutRight);
diff --git a/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js b/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js
new file mode 100644
index 0000000..2aab0e3
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withWidth, Typography } from '@material-ui/core';
+
+const components = {
+  sm: 'em',
+  md: 'u',
+  lg: 'del',
+};
+
+function WithWidth(props) {
+  const { width } = props;
+  const Component = components[width] || 'span';
+
+  return (
+    <Typography variant="subtitle1">
+      <Component>{`Current width: ${width}`}</Component>
+    </Typography>
+  );
+}
+
+WithWidth.propTypes = {
+  width: PropTypes.string.isRequired,
+};
+
+export default withWidth()(WithWidth);
diff --git a/front/odiparpack/app/containers/Layouts/demos/breakpoint.md b/front/odiparpack/app/containers/Layouts/demos/breakpoint.md
new file mode 100644
index 0000000..e5037ec
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/breakpoint.md
@@ -0,0 +1,6 @@
+
+ | innerWidth  |xs | sm  | md  | lg  | xl  |
+ |--------|-----|----|----|----|----|----|
+ | width  |   xs   |   sm   |   md   |   lg   |   xl |
+ | smUp   |   show | hide  |
+ | mdDown |        |       |     hide | show |
diff --git a/front/odiparpack/app/containers/Layouts/demos/index.js b/front/odiparpack/app/containers/Layouts/demos/index.js
new file mode 100644
index 0000000..70f3804
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/index.js
@@ -0,0 +1,13 @@
+export AutoLayout from './AutoLayout';
+export Centered from './Centered';
+export FullWidth from './FullWidth';
+export GridLayout from './GridLayout';
+export Interactive from './Interactive';
+export Limitation from './Limitation';
+export SidebarLayout from './SidebarLayout';
+export SidebarLayoutRight from './SidebarLayoutRight';
+export FullHeader from './FullHeader';
+export Breakpoint from './Breakpoint';
+export BreakpointGrid from './BreakpointGrid';
+export MediaQueries from './MediaQueries';
+export WIthWIdth from './WIthWIdth';
diff --git a/front/odiparpack/app/containers/Layouts/demos/menuData.js b/front/odiparpack/app/containers/Layouts/demos/menuData.js
new file mode 100644
index 0000000..cd2d653
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/menuData.js
@@ -0,0 +1,64 @@
+// This file is shared across the demos.
+
+import React from 'react';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import DraftsIcon from '@material-ui/icons/Drafts';
+import StarIcon from '@material-ui/icons/Star';
+import SendIcon from '@material-ui/icons/Send';
+import MailIcon from '@material-ui/icons/Mail';
+import DeleteIcon from '@material-ui/icons/Delete';
+import ReportIcon from '@material-ui/icons/Report';
+
+import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
+
+export const mailFolderListItems = (
+  <div>
+    <ListItem button>
+      <ListItemIcon>
+        <InboxIcon />
+      </ListItemIcon>
+      <ListItemText primary="Inbox" />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <StarIcon />
+      </ListItemIcon>
+      <ListItemText primary="Starred" />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <SendIcon />
+      </ListItemIcon>
+      <ListItemText primary="Send mail" />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <DraftsIcon />
+      </ListItemIcon>
+      <ListItemText primary="Drafts" />
+    </ListItem>
+  </div>
+);
+
+export const otherMailFolderListItems = (
+  <div>
+    <ListItem button>
+      <ListItemIcon>
+        <MailIcon />
+      </ListItemIcon>
+      <ListItemText primary="All mail" />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <DeleteIcon />
+      </ListItemIcon>
+      <ListItemText primary="Trash" />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <ReportIcon />
+      </ListItemIcon>
+      <ListItemText primary="Spam" />
+    </ListItem>
+  </div>
+);