la mejor barra de navegación lateral en el ejemplo de código de react js

Al fin luego de tanto trabajar pudimos hallar la respuesta de esta duda que tantos usuarios de este espacio han tenido. Si tienes algún detalle que aportar no dudes en compartir tu comentario.

Ejemplo: barra de navegación en el lado izquierdo en reaccionar

importReactfrom'react';importMDBIcon,MDBSideNavCat,MDBSideNavNav,MDBSideNav,MDBSideNavLink,MDBContainer,MDBRow,MDBBtnfrom'mdbreact';importBrowserRouterasRouterfrom'react-router-dom';classSideNavPageextendsReact.Component
  state =
    isOpen:falsehandleToggle=()=>this.setState(
      isOpen:!this.state.isOpen);;render()const isOpen =this.state;return(<Router><MDBContainer><MDBRow><MDBBtn onClick=this.handleToggle><MDBIcon icon="bars" size="5x"/></MDBBtn></MDBRow><MDBSideNav
            logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
            hidden
            triggerOpening=isOpen
            breakWidth=1300
            className="deep-purple darken-4"><li><ul className="social"><li><a href="#!"><MDBIcon fab icon="facebook-f"/></a></li><li><a href="#!"><MDBIcon fab icon="pinterest"/></a></li><li><a href="#!"><MDBIcon fab icon="google-plus-g"/></a></li><li><a href="#!"><MDBIcon fab icon="twitter"/></a></li></ul></li><MDBSideNavNav><MDBSideNavCat
                name="Submit blog"
                id="submit-blog"
                icon="chevron-right"><MDBSideNavLink>Submit listing</MDBSideNavLink><MDBSideNavLink>Registration form</MDBSideNavLink></MDBSideNavCat><MDBSideNavCat
                name="Instruction"
                id="instruction"
                iconRegular
                icon="hand-pointer"
                href="#"><MDBSideNavLink>For bloggers</MDBSideNavLink><MDBSideNavLink>For authors</MDBSideNavLink></MDBSideNavCat><MDBSideNavCat name="About" id="about" icon="eye"><MDBSideNavLink>Instruction</MDBSideNavLink><MDBSideNavLink>Monthly meetings</MDBSideNavLink></MDBSideNavCat><MDBSideNavCat name="Contact me" id="contact-me" iconRegular icon="envelope"><MDBSideNavLink>FAQ</MDBSideNavLink><MDBSideNavLink>Write a message</MDBSideNavLink></MDBSideNavCat></MDBSideNavNav></MDBSideNav></MDBContainer></Router>);exportdefaultSideNavPage;

Comentarios y valoraciones

---

---

Utiliza Nuestro Buscador