Topic: MDBSideNav auto hides even with isOpen forced to true

Jean-Philippe Steinmetz free asked 1 year ago


Expected behavior

The MDBSideNav stays open at all times.

Actual behavior

When clicking "outside" of the navbar, it auto hides.

Resources (screenshots, code snippets etc.)

<MDBSideNav
            absolute
            fixed
            isOpen={true}
            mode="side"
            closeOnEsc={false}
        >
            {navItems}
        </MDBSideNav>

Krzysztof Wilk staff answered 1 year ago


Hi!

To achieve that I think you can use these two sections in our documentation: https://mdbootstrap.com/docs/b5/react/navigation/sidenav/#section-sidenav-positioning https://mdbootstrap.com/docs/b5/react/navigation/sidenav/#section-sidenav-slim

By using the mode property you can specify when you want to make the sidenav overlying the content or pushing it. The second approach is to add a little margin on the left side of the content (just to adjust the spacing between the page content and sidenav in the slim mode) and set the mode to overlay.

To change slim behavior you can use the state as it is shown in the documentation. Just add an onClick synthetic event to the container with your content that will change your slim mode to true (and possibly add a check if e.target node isn't your sidenav). You can also use the addEventListener approach. Then do the same thing to your sidenav, but change your mode to false :)

Keep coding!


Jean-Philippe Steinmetz free commented 1 year ago

I've implemented most of this but it's still not working. When the page loads it'll render the slim navbar correctly and then when i interact with the content the sidenav completely hides itself again. It doesn't stay as it should. If I use the constant keyword as noted above then the content isn't interactable at all.


Jean-Philippe Steinmetz free commented 1 year ago

I noticed from the examples I was missing the getOpenState. When I add this property setter the sidenav does properly stay visible at all times now but the content is again blocked from interaction.


Krzysztof Wilk staff commented 1 year ago

Is it possible to share your code with me? I.e. simple GitHub project or just paste your code below :)


Jean-Philippe Steinmetz free commented 1 year ago

Sure. First, all the code is written as React classes, not functions.

In my MainLayout class I have the following.

 <Sidebar
                contentRef={this.state.content.current}
                isOpen={this.state.sidebarVisible}
                slim={this.state.sidebarSlim}
                getOpenState={(e) => this.setState({...this.state, sidebarVisible: e})}
            />
            <MDBContainer fluid
                onClick={this.handleContentClick}
                ref={this.state.content}
            >
                <Header />
                <section style={{ 'padding-top': '10mm', height: '100vh'}}>
                    {children}
                </section>
                <Footer />
            </MDBContainer>

In the Sidebar class I have.

  <MDBSideNav
            mode="push"
            {...this.props}
        >
            <div className='text-center'>
                <img src={icon} className='sidenav-slim' width='100%' style={{ padding: '2.5mm'}}/>
                <img src={logo} className='sidenav-non-slim' width='100%' style={{ padding: '2.5mm'}}/>
            </div>
            <MDBScrollbar sidenav tag='ul' suppressScrollX style={{ height: '75%' }}>
                {mainNavItems}
            </MDBScrollbar>
            {this.props.children}
            <div className='text-center' style={{ minHeight: '3rem' }}>
                {bottomNavItems}
            </div>
        </MDBSideNav>

In the above, sidebarVisible should always be true and sidebarSlim is intended to be toggled when actively focused on the content container.


Krzysztof Wilk staff answered 1 year ago


Hi!

Try this code:

import React from "react";

import { MDBContainer, MDBSideNav } from "mdb-react-ui-kit";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isSlim: true };
  }

  render() {
    return (
      <>
        <MDBSideNav
          className="test"
          onClick={() => this.setState({ isSlim: false })}
          slim={this.state.isSlim}
          constant
          backdrop={false}
          isOpen={true}
        >
          Sidenav test
        </MDBSideNav>
        <MDBContainer
          style={{ height: "100%" }}
          onClick={() => this.setState({ isSlim: true })}
        >
          Test content
        </MDBContainer>
      </>
    );
  }
}

export default App;

Did you mean it?

Keep coding!


Jean-Philippe Steinmetz free commented 1 year ago

It works! Thank you!


Krzysztof Wilk staff commented 1 year ago

No problem, if you have more questions - feel free to ask :)



I have a new problem. With the constant property the content window is now unusable.

Here's what i'm trying to accomplish. I would like the SideNavBar to always be visible and anchored on the left side of the page. I'd like it to toggle between slim mode and full mode. In slim mode, it would not obstruct any content to the right. In full mode, it can overlay the content to the right to show the full menu. When you click on the content, it would automatically switch to slim mode.

The docs seem to have only basic examples of how this might be accomplished. Are there any more complete examples? I have downloaded mdb-react-admin-pro template but noticed that it doesn't use the Pro the same ui kit (its based on mdbreact, not mdb-react-ui-kit) and has completely different components which aren't compatibe.


Krzysztof Wilk staff answered 1 year ago


Hi!

Add a constant property to this component. It will prevent hiding the sidenav after clicking outside :)

Keep coding!


Jean-Philippe Steinmetz free commented 1 year ago

I tried this and it doesn't appear to work.


Jean-Philippe Steinmetz free commented 1 year ago

Nevermind, apparently I can't type 'constant' correctly. It's working now!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 1.3.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No