{"id":283,"date":"2019-10-04T05:48:05","date_gmt":"2019-10-04T05:48:05","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/reactify\/?page_id=283"},"modified":"2019-10-10T08:21:16","modified_gmt":"2019-10-10T08:21:16","slug":"drawers","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/reactify\/drawers\/","title":{"rendered":"Drawers"},"content":{"rendered":"\n

You can add the component on any page in the template. You need to follow the steps given below: \u200c<\/p>\n\n\n\n

Step 1:<\/strong> You need to create a component for drawer list styling, a state and function to handle it’s event. Also you need to add the code of drawer in the page where you want to add the component. Please check the code snippet given below, we have added the drawer in the Ecommerce Dashboard:<\/p>\n\n\n\n

\/**
 * Ecommerce Dashboard
 *\/
 
import React, { Component } from 'react'
...
 
const styles = {
   list: {
      width: 250,
   },
   listFull: {
      width: 'auto',
   },
};
 
class EcommerceDashboard extends Component {
 
    \/\/ Drawer State
    state = {
      left: false,
   };
 
   \/\/ Drawer Function
   toggleDrawer = (side, open) => () => {
      this.setState({
         [side]: open,
      });
   };
   render() {
      const { match } = this.props;
      const { classes } = this.props;
      const sideList = (
         <div className={classes.list}>
            <List>
               <ListItem button>
                  <ListItemIcon>
                     <i className=\"zmdi zmdi-inbox zmdi-hc-lg\"><\/i>
                  <\/ListItemIcon>
                  <ListItemText primary=\"Inbox\" \/>
               <\/ListItem>
               <ListItem button>
                  <ListItemIcon>
                      <i className=\"zmdi zmdi-star zmdi-hc-lg\"><\/i>
                  <\/ListItemIcon>
                  <ListItemText primary=\"Starred\" \/>
               <\/ListItem>
             <\/List>
           <\/div>
         );
     return (
         <div className=\"ecom-dashboard-wrapper\">
            ...
           <div className=\"row\">
              <div className=\"col-sm-6 col-md-4 mb-30\">
                \/\/ Drawer Code
                <div>
                   <Button color=\"primary\" className=\"text-white mr-10 mb-10\" variant=\"contained\" onClick={this.toggleDrawer('left', true)}>Open Left<\/Button> 
                   <Drawer open={this.state.left} onClose={this.toggleDrawer('left', false)}>
                       <div tabIndex={0} role=\"button\" onClick={this.toggleDrawer('left', false)}
                        onKeyDown={this.toggleDrawer('left', false)} >
                           {sideList}
                       <\/div>
                   <\/Drawer> 
                <\/div>
              ...
   
\/\/ Initialise with style 
export default withStyles(styles)( EcommerceDashboard);<\/pre>\n\n\n\n
Step 2:<\/strong> Now Import the component from its parent library.<\/p>\n\n\n\n
import { withStyles } from '@material-ui\/core\/styles';
import Drawer from '@material-ui\/core\/Drawer';
import Button from '@material-ui\/core\/Button';
import List from '@material-ui\/core\/List';
import ListItem from '@material-ui\/core\/ListItem';
import ListItemIcon from '@material-ui\/core\/ListItemIcon';
import ListItemText from '@material-ui\/core\/ListItemText';<\/pre>\n\n\n\n
We have given you an example of adding a temporary drawer on the Ecommerce Dashboard.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
You can check some other layouts of drawer below. For adding any of the below layout in the template, please check their relative code in the src->routes->components->drawers->component<\/code> folder.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n    1    <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
You can add the component on any page in the template. You need to follow the steps given below: \u200c Step 1: You need to create a component for drawer list styling, a state and function to handle it’s event. Also you need to add the code of drawer in the page where you want […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":25,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/283"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/comments?post=283"}],"version-history":[{"count":2,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/283\/revisions"}],"predecessor-version":[{"id":490,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/283\/revisions\/490"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/media?parent=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}