import React from 'react';

import { BrowserRouter as Router } from 'react-router-dom';

import { Fa, SideNavCat, SideNavNav, SideNav, SideNavLink, Container, Row } from 'mdbreact';

class SideNavPage extends React.Component {

constructor(props) {

super(props);

this.state={

isLeftOpen:false

};

}

handleToggleClickA= () => {

this.setState({

isLeftOpen:!this.state.isLeftOpen

})

}

render() {

return (

<Router>

<Container>

<SideNavlogo="https://mdbootstrap.com/img/logo/mdb-transparent.png"hiddenfixed

breakWidth={1300}className="blue lighten-4">

<li>

<ulclassName="social">

<li><ahref="#!"><Faicon="facebook"></Fa></a></li>

<li><ahref="#!"><Faicon="pinterest"></Fa></a></li>

<li><ahref="#!"><Faicon="google-plus"></Fa></a></li>

<li><ahref="#!"><Faicon="twitter"></Fa></a></li>

</ul>

</li>

<SideNavNav>

<SideNavCatid="1"name="Submit blog"icon="chevron-right">

<SideNavLink>Submit listing</SideNavLink>

<SideNavLink>Registration form</SideNavLink>

</SideNavCat>

<SideNavCatid="2"name="Instruction"icon="hand-pointer-o"href="#">

<SideNavLink>For bloggers</SideNavLink>

<SideNavLink>For authors</SideNavLink>

</SideNavCat>

<SideNavCatid="3"name="About"icon="eye">

<SideNavLink>Instruction</SideNavLink>

<SideNavLink>Monthly meetings</SideNavLink>

</SideNavCat>

<SideNavCatid="4"name="Contact me"icon="envelope-o">

<SideNavLink>FAQ</SideNavLink>

<SideNavLink>Write a message</SideNavLink>

</SideNavCat>

</SideNavNav>

</SideNav>

</Container>

</Router>

);

}

}

export default SideNavPage;