Topic: Toggle side nav not working properly

kamora priority asked 2 months ago


Expected behavior

Side nav should open and close properly when toggling.

Actual behavior

Side nav opens and then closes immediately when toggle once.

Resources (screenshots, code snippets etc.)

Video: https://www.awesomescreenshot.com/video/12825618?key=fc83c67c5a82c82a9cf55822a6b9e5c9

Code

function Sidenav({ isOpen, setIsOpen }) {
    const [_, setMode] = useState('side');
    const [backdrop, setBackdrop] = useState(false);

    return (
        <MDBSideNav
            isOpen={isOpen}
            backdrop={backdrop}
            getOpenState={(e) => {
                setIsOpen(e);
            }}
        >
            <MDBSideNavMenu>
                <MDBSideNavItem>
                    <Link to="/" className="sidenav-link">
                        Tasks
                    </Link>
                </MDBSideNavItem>
        </MDBSideNav>
    );
}


function Navbar({toggleSidenav}) {
    <MDBNavbar id="main-navbar" expand="lg" light fixed="top" bgColor="light">
        <MDBContainer fluid>
            <MDBBtn onClick={() => {toggleSidenav();}}>
                <MDBIcon icon="bars" size="lg" fas />
            </MDBBtn>
    </MDBContainer>
</MDBNavbar>
}

function App() {
     const [isNavOpen, setIsNavOpen] = useState(true);

    function toggleSidenav() {
        setIsNavOpen((prev) => !prev);
    }

    return (
    <>
        <header>
            <Sidenav isOpen={isNavOpen} setIsOpen={setIsNavOpen} />
            <Navbar toggleSidenav={toggleSidenav} />
        </header>
    </>
    );
}

Krzysztof Wilk staff answered 2 months ago


Hi!

Try adding the noRipple property to the button, that should solve the issue. This problem is already fixed in our dev environment but it is waiting for the release :)


kamora priority commented 2 months ago

Wonderful! Fixed the problem! Thank you!



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

  • User: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 5.0.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: Yes