@gllermaly, I found this issue a few days ago and fixed it locally. First, I found out that the SideBar component is defaulting to a breakWidth of 1400px. That is the core of the defect, because RoutesWithNavigation.js and SideNavigation.js never communicates the overridden breakWidth to the SideNav.

First, in the RoutesWithNavigation.js file, change the line and add a property called breakWidth. Like this:

SideNavigation breakWidth={this.state.breakWidth} style={{transition: 'all .3s'}} triggerOpening={this.state.sideNavToggled} onLinkClick={()=>this.toggleSideNav()}/>

Then, you need to open SideNavigation.js. Change the line where is declared and add the breakWidth property. Like this:

SideNav logo='/logo.png' triggerOpening={this.props.triggerOpening} style={{ transition: 'padding-left .3s' }} breakWidth={this.props.breakWidth}

At that point, the collapsing should function perfectly. If you want to change the breakWidth, do it in RoutesWithNavigation at the top where the state is initialized. Hope that helps.

-- Rick

P.S. Apologies for the lack of code formatting. I couldn't find a way to do it in this forum editor.

Hi @gllermaly,

The version seems fine, meaning the Admin template is using a version of mdbreact pro 4.8.4, which is the freshest boio for the time being. The code for navigation used there is found under "src/components/RoutesWithNavigation". Is this what you were asking about?

With Best Regards,
Kuba

Hey @Jakub Strebeyko thanks for your answer! .

As you say that version you show works as I want !! how can I get the code of navigation to replicate in my app ?

Im using Admin Dashboard PRO downloaded from my profile page, and fed with Gitlab repo , so probably the version I downloaded (4.8.4) is not the last?

Hi there @gllermaly ,

Huge thanks for reaching out and letting us know.

First of - what is the display width (or any other relevant circumstances) where the sidenav/dynamic padding fails? And what is the version of Admin Template you are using?

In 1.0.1 version both actions, namely the sidenav sliding in & out and the left padding being applied seem to triggering on the hardcoded display's width of 1400 pixels, making it hard for it one to happen and the other not. This certainly is not the case with our React Admin Template Pro demo build, which is an optimized build of the repository content.

By the way, you can fiddle with the window "resize" event listener being applied on line 27 and the dynamic padding on line 215 @ src/components/RoutesWithNavigation.js  

The second question is actually describing the way it currently is working on my end, except users' ability to hide the sidenav when shown, on demand, which is a logic one should be able to recreate with little effort using the examples from the package. Let me know in case of trouble.

With Best Regards,
Kuba