MDBSideNav with slim option, by default Sidebar should be op

web
mobile

Topic: MDBSideNav with slim option, by default Sidebar should be open.

StormX pro asked 2 months ago

Expected behavior

I wants to be open that sidebar with using slim option ( by defualt).

Actual behavior

Currently its close when the page loads


Jakub Chmura staff premium answered 2 months ago

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


StormX pro commented 2 months ago

Hi, Thanks for the reply. But it doesn't work with a slim option. Like this, https://mdbootstrap.com/img/logo/mdb-transparent.png' hidden triggerOpening={isOpen} breakWidth={1300} className='deep-purple darken-4' >


Jakub Chmura staff premium answered 2 months ago

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


StormX pro commented 2 months ago

Hi @Jakub, Any progress ?


Jakub Chmura staff premium commented 2 months ago

We are currently working on this bug, I think it should be published at next release (in two weeks). Fix is almost ready but we need to test it.


StormX pro commented 2 months ago

Can you please share the CSS or something, so that I can fix it temporarily? It's a bit urgent for me.


Jakub Chmura staff premium commented 2 months ago

Unfortunately problem can't be solved by CSS because opening and close event is triggering by methods and depends on state management inside of component.


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.23.1
  • Device: laptop
  • Browser: chrom
  • OS: mac
  • Provided sample code: No
  • Provided link: No