Topic: Set sidenav to show by default without using JS
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.
Maybe try placing your code in:
document.addEventListener('DOMContentLoaded', function() {
// your JS code
});
Aidan Lawson pro premium priority commented a 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.
kpienkowska staff commented a year ago
Here is a snippet for you: https://mdbootstrap.com/snippets/standard/kpienkowska/5563190#html-tab-view
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 6.4.1
- Device: Mac os
- Browser: Chrome
- OS: Ubuntu
- Provided sample code: No
- Provided link: No