Topic: Error in the behavior of the "Side navigation with a mode transition" component
I'm encountering the following error in the behavior of the "Side navigation with a mode transition" component (second "full-screen examples" of the "sidenav" components page): - the menu is not reappearing when we increase the screen size until it is large enough (after reducing the screen size and making the menu appear/disappear a few times).
The component behaves perfectly in the "full screen demo" of its page (https://mdbootstrap.com/docs/standard/navigation/sidenav/). But this does not happen when I simply paste the same html/css/js code in the basic "index.html" of the "MDB5-STANDARD-UI-KIT-Pro-Advanced-7.3.2" version, recommended for component testing, and run it in Edge through VSCode with Live Server.
Can anyone help me? Thanks in advance!
Below is an image of the screen with the error and the complete code.
<!DOCTYPE html>
Material Design for Bootstrap
<!-- Custom styles -->
<style>
.page-intro {
background-color: white;
width: 100vw;
min-height: 100vh;
}
img {
max-width: 80%;
}
.mdb-page-content {
padding-left: 240px;
transition: padding 0.3s linear;
}
#toggler {
display: none;
}
@media (max-width: 660px) {
.mdb-page-content {
padding-left: 0px;
}
#toggler {
display: unset;
}
.mask img {
width: 100%;
}
.sidenav[data-mdb-hidden='false'] {
transform: translateX(-100%);
}
}
</style>
<h4>
<span style="white-space: nowrap;">Ann Smith</span>
</h4>
<p>ann_s@mdbootstrap.com</p>
</div>
<hr class="mb-0" />
Inbox Outbox Contacts Family Friends Work Drafts Favourites Starred Trash Spam
Resize to change the modeCategories
<ul class="sidenav-collapse"> <li class="sidenav-item"> <a class="sidenav-link">Social</a> </li> <li class="sidenav-item"> <a class="sidenav-link">Notifications</a> </li> <li class="sidenav-item"> <a class="sidenav-link">Recent</a> </li> <li class="sidenav-item"> <a class="sidenav-link">Uploads</a> </li> <li class="sidenav-item"> <a class="sidenav-link">Backups</a> </li> <li class="sidenav-item"> <a class="sidenav-link">Offers</a> </li> </ul> </li> <li class="sidenav-item"> <a class="sidenav-link"> <i class="fas fa-sticky-note fa-fw me-3"></i>Notes</a </li> <li class="sidenav-item"> <a class="sidenav-link"> <i class="fas fa-user-circle fa-fw me-3"></i>Personal</a </li> <li class="sidenav-item"> <a class="sidenav-link"> <i class="fas fa-ellipsis-h fa-fw me-3"></i>More</a </li> </ul> <hr class="m-0" /> <ul class="sidenav-menu"> <li class="sidenav-item"> <a class="sidenav-link"> <i class="fas fa-cogs fa-fw me-3"></i>Settings</a </li> <li class="sidenav-item"> <a class="sidenav-link"> <i class="fas fa-user fa-fw me-3"></i>Profile</a </li> <li class="sidenav-item"> <a class="sidenav-link"> <i class="fas fa-shield-alt fa-fw me-3"></i>Privacy</a </li> <li class="sidenav-item"> <a class="sidenav-link"> <i class="fas fa-user-astronaut fa-fw me-3"></i>Log out</a </li> </ul>
MDBootstrap.com
.webp)
<!-- End your project here-->
// Initialization for ES Users import { Sidenav, initMDB } from "mdb-ui-kit";
initMDB({ Sidenav });
const sidenav = document.getElementById('full-screen-example'); const sidenavInstance = Sidenav.getInstance(sidenav);
let innerWidth = null;
const setMode = (e) => { // Check necessary for Android devices if (window.innerWidth === innerWidth) { return; }
innerWidth = window.innerWidth;
if (window.innerWidth < 660) { sidenavInstance.changeMode('over'); sidenavInstance.hide(); } else { sidenavInstance.changeMode('side'); sidenavInstance.show(); } };
setMode();
// Event listeners window.addEventListener('resize', setMode);
Are you using ES imports? If you are not toggle to UMD option before copying the example JS code. Alternatively copy from this snippet: https://mdbootstrap.com/snippets/standard/kpienkowska/6252673
Euclydes pro premium priority commented 3 months ago
My problem was exactly this: I had copied the code from the ES option, now I switched to the UMD option and everything works correctly (as well as the code from the link you sent me). Thank you very much!
However, I noticed that the ES version of this component is not working (that is: component code in the ES version with the file "mdb.es.min.js"). Is that right, not all components work in the ES version? Should I then use UMD?
Kamila Pieńkowska staff commented 3 months ago
No. Every component is suppose to work with es modules.
Did you get any console errors when you used es modules?
Euclydes pro premium priority commented 3 months ago
What's not working is that the menu isn't appearing when we click on the button whose "id" is "toggler".
I did the following to test it: - I downloaded and unzipped the file "MDB5-STANDARD-UI-KIT-Pro-Advanced-7.3.2.zip" - I opened the "index.html" file from this package and changed the imported javascript package from "js/mdb.umd.min.js" to "js/mdb.es.min.js" - I pasted the ES version of the html/css/js code of the "Side navigation with a mode transition" component from the page "https://mdbootstrap.com/docs/standard/navigation/sidenav/" into the "index.html" file - I opened the "index.html" in Edge through VSCode with Live Server.
Kamila Pieńkowska staff commented 3 months ago
This is the import statement: import { Sidenav, initMDB } from "/js/mdb.es.min.js";
You should completely remove the script tag that imported MDB package. You are doing double import.
Euclydes pro premium priority commented 3 months ago
It worked with "./js/mdb.es.min.js" (in addition to changing the "type" attribute of the "script" tag from "text/javascript" to "module"), thank you very much!
Since I have no experience with javascript (I develop my project with Django) it took me a long time to get it working, I hope I can move forward now, thanks again!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.2
- Device: Desktop
- Browser: Edge
- OS: Windows 11
- Provided sample code: No
- Provided link: Yes