Side Menu Toggle

[davidtmiller]

Add a toggle option for the side menu bar.

[kkabbara]

How do you active the side menu bar toggle option?

[davidtmiller]

This is a feature that is in-development, I'll update the theme and put out a new version when it's complete. I'm glad to see there is some interest in it though!

[xingwx]

+1 for this enhancement

It will be even better if the toggled sidebar will show up when mouse hover on it.

[kdiogenes]

+1

[matheusjardimb]

+1

[unix4you2]

+1

[iscjiha]

Waiting to taste this change

[unix4you2]

I had to put a little button to do that in my project (www.practico.org)

So if you wan to show/hide the sidebar only need to press that button and then Div sizes are changed.

You can see that in this file: https://github.com/unix4you2/practico/blob/master/core/marco_arriba.php near to the line 126

Regards

[marcelod]

+1...

waiting anxious for this improvement

[chenshasha]

+1 looking forward to this enhancement

[bobg2015]

+1 I'd love to see this enhancement. Infact I created a github account just to post this. sb-admin2 is awesome. Many thanks!

[yshahin]

+1 very interested in this
thanks

[pramod-rathod-avalara]

+1

[evertramos]

+1 Looking forward to it!

[marianogarnero]

+1

[ghost]

Can we use this until the enhancement completed?
https://github.com/kongbab04/sb-admin2-sidebar-toggle-collapse

[bobg2015]

I tried that link above but unfortunately I couldn't get it to work. I'd be interested to know if anyone manages to get
It working

[Juniornativa]

I'm also looking forward to the toggle option for the sidebar, how would i know when it's ready?

Congrats....

[pramod-rathod-avalara]

Here it is! Please find the demo application for the SB Admin 2 sidebar toggle. Enjoy!

https://github.com/pramod-rathod-avalara/startbootstrap-sb-admin-2-sidebar-toggle

[Juniornativa]

Hi Iron!

Thanks for you quick response!

I'm having problems, i've just downloaded these files and replaced the
files into the root template folder, but it's not working... How should i
do?

Thanks buddy, and congrats!!

2015-06-26 9:46 GMT-03:00 pramod.rathod notifications@github.com:

Here it is! Please find the demo application for the SB Admin 2 sidebar
toggle. Enjoy!

https://github.com/pramod-rathod-avalara/startbootstrap-sb-admin-2-sidebar-toggle

—
Reply to this email directly or view it on GitHub
#3 (comment)
.

[pramod-rathod-avalara]

Hi Juniornativa ,

If you are replacing the files into the 'StartBootstrap SB Admin 2' template folder. Things will not work as is. You will need to correct the paths to CSS and JS files into the index.html. The index.html in the downloaded project by default points to './assets/bower/' and './assets/css' folder.

Instead just include the ./assets/css/sbadmin2-sidebar-toggle.css into your template project and update the index.html to as per. The things to look for are inside index.html are contents inside <div id="sidebar-wrapper"> and <span class="masked">.

I hope this helps!

[Juniornativa]

Oh okay my friend, i'll try that way!!

Thanks for your big help, i appreciate your job!!

Take care of yourself!! Bye

2015-06-26 15:28 GMT-03:00 pramod.rathod notifications@github.com:

Hi Juniornativa ,

If you are replacing the files into the 'StartBootstrap SB Admin 2'
template folder. Things will not work as is. You will need to correct the
paths to CSS and JS files into the index.html. The index.html in the
downloaded project by default points to './assets/bower/' and
'./assets/css' folder.

Instead just include the ./assets/css/sbadmin2-sidebar-toggle.css into
your template project and update the index.html to as per. The things to
look for are inside index.html are contents inside
and .

I hope this helps!

—
Reply to this email directly or view it on GitHub
#3 (comment)
.

[bobg2015]

Hi,

Thank you very much on this. Its working great.

I had a question/suggestion. When the menu is expanded its not so important to close the menu as it doesn't overlap with the rest of the page content.

However when the menu is collapsed clicking on the sub-menus 'pops out' the menu over the rest of the context. Once we have clicked on the menu item which renders content it would be good to be able to hide that menu automatically if the menu is in collapsed mode.

Any idea how to achieve this?

Many thanks.

EDIT: This appears to work, but I'm not very familiar with jquery or javascript so it may not be correct or the right way to do it? I probably should just remove the parents to the item I clicked on, not on everything.

if ( $("#wrapper").hasClass("toggled") ) {
$("nav li").removeClass("active");
$("nav ul").removeClass("in");
}

[pramod-rathod-avalara]

Thanks for the suggestion!

You can do it inside menu-toggle click handler. Just add the below line. This simply collapses any open menu.

$('#wrapper.toggled').find("#sidebar-wrapper").find(".collapse").collapse('hide');

Complete example is below.

$(document).ready(function() {
     $("#menu-toggle").click(function(e) {
          e.preventDefault();
          $("#wrapper").toggleClass("toggled");
          $('#wrapper.toggled').find("#sidebar-wrapper").find(".collapse").collapse('hide');
      });
});

I will release a new version with the fixes. Cheers :)

[bobg2015]

Thanks Pramod,

That fix didn't work for me however ( not sure why ). Also I think I didn't explain what I was trying to achieve well. What I was suggesting was when someone clicks on menu a menu item that is in a 'toggled' state, i.e minimised, you want the sub menus etc to be closed rather then displaying over the rest of your screen. The code below is put on the on click event for your menu item.

if ( $("#wrapper").hasClass("toggled") ) {
$(this).parents("li").removeClass("active");
$(this).parents("ul").removeClass("in");
}

What you provided I think would collapse all of the menu's when toggling between the full and minimised menu. Although for some reason it didn't work for me.

[bobg2015]

There is an issue with this a metis-menu. When wrapping the menu item in the span class 'masked'. The font for the arrow or plus/minus no longer changes when expanded/collapsed. I guess this has something to do with metis.

Edit: Managed to fix it by updating the metis css. for example

.active>a>.fa.arrow:before{content:"\f107"}

to

.active>a>.masked>.fa.arrow:before{content:"\f107"}

[greyceamorim]

Hello pramod-rathod-avalara! I downloaded your projetct to try a menu sidebar, but it didnt work, I just downloaded and corrected the path of the css. Should I do more thing?

Thanks! :)

[pramod-rathod-avalara]

You will need to update your html to apply the css classes to make the toggle work. Please check the index.html from the example project.

Hope this helps!

[greyceamorim]

HI, thanks for reply me. SO, I did update the index.html, but it didn't work yet :/

Even the project that I downloaded didnt work

[greyceamorim]

It worked, I missed the bower install :)

[pathros]

I have tried pramod-rathod-avalara's solution and it's working fine. Thanks ☺ Before using this, I had installed the bootstrap hover dropdown plugin in order to make the sb admin 2 upper menu show options on mouse hover.
After installing pramod-rathod-avalara's plugin, I have noticed a problem. When the left side menu is collapsed or toggled. The upper menu is changed: when I hover over the menu, the size of the menu is smaller and in different position. For example, the user menu appears so far on the right that the user can no longer see the options, for example, the logout.
Anybody knows how to fix this?

My temporal solution was to move the upper right menu out of the #wrapper div. I separated both this upper right menu and the left side menu into two <nav> tags. Because, this plugin is affecting the css of the upper right menu.

So in summary, I left it like this:

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
Here goes my upper right menu where you see, for example, the logout option
</nav>
<div id="wrapper">
<nav id="sidebar-wrapper" role="navigation" style="margin-bottom: 0">
Here goes the left side menu and I placed here the menu toggle button just like this:
<li>
<a href="#"> <button id="menu-toggle" type="button" data-toggle="button" class="btn btn-default btn-xs"> <i class="fa fa-exchange fa-fw"></i> <span class="masked">Toggle menú</span> </button> </a> </li>

</nav>
</div>

[davidtmiller]

Okay there's a lot of +1's here so I am definitely adding this to the to-do list for the Bootstrap 4 version that I'll be developing.

[stratigos]

any chance of this feature being added to a future revision of SB Admin 2? I would rather not install further packages to get such simple functionality out of the sidebar nav. Thanks!

[davidtmiller]

It will certainly be added, but SB Admin 2 is going to get quite a few changes as well. Design wise and all.

[stratigos]

Well I certainly cant push any design changes onto my clients, so Ill write my own JS module for collapsing the sidebar then, Thanks!

[unix4you2]

I already wrote something for that... As you can see in the first screenshot (red circle) I put a floating button so Users can expand or collapse the side bar: ​ And in the second screenshot you can see another hidden bar that users can expando too (black sidebar). ​ You can see all the JS functions and styles to do that in this project: https://github.com/unix4you2/practico as a framework to build applications without programming. Regards. *Mg. John F. Arroyave Gutiérrez* Construya aplicaciones web en minutos con *Práctico Framework* - *www.practico.org* <http://www.practico.org/>

…

On Sun, Aug 27, 2017 at 11:49 AM, Todd ***@***.***> wrote: Well I certainly cant push any design changes onto my clients, so Ill write my own JS module for collapsing the sidebar then, Thanks! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#3 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACVQZCtayFZ_YqNQZFF9e5m00QRwMjBGks5scZ4DgaJpZM4C1_LW> .

[dimas-adi-kris]

i notice if you open sb admin 2 then click the sidebar toggle while watching inspect, there are class on elements that change

if anyone still have problem with sidebar toggle accordion that didn't work, here is solution that work for me

$("#sidebarToggle").click(function () {
  if ($("body").hasClass("sidebar-toggled")) {
    $("body").removeClass("sidebar-toggled");
    $("ul.sidebar").removeClass("toggled");
  } else {
    $("body").addClass("sidebar-toggled");
    $("ul.sidebar").addClass("toggled");
  }
});