Mantener Activo Menú en el Template con Django

 

Hace algunos días publiqué en el canal de youtube, cómo mantener el menú activo, utilizando el Template Engine de Django, lo puedes ver en acá

En base al video anterior, pudieron ver que  el proceso es bastante extenso si el menú crece mucho.  Partiendo de ahí y que estamos en el Front End, podemos hacerlo más rápido si con jQuery capturamos todos los enlaces y los comparamos con el valor que contenga la variable de django {‌{request.path}}, ya con esto, podemos hacer una comparación aprovechando la nueva implementación de ECMAScript 6, para esto, una vez cargado el DOM (osea dentro de la instrucción $(document).ready(function () {) colocar el siguiente script:

      var $enlaces = $(".nav-item>.collapse>.collapse-item");
 
      $($enlaces).each(function(){
        var div_show = $(this).closest('.collapse');
        var div_nav = div_show.closest('.nav-item');
 
        var request_path = '{‌{request.path}}'
        var link = $(this).attr('href');
        
        if (request_path.includes(link)){
          $(this).addClass('active');
          div_show.addClass("show");
          div_nav.addClass("active");
        }
      });

Acá básicamente tomamos todos los enlaces y para tener la certeza que nos referimos a un enlace del menú, hacemos un filtro (en el selector) de todos los elementos que en la clase tengan collapse-item y que su padre sea collapse y el padre de este sea nav-item, dicho de otra forma, todo elemento con clase nav-item que contenga collapsey que a su vez contenga collapse-item , esto traerá todos los enlaces, en este punto, los recorremos todos y preguntamos si la ruta actual (request.path de Django) contiene la ruta del enlace que se está iterando, si lo contiene, entonces marcamos ese enlace agregándole la clase active y al div padre que contiene collpase y a la vez al padre de este que tenga la clase nav-item.

Si tienes dudas, favor hazme la llegar, no creí necesario una clase en video, pero si es necesario indícamelo en un mensaje y procederé a hacerlo.

Recuerda que puedes adquirir el curso en el siguiente enlace:

https://www.udemy.com/course/sistema-de-compra-y-facturacion-con-python-usando-django/?referralCode=EDA7FC277025EB39FBB8

También puedes revisar si está activa alguna promoción de Udemy para todos mis cursos en este enlace

http://bit.ly/8-cursos-debsconsultores

E Incluso revisar si yo he activado descuento, por lo general, son cupones del mejor precio posible, esto es USD 9.99 viendo este enlace