Hi @Roman Mzh

You need to do something wrong because everything is working fine, check my example below:

import React, { Component } from 'react';
import {
  MDBSideNavCat,
  MDBSideNavNav,
  MDBSideNav,
  MDBSideNavItem,
  MDBContainer,
  MDBIcon,
  MDBBtn
} from 'mdbreact';

class SideNavPage extends Component {
  state = {
    sideNavLeft: false
  };

  sidenavToggle = () => {
    this.setState({
      sideNavLeft: !this.state.sideNavLeft
    });
  };

  render() {
    const { sideNavLeft } = this.state;
    return (
      <MDBContainer>
        <MDBBtn onClick={this.sidenavToggle}>
          <MDBIcon size='lg' icon='bars' />
        </MDBBtn>

        <MDBSideNav triggerOpening={sideNavLeft} hidden>
          <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>
      </MDBContainer>
    );
  }
}

export default SideNavPage;

Please let me know if it won't work with your project.

Best, Kuba

Hi @Roman Mzh,

I apologize for what I said earlier, but when I try to fix it, I realized that this is not a bug and this is the expected behavior. You just need to add a "hidden" prop to prevent sidenav from toggling after crossing the breakpoint.

Example below:

import React from 'react';
import {
  MDBSideNavCat,
  MDBSideNavNav,
  MDBSideNav,
  MDBSideNavItem
} from 'mdbreact';

const App = () => {
  return (
    <MDBSideNav triggerOpening={true} hidden>
      <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>
  );
};

export default App;

Best, Kuba

Hi @Roman Mzh.

I tried to reproduce this bug and I can't achieve your behavior. Can you paste here your code? Maby some of your methods change something and run the toggling of the side nav. If you're just copy-paste code from our page please tell me what you do to achieve this bug step by step.

Best Kuba