1import React from 'react';
2import { MDBIcon, MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBSideNavLink, MDBContainer, MDBRow, MDBBtn } from 'mdbreact';
3import { BrowserRouter as Router } from 'react-router-dom';
4
5class SideNavPage extends React.Component {
6  state = {
7    isOpen: false
8  }
9
10  handleToggle = () => {
11    this.setState({
12      isOpen: !this.state.isOpen
13    });
14  };
15
16  render() {
17    const { isOpen } = this.state;
18    return (
19      <Router>
20        <MDBContainer>
21          <MDBRow>
22            <MDBBtn onClick={this.handleToggle}><MDBIcon icon="bars" size="5x" /></MDBBtn>
23          </MDBRow>
24          <MDBSideNav
25            logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
26            hidden
27            triggerOpening={isOpen}
28            breakWidth={1300}
29            className="deep-purple darken-4"
30          >
31            <li>
32              <ul className="social">
33                <li>
34                  <a href="#!">
35                    <MDBIcon fab icon="facebook-f" />
36                  </a>
37                </li>
38                <li>
39                  <a href="#!">
40                    <MDBIcon fab icon="pinterest" />
41                  </a>
42                </li>
43                <li>
44                  <a href="#!">
45                    <MDBIcon fab icon="google-plus-g" />
46                  </a>
47                </li>
48                <li>
49                  <a href="#!">
50                    <MDBIcon fab icon="twitter" />
51                  </a>
52                </li>
53              </ul>
54            </li>
55            <MDBSideNavNav>
56              <MDBSideNavCat
57                name="Submit blog"
58                id="submit-blog"
59                icon="chevron-right"
60              >
61                <MDBSideNavLink>Submit listing</MDBSideNavLink>
62                <MDBSideNavLink>Registration form</MDBSideNavLink>
63              </MDBSideNavCat>
64              <MDBSideNavCat
65                name="Instruction"
66                id="instruction"
67                iconRegular
68                icon="hand-pointer"
69                href="#"
70              >
71                <MDBSideNavLink>For bloggers</MDBSideNavLink>
72                <MDBSideNavLink>For authors</MDBSideNavLink>
73              </MDBSideNavCat>
74              <MDBSideNavCat name="About" id="about" icon="eye">
75                <MDBSideNavLink>Instruction</MDBSideNavLink>
76                <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
77              </MDBSideNavCat>
78              <MDBSideNavCat name="Contact me" id="contact-me" iconRegular icon="envelope">
79                <MDBSideNavLink>FAQ</MDBSideNavLink>
80                <MDBSideNavLink>Write a message</MDBSideNavLink>
81              </MDBSideNavCat>
82            </MDBSideNavNav>
83          </MDBSideNav>
84        </MDBContainer>
85      </Router>
86    );
87  }
88}
89
90export default SideNavPage;