MDBSideNav with slim option, by default Sidebar should be op

Hi @StormX,

Yes, the sidebar can be open by default, you just need to change state that controls toggling the sidebar.

This is an example:

import React from 'react';
import {
  MDBIcon,
  MDBSideNavCat,
  MDBSideNavNav,
  MDBSideNav,
  MDBSideNavLink,
  MDBContainer,
  MDBRow,
  MDBBtn
} from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

    class SideNavPage extends React.Component {
      state = {
        isOpen: true
      };

      handleToggle = () => {
        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>
        );
      }
    }

    export default SideNavPage;

Best, Kuba

Hi @StormX,

You're right. I send you the wrong example I'm sorry about that. I've tested the right one but I see it's a bug in our code. We try to fix it as soon as possible.

Best, Kuba

Hi Jacob I am trying to do the same thing as this post. Eg have sidebar open by default and have not had any luck doing this. Today I have updated MDB so theoretically have the latest release. May 26

So as there is no documentation in the hamburger (left side) What are the steps to get this sidebar to start open please.

The one. I am using is the fixed top nav bar and hidden side nav bar

Thanks Mark

Blockquote class App extends React.Component { constructor(props) { super(props); this.state = { toggleStateA: false, }; }

handleToggleClickA = () => { this.setState({ toggleStateA: !this.state.toggleStateA, }); };

render() {

Blockquote Just a refresh of the code on this page. THanks Mark

Blockquote import React from "react"; import { BrowserRouter as Router } from "react-router-dom"; import { MDBInput, MDBNavbar, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBIcon, MDBSideNavItem, MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBContainer } from "mdbreact";

class DoubleNavigationPage extends React.Component { constructor(props) { super(props); this.state = { toggleStateA: false }; }

handleToggleClickA = () => { this.setState({ toggleStateA: !this.state.toggleStateA }); };

render() { const mainStyle = { paddingTop: "5rem" };

const specialCaseNavbarStyles = {
  WebkitBoxOrient: "horizontal",
  flexDirection: "row"
};

return (
  <Router>
    <div className="mdb-skin">
      <MDBSideNav
        logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
        triggerOpening={this.state.toggleStateA}
        bg="https://mdbootstrap.com/img/Photos/Others/sidenav4.jpg"
        mask="strong"
        hidden
      >
        <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>
        <MDBInput
          type="text"
          hint="Search"
          style={{
            color: "#fff",
            padding: "0 10px 8px 30px",
            boxSizing: "border-box"
          }}
        />
        <MDBSideNavNav>
          <MDBSideNavCat
            name="Submit blog"
            id="submit-blog-cat"
            icon="chevron-right"
          >
            <MDBSideNavItem>Submit listing</MDBSideNavItem>
            <MDBSideNavItem>Registration form</MDBSideNavItem>
          </MDBSideNavCat>
          <MDBSideNavCat
            iconRegular
            name="Instruction"
            id="instruction-cat"
            icon="hand-pointer"
          >
            <MDBSideNavItem>For bloggers</MDBSideNavItem>
            <MDBSideNavItem>For authors</MDBSideNavItem>
          </MDBSideNavCat>
          <MDBSideNavCat name="About" id="about-cat" icon="eye">
            <MDBSideNavItem>Instruction</MDBSideNavItem>
            <MDBSideNavItem>Monthly meetings</MDBSideNavItem>
          </MDBSideNavCat>
          <MDBSideNavCat
            name="Contact me"
            id="contact-me-cat"
            icon="envelope"
          >
            <MDBSideNavItem>FAQ</MDBSideNavItem>
            <MDBSideNavItem>Write a message</MDBSideNavItem>
          </MDBSideNavCat>
        </MDBSideNavNav>
      </MDBSideNav>
      <MDBNavbar double expand="md" fixed="top" scrolling>
        <MDBNavbarNav left>
          <MDBNavItem>
            <div
              onClick={this.handleToggleClickA}
              key="sideNavToggleA"
              style={{
                lineHeight: "32px",
                marginRight: "1em",
                verticalAlign: "middle"
              }}
            >
              <MDBIcon icon="bars" color="white" size="2x" />
            </div>
          </MDBNavItem>
          <MDBNavItem className="d-none d-md-inline" style={{ paddingTop: 5 }}>
            Material Design for Bootstrap
          </MDBNavItem>
        </MDBNavbarNav>
        <MDBNavbarNav right style={specialCaseNavbarStyles}>
          <MDBNavItem active>
            <MDBNavLink to="#!">
              <MDBIcon icon="envelope" className="d-inline-inline" />{" "}
              <div className="d-none d-md-inline">Contact</div>
            </MDBNavLink>
          </MDBNavItem>
          <MDBNavItem>
            <MDBNavLink to="#!">
              <MDBIcon far icon="comments" className="d-inline-inline" />{" "}
              <div className="d-none d-md-inline">Support</div>
            </MDBNavLink>
          </MDBNavItem>
          <MDBNavItem>
            <MDBNavLink to="#!">
              <MDBIcon icon="user" className="d-inline-inline" />{" "}
              <div className="d-none d-md-inline">Account</div>
            </MDBNavLink>
          </MDBNavItem>
          <MDBNavItem>
            <MDBDropdown>
              <MDBDropdownToggle nav caret>
                <div className="d-none d-md-inline">Dropdown</div>
              </MDBDropdownToggle>
              <MDBDropdownMenu right>
                <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
              </MDBDropdownMenu>
            </MDBDropdown>
          </MDBNavItem>
        </MDBNavbarNav>
      </MDBNavbar>
      <main style={mainStyle}>
        <MDBContainer fluid style={{ height: 2000 }} className="mt-5">
          <h2>Advanced Double Navigation with hidden SideNav & fixed Navbar:</h2>
          <br />
          <h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.</h5>
          <h5>2. Fixed navbar. It will always stay visible on the top, even when you scroll down.</h5>
        </MDBContainer>
      </main>
    </div>
  </Router>
);

} }

export default DoubleNavigationPage;

Blockquote

Hi Piotr, Have got this working...to point It works fine now on full view laptop. But on something like Phone or Pad the side bar does not start out by default. Wondering if you maybe had an answer to this?

Cheers Mark Code below to what is working

enter code here

class App extends React.Component { constructor(props) { super(props); this.state = { toggleStateA: true, }; }

handleToggleClickA = () => { this.setState({ toggleStateA: !this.state.toggleStateA, }); };

state = { isOpen: !true }; render() { const { isOpen } = this.state; const mainStyle = { paddingTop: "2rem", };

return (
  <Router>
    <div className=" grey lighten-4 ">
      <MDBSideNav
        logo={logo}
        href="/"
        triggerOpening={this.state.toggleStateA}
        bg="./images/sidenav3.jpg"
        mask="strong"
        hidden

Blockquote