Topic: Error in the behavior of the "Side navigation with a mode transition" component

Euclydes priority asked 2 weeks ago


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.

The menu does not appear<code>enter code here</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

Categories

    <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

Resize to change the mode
<!-- 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);


Kamila Pieńkowska staff answered 2 weeks ago


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 priority commented 1 week 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 1 week ago

No. Every component is suppose to work with es modules.

Did you get any console errors when you used es modules?


Euclydes priority commented 1 week 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 1 week 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 priority commented 1 week 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!


Euclydes priority answered 2 weeks ago


Code and image seem truncated to me, but I believe they are dispensable



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.3.2
  • Device: Desktop
  • Browser: Edge
  • OS: Windows 11
  • Provided sample code: Yes
  • Provided link: Yes