Topic: React Sidebar - How to make it open by default and without dark overlay?

tomasz1253 pro asked 4 years ago


Hi! I want to build SideNav with React MDBootstrap PRO.  For example something like on https://mdbootstrap.com/. Example provided on https://mdbootstrap.com/react/advanced/sidenav/#usage has dark overlay and is not opened by default. How to make it work like on https://mdbootstrap.com/? Or at least opened by default without dark overlay?

Anna Morawska staff answered 4 years ago


Hey there, you can add fixed prop to Sidenav component, and add custom classes in className attrubutre. Please try this:
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 4 years ago

Adding hidden and fixed helped! :) Thank you very much :)


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • 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