Topic: Dual Slim Side-Nav - Suggestion / Small Bug
I would like to add 2 side-navs, that are also slim in a website. Both of them also have to load in the compressed state. And without the .button-collapse to hide, just need the states - compressed and expanded. One on the left (default), and the other on the right.
Is #slide-out important? Probably change it to .sidenav-slide-out instead?
<div id="left-slim" class="side-nav fixed wide"></div>
<div id="right-slim" class="side-nav fixed wide"></div>
$(function() {
'use strict';
$('#left-slim').sideNav();
$('#right-slim').sideNav({
edge: 'right'
});
});
The CSS: left: 0; seems to be forced even when declaring edge: 'right'
One of the side-nav I want to turn into a "Friends Online" list, so I can merge this snippet (https://mdbootstrap.com/snippets/jquery/marta-szymanska/721417) onto my website.
Hi,
what padding-left, in which component? I don't see this. And if you want to change icons, you can do this in these lines:
$(".sv-slim-icon").removeClass('fa-angle-double-left').addClass('fa-angle-double-right');,
$(".sv-slim-icon").removeClass('fa-angle-double-right').addClass('fa-angle-double-left');
and in HTML: <a id="toggle-test" class="waves-effect"> <i class="sv-slim-icon fas fa-angle-double-left"></i>Minimize menu</a>.
Best, Marta
Thank you Marta, I forgot about using jQuery. Could the fix get put into an update?
I also noticed some CSS got overlooked. Even when the sideNav is set on the right side, padding-left: is still set. It should be padding-right:.
And I can see how I can change to any Font Awesome icons I wish with your solution. Could that also include that as more options, like;
.sideNav({
to_open: '', // desired Font Awesome icon
to_close: '', // a different Font Awesome icon
});
Hi,
would you show me a code? For example in the snippet here: https://mdbootstrap.com/snippets/?
Best, Marta
Andrew Ford priority commented 4 years ago
Here: https://mdbootstrap.com/snippets/jquery/andrew_ford/934881
Marta Wierzbicka staff commented 4 years ago
Hi,
look at my solution for the icon here: https://mdbootstrap.com/snippets/jquery/marta-szymanska/940272?view=project. Look at the bottom of HTML code and a piece of JavaScript code.
Best, Marta
I've noticed something that got overlooked.
Right now I will just be focusing on the "Friends Online" list, which I have edge: 'right' set in the options. The Font Awesome icon for the "minimize" link still acts like it is on the default left side.
I have tried transform: rotate(180deg); and also tried to add the .fa-rotate-180 on this element - in both attempts the .fa-angle-double-left/.fa-angle-double-right (depending on the element's state) vanishes.
I even tried to change to .fa-angle-double-right, but it just reverts to default.
The one thing I'd like to customize:
- To minimize; change the Font Awesome icon with
.fa-times. To maximize;.fa-bars/.fa-stream.
Hi,
#slide-out is important for make side-nav slim. button-collapse is important for show and hide the side-nav. Would you create a snippet presenting your idea for this layout with two side-navs? For now, I'm not sure how to help you. It would be helpful if you created a demo.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.8.5
- Device: N/A
- Browser: N/A
- OS: N/A
- Provided sample code: No
- Provided link: Yes