Dual Slim Side-Nav - Suggestion / Small Bug


Topic: Dual Slim Side-Nav - Suggestion / Small Bug

Andrew Ford pro premium priority asked 5 years ago

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.


Marta Szymanska staff pro premium answered 5 years ago

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


Andrew Ford pro premium priority answered 5 years ago

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.

enter image description here enter image description here

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:

  1. To minimize; change the Font Awesome icon with .fa-times. To maximize; .fa-bars/.fa-stream.

Marta Szymanska staff pro premium answered 5 years ago

Hi,

would you show me a code? For example in the snippet here: https://mdbootstrap.com/snippets/?

Best, Marta


Andrew Ford pro premium priority commented 5 years ago

Here: https://mdbootstrap.com/snippets/jquery/andrew_ford/934881


Marta Szymanska staff pro premium commented 5 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


Andrew Ford pro premium priority answered 5 years ago

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
});

Marta Szymanska staff pro premium answered 5 years ago

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


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
  • User: Pro
  • 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