AdminLTE3 - how to fix active sidebar

[jvbalcita]

Issue type:

• [ ] Feature request
• [x] Bug report
• [ ] Documentation

Environment:

• AdminLTE Version: version 3 alpha 2
• Operating System: All.
• Browser (Version): All.

In the previous version of AdminLTE which is the Bootstrap 3 there is a fix to make the sidebar dynamically active when selected.

Here's the code used

$(function(){
  /** add active class and stay opened when selected */
  var url = window.location;

  // for sidebar menu entirely but not cover treeview
  $('ul.sidebar-menu a').filter(function() {
     return this.href == url;
  }).parent().addClass('active');

  // for treeview
  $('ul.treeview-menu a').filter(function() {
     return this.href == url;
  }).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');

});

but now in AdminLTE 3 this code is not working.
Is anyone already tried this? and produced a resolution?

Thanks in advance

[arbexmb]

Hello @jvbalcita

Can you test this, please:

/** add active class and stay opened when selected */
var url = window.location;

// for sidebar menu entirely but not cover treeview
$('ul.nav-sidebar a').filter(function() {
    return this.href == url;
}).addClass('active');

// for treeview
$('ul.nav-treeview a').filter(function() {
    return this.href == url;
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');

[jvbalcita]

it's working @arbex10 . Thank you very much!

[cristo89]

Hello @jvbalcita

Can you test this, please:

/** add active class and stay opened when selected */
var url = window.location;

// for sidebar menu entirely but not cover treeview
$('ul.nav-sidebar a').filter(function() {
    return this.href == url;
}).addClass('active');

// for treeview
$('ul.nav-treeview a').filter(function() {
    return this.href == url;
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open') .prev('a').addClass('active');

hey bro, this code where? iam sorry my english not good.
thanks

[cristo89]

it's working @arbex10 . Thank you very much!

hey bro, this code ppaste where?sorry my english not good

[SupunSam]

it's working @arbex10 . Thank you very much!

hey bro, this code paste where?sorry my English not good

You should place it bottom on your master layout HTML page or whatever the HTML page you're trying to have the ADMIN LTE Sidebar.

just open a simple tag and put the code in there.

[renzo-tarazona07]

el código va dentro de un script en el pie de pagina antes de finalizar así:
this code insert into footer page...

[ashif9]

Thank You it worked @arbexmb

[AshrafulRasel]

@arbexmb when blog/users this works but blog/users/3/edit for this url not working for menuopen

[GersonFD]

Hello @jvbalcita

Can you test this, please:

/** add active class and stay opened when selected */
var url = window.location;

// for sidebar menu entirely but not cover treeview
$('ul.nav-sidebar a').filter(function() {
    return this.href == url;
}).addClass('active');

// for treeview
$('ul.nav-treeview a').filter(function() {
    return this.href == url;
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');

It only works for the first element of second level, could you help me to work with the rest of levels?

[kpsanmao]

it's working @arbex10 . Thank you very much!

hey bro, this code ppaste where?sorry my english not good

放到基础模板或者每个页面的前面。
``

你这典型的中式英语，茫茫多的英语中一眼就能看出来是国人！

[edward221096]

I searched too many documentation but @arbexmb code is working perfectly! Thank you!!

[JuanVqz]

I'm using rails 6 with turbolinks and webpacker the code which works for me it's this.

$(document).on("turbolinks:load", function() {
  var url = window.location

  $("ul.nav-sidebar a").filter(toggleNavSidebar);
  $("ul.nav-treeview a").filter(toggleNavTreeview);

  function toggleNavSidebar() {
    if (this.href != url) return

    $(this).addClass("active")
  }

  function toggleNavTreeview() {
    if (this.href != url) return

    $(this).parentsUntil(".nav-sidebar > .nav-treeview")
      .addClass("menu-open").prev("a").addClass("active");
  }
})