MDBSideNav auto hides even with isOpen forced to true

Topic: MDBSideNav auto hides even with isOpen forced to true

Jean-Philippe Steinmetz free asked 2 years 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>

Add comment

Krzysztof Wilk staff answered 2 years ago

0 0 Best answer

<p>To achieve that I think you can use these two sections in our documentation:
<a href="https://mdbootstrap.com/docs/b5/react/navigation/sidenav/#section-sidenav-positioning" target="_blank">https://mdbootstrap.com/docs/b5/react/navigation/sidenav/#section-sidenav-positioning</a>
<a href="https://mdbootstrap.com/docs/b5/react/navigation/sidenav/#section-sidenav-slim" target="_blank">https://mdbootstrap.com/docs/b5/react/navigation/sidenav/#section-sidenav-slim</a></p>

<p>By using the <code>mode</code> 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. </p>

<p>To change slim behavior you can use the state as it is shown in the documentation. Just add an <code>onClick</code> 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 <code>addEventListener</code> approach. Then do the same thing to your sidenav, but change your mode to false :)</p>

<p>Keep coding!</p>

Please insert min. 20 characters.

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 2 years 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 2 years 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 2 years 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 2 years 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.

<p>Sure. First, all the code is written as React classes, not functions.</p>

<p>In my MainLayout class I have the following.</p>

<pre class="prettyprint"><code> <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>
</code></pre>

<p>In the Sidebar class I have.</p>

<pre class="prettyprint"><code>  <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>
</code></pre>

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

Please insert min. 15 characters.

Add comment

Krzysztof Wilk staff answered 2 years ago

1 0 Best answer

Please insert min. 20 characters.

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 2 years ago

It works! Thank you!

Krzysztof Wilk staff commented 2 years ago

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

Add comment

Jean-Philippe Steinmetz free answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Krzysztof Wilk staff answered 2 years ago

0 0 Best answer

Hi!

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

Keep coding!

Jean-Philippe Steinmetz free commented 2 years ago

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

Jean-Philippe Steinmetz free commented 2 years ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

Jean-Philippe Steinmetz

55Support score
5Questions 3Answers 0Snippets