Topic: Persistent sidenav on PC, but need-to-call on mobile?
The title explains it all, but I'll lay out what I'm trying to achieve with the sidebar;
On Desktop: On desktop I want the sidebar to stay on the left side of the page, with no option to toggle.
On Mobile: On mobile I want the sidebar to stay hidden on the left side of the page, and needs to be called to open because right now it loads with the page and has to be tapped out of.
Switching between devices in debug menu: I want the page to "smoothly" switch between these two modes when messing around with debug, because switching back to PC after testing on mobile mode, the sidebar stays hidden and I have to switch to mobile to trigger it, when reloading the page isn't an option.
I'm new to MDB5, so I'm learning my way as I go copying snippets from the site... This is what I have in my 'nav' tag, what else do I need to add to make this work?
<nav
id="sidenav"
class="sidenav sidenav-sm"
data-mdb-closeOnEsc="false"
data-mdb-expandOnHover="true"
data-mdb-hidden="false"
data-mdb-mode="side"
>
I suck at anything JavaScript related so I could only come up with a hacky PHP "if(deviceMobile){}else{}" temp sollution :/
I think this example is what you're looking for. Instead of checking type of device, it takes device's width as a parameter and perform actions depending on this parameter.
If you want it to be hidden only for mobiles, you can change code in line if (window.innerWidth < 1400) to smaller value.
Anyway if you really want your app to check type of device instead of its width, you should see this stackoverflow topic: link
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 6.0.1
- Device: Desktop
- Browser: Google Chrome
- OS: Win10
- Provided sample code: No
- Provided link: No