Error in the behavior of the Side navigation with a mode tra

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

Euclydes priority asked 1 month 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);

Add comment

Kamila Pieńkowska staff answered 1 month ago

0 0 Best answer

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

Please insert min. 15 characters.

Kamila Pieńkowska staff commented 1 month 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 month 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!

Add comment

Euclydes priority answered 1 month ago

0 0 Best answer

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

Add comment

Write

Create snippet

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

Euclydes

0Support score
1Questions 1Answers 0Snippets