SideNav is not showing


Topic: SideNav is not showing

artur.karczmarczyk asked 4 years ago

Hello, I have a problem with sideNav, when width its resized to <1400px then it acts like on video below:
video

overlay shows multiple times, but the menu does not shows

Initialization:

import PerfectScrollbar from 'perfect-scrollbar';
$(".button-collapse").sideNav({
// closeOnClick: true,
});
let sideNavScrollbar = document.querySelector('.custom-scrollbar');
new PerfectScrollbar(sideNavScrollbar);

Template (from mdbootstrap snippet):

<!-- SideNav slide-out button -->
<a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i class="fas fa-bars"></i></a>

<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav fixed">
<ul class="custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light">
<a href="#"><img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social">
<li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
<li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
<li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>
<li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group md-form mt-0 pt-1 waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i> Submit blog<i
class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Submit listing</a>
</li>
<li><a href="#" class="waves-effect">Registration form</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-hand-pointer-o"></i> Instruction<i
class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">For bloggers</a>
</li>
<li><a href="#" class="waves-effect">For authors</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> About<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Introduction</a>
</li>
<li><a href="#" class="waves-effect">Monthly meetings</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-envelope-o"></i> Contact me<i
class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
</ul>
<div class="sidenav-bg rgba-blue-strong"></div>
</div>
<!--/. Sidebar navigation -->

 


Bartłomiej Malanowski staff pro premium answered 4 years ago

@artur.karczmarczyk I was able to recreate your issue. I've marked this as a bug. However, I've found a workaround that works like a charm

For the first, I've installed Perfect Scrollbar as a dependency. It's important to install exactly the same version as we use in MDB - in the newer versions of PS, the syntax has changed a little bit:

npm install perfect-scrollbar@0.7.1

After then I was able to use it:

const Ps = require('perfect-scrollbar');
const sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);

Marta Szymanska staff pro premium answered 4 years ago

Hi,

this line: "import PerfectScrollbar from 'perfect-scrollbar';" breaks the sidenav. Please, look at my snippet - https://mdbootstrap.com/snippets/jquery/marta-szymanska/254926 and try to use code from there. It should work.

Best,

Marta


Thanks for reply, but i have tried this, effect is the same, but this time Ps is not defined as you can see on the console, which is the reason why we have added the import at all, here is video

Initialization:

// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);

Marta Szymanska staff pro premium answered 4 years ago

Hi,

does this issue exist in the newest 4.6.1 or 4.6.0 version? Have you updated your package?

Best,

Marta


Hi,
SideNav is working correctly after update, but Ps.initialize still causes an error, as result of it scrolling SideNav is not working.
console

// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);

Marta Szymanska staff pro premium answered 4 years ago

Hi,

Have you tried to use a standard MDB package with Gulp instead of Webpack? For now, we don't have a good workaround for webpack. About scrolling navbar, please check this code: https://mdbootstrap.com/snippets/jquery/marta-szymanska/261312.

Best,

Marta


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 jQuery
  • MDB Version: 4.5.15
  • Device: Mobile
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: Yes
  • Provided link: Yes