Resize toggles MDBSideNav

web
mobile

Topic: Resize toggles MDBSideNav

Roman Mzh pro premium asked 2 months 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 premium answered 2 months 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 pro premium commented 2 months 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 pro premium commented 2 months 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 premium commented 2 months 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


Jakub Chmura staff premium answered 2 months 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 pro premium commented 2 months ago

Hi @.

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


Jakub Chmura staff premium answered 2 months 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: React
  • MDB Version: 4.25.4
  • Device: pc
  • Browser: chrome
  • OS: ubuntu 18.04
  • Provided sample code: No
  • Provided link: Yes
Tags