Topic: Admin react pro Sidebar left space

gllermaly free asked 4 years ago


Hello , I noticed in certain window size there is a big space at the left and the bar is not there. Screenshot : 

Big size


Small size

It makes no sense for me that in small window size there is no bar and half of screen not being used.


It is possible to fix this? 

My second questions is if can I set the sidebar always open in big size (with option to the user to collapse if he wants) and hide in small sizes?


Regards


rgrashel free answered 3 years ago


@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.


Anna Morawska staff commented 3 years ago

Hi Rick, thank you for sharing your solution with us - we will implement that in the next version of the Admin dashboard project. Best, Ania


Jakub Strebeyko staff answered 4 years ago


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



gllermaly free answered 4 years ago


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?


Jakub Strebeyko staff answered 4 years ago


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



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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.1
  • Device: PC
  • Browser: Chrome
  • OS: Ubuntu 16
  • Provided sample code: No
  • Provided link: No