Topic: React Sidebar - How to make it open by default and without dark overlay?
tomasz1253
pro asked 7 years ago
Anna Morawska
staff answered 7 years ago
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;
tomasz1253 pro commented 7 years ago
Adding hidden and fixed helped! :) Thank you very much :)FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.7.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: Yes