I'm trying to create a website with a dynamic menu and I'm struggeling. Everything worked really calm until I added a lot more menu items and I'm not able to get this to work again.
for the most part the urls look like:
http://domain.tld/mask1/coolfunction
http://domain.tld/mask2/function1
http://domain.tld/mask2/function2
however, links like these causing issues:
http://domain.tld/onemask/function1/month
http://domain.tld/twomask/function2/month
and since splitting the url and just comparing the last element, it giving me headache since.
I tried rewriting it to check the entire url instead but i can't get the menu to work
var current = location.pathname.split("/").slice(-1)[0].replace(/^/|/$/g, '');
$('.nav li a', sidebar).each(function() {
var $this = $(this);
if ($this.attr('href').indexOf(current) !== -1) {
$(this).parents('.nav-item').last().addClass('active');
if ($(this).parents('.sub-menu').length) {
$(this).addClass('active');
return false;
}
if (current !== "index.html") {
$(this).parents('.nav-item').last().find(".nav-link").attr("aria-expanded", "true");
if ($(this).parents('.sub-menu').length) {
$(this).closest('.collapse').addClass('show');
}
}
}
});
the html:
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#page-dispo" aria-expanded="false" aria-controls="page-dispo">
<i class="menu-icon mdi mdi-progress-clock"></i>
<span class="menu-title">Zeiterfassung</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="page-dispo">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="/vertragsliste/{{ current_user.calweek }}">Verträge</a></li>
<li class="nav-item"><a class="nav-link" href="/mitarbeiterliste/{{ current_user.month }}">Mitarbeiter</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#page-auswertungen" aria-expanded="false" aria-controls="page-auswertungen">
<i class="menu-icon mdi mdi-chart-areaspline"></i>
<span class="menu-title">Auswertungen</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="page-auswertungen">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="/auswertung/vertragssicht/{{ current_user.month }}">Verträge</a></li>
<li class="nav-item"><a class="nav-link" href="/auswertung/mitarbeitersicht/OL-999/{{ current_user.month }}"> Mitarbeiter</a></li>
</ul>
</div>
</li>