Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Set sidenav to show by default without using JS

Aidan Lawson priority asked 1 year ago


Is there a way to show the slim sidenav by default in my Rails app?

I have a working sidenav with the toggle to widen function, however the initial slim (non widened) sidenav is not loading AT ALL by default, so I have to trigger it with JS to see it at all?

I'm currently using the suggested JS:

const slimInstance = mdb.Sidenav.getInstance(document.getElementById('sidenav-4'));
slimInstance.show();

This does work to show the sidenav. The problem comes when Turbo is active. When Turbo is active the JS is not being ran on every page load.

How can I use HTML to set the sidenav to always showing.

So not "toggled" but just showing the initial non toggled slim sidenav with icons by default.

Here is my current sidenav config:

    <nav id="sidenav-4"
        class="sidenav"
        data-mdb-mode="push"
        data-mdb-slim="true"
        data-mdb-slim-collapsed="true"
        data-mdb-color="light"
        data-mdb-content="#slim-content"
    >

Thanks.


Kamila Pieńkowska staff answered 1 year ago


Maybe try placing your code in:

document.addEventListener('DOMContentLoaded', function() {
    // your JS code
});

Aidan Lawson priority commented 1 year ago

I've tried this but it doesn't work. I'm assuming because of something related to stimulus that I don't understand. A way to trigger the sidenav through configuration would be extremely helpful.


Kamila Pieńkowska staff commented 1 year ago

Here is a snippet for you: https://mdbootstrap.com/snippets/standard/kpienkowska/5563190#html-tab-view



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 6.4.1
  • Device: Mac os
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No