Topic: Resize toggles MDBSideNav

Roman Mzh priority asked 4 years ago


Expected behavior

nothing :)

Actual behavior

on 1400+ screen width resizing developer console causes MDBSideNav to show

Resources (screenshots, code snippets etc.)

this example https://mdbootstrap.com/docs/react/navigation/compositions/#double-nav-hidden-sidenav-fixed-navbar


Jakub Chmura staff answered 4 years ago


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


Jakub Chmura staff answered 4 years ago


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


Roman Mzh priority commented 4 years ago

Hi @.

Thx for solution. What about triggerOpening which does not trigger? :)


Jakub Chmura staff answered 4 years ago


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


Roman Mzh priority commented 4 years ago

Hi.

It happens when I open (f12) or resize developer panel. I can send you a video via telegram if needed :)

SideNav behavior is not clear at all: it accepts triggerOpening as prop to open, but to close it uses internal state.


Roman Mzh priority commented 4 years ago

My code is something like this:

const Side = ({ show }) => { console.log(show); return <MDBSideNav triggerOpening={show}> <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>; };

show is always false but when I open developer panel it somehow triggers nav to open.


Jakub Chmura staff commented 4 years ago

Thank you for your feedback!   Now I see that is a bug. I add this task to our bug list and we try to fix it as soon as possible.

Best, Kuba



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: 4.25.4
  • Device: pc
  • Browser: chrome
  • OS: ubuntu 18.04
  • Provided sample code: No
  • Provided link: Yes