Monday 10 April 2017

Toggle active navbar pugjs

I'm trying to toggle the 'active' class from bootstrap if the link contains a certain string.

So I'm doing the following:

<ul class="nav navbar-nav">
    li(class=(path === "/" ? "active" : "")) //This link works fine the others don't
      <a href="/"><span class = 'glyphicon glyphicon-home'></span>Início</a>

    li(class="dropdown "+(path.indexOf("/cards") > -1 ? "active" : "")) //This one doesn't
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Cartões <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="/cards/"><span class = 'glyphicon glyphicon-list'></span>  Consultar Cartões</a></li>
        <li><a href="/cards/create"><span class = 'glyphicon glyphicon-plus'></span>  Associar Cartão</a></li>
      </ul>

    li(class="dropdown "+(path.indexOf("/lines") > -1 ? "active" : ""))//This one doesn't
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Linhas <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="/lines/"><span class = 'glyphicon glyphicon-list'></span>  Consultar Linhas</a></li>
        <li><a href="/lines/create"><span class = 'glyphicon glyphicon-plus'></span>  Adicionar Linha</a></li>
      </ul>

    li(class="dropdown " + (path.indexOf("/messages") > -1 ? "active" : ""))//This one doesn't
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Mensagens <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="/messages/"><span class = 'glyphicon glyphicon-list'></span>  Consultar Mensagens</a></li>
      </ul>
  </ul>

So I have 4 links, the first one I just compare if the path is /, so it works fine, but I have links that have various subpaths, so it can be /cards/exists, etc. So I check if the string 'path' contains those parent links for example /cards by using indexOf, which it's values are correct, but crashes so it doesn't render my page.

I don't get any errors, but it's working using indexOf. I've tried various other methods of checking substrings, but none are working.



via Firecat

No comments:

Post a Comment