AdminLTE3 - how to fix active sidebar

[jvbalcita]

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!

[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 <script></script> 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...

    /** 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');

[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

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

$(document).ready(function() {
  /** 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');
})

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

[edward221096]

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

[JuanVqz]

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

$(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");
  }
})

[GallitoMZ]

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

I found a solution similar to the one mentioned:

`
/** 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() {
    if (this.href) {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }


}).addClass('active');

// for treeview
$('ul.nav-treeview a').filter(function() {
    if (this.href) {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }

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

`

[yosaSoft]

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

thank you it's ver helpful

[keserwang]

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

This code should be placed in adminlte.js.