Leave current page highlighted in a page selection menu?

Using the if statement supported by Dwoo Template I make a comparison between the name of each page and the address of the current page that is inside a variable passed by the data array (data that is passed to the dwoo object to fill of the html).

The template code looks like this:

<div id="left_sidebar" class="col-md-2">
    <ul class="nav nav-pills nav-stacked">
        <li role="presentation"
            {if 'dashboard.php' == $page}
                class="active"
            {/if}
            ><a href="dashboard.php">Dashboard
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'hardware-statistics.php' == $page}
                class="active"
            {/if}
            ><a href="hardware-statistics.php">Hardware Statistics
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'hardware-logs.php' == $page}
                class="active"
            {/if}
            ><a href="hardware-logs.php">Hardware Logs
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'software-statistics.php' == $page}
                class="active"
            {/if}
            ><a href="software-statistics.php">Softwares Statistics
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'software-logs.php' == $page}
                class="active"
            {/if}
            ><a href="software-logs.php">Softwares Logs
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'site-statistics.php' == $page}
                class="active"
            {/if}
            ><a href="site-statistics.php">Site Statistics
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'site-logs.php' == $page}
                class="active"
            {/if}
            ><a href="site-logs.php">Site Logs
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'advertises-statistics.php' == $page}
                class="active"
            {/if}
            ><a href="advertises-statistics.php">Advertises Statistics
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'advertises-logs.php' == $page}
                class="active"
            {/if}
            ><a href="advertises-logs.php">Advertises Logs
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'notices-warnings-errors.php' == $page}
                class="active"
            {/if}
            ><a href="notices-warnings-errors.php">Notices, Warnings and Errors
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
    </ul>
</div>

and the page itself that is accessed via browser is as follows:

<?php

    require_once '../../../vendor/autoload.php';

    $dwoo = new Dwoo\Core();
    $dwoo->setCompileDir('../../../assets/compiled/');
    $dwoo->setTemplateDir('../../../assets/templates/');

    $data = array();

    $data['page'] = 'dashboard.php';
    $dwoo->output('dashboard.tpl', $data);
?>

so in each new page created with php you can change the value of the% position page of the data array by putting the name of the page accessed.

You can check if the current page is the content page you opened, the "active" class is printed. Example:

<li role="presentation"<?php echo ($page == 'dashboard') ? ' class="active"' : '' ?>>
     <a href="dashboard.php">Dashboard <i class="glyphicon glyphicon-chevron-right"></i></a>
</li>
<li role="presentation"<?php echo ($page == 'hardware-statistics') ? ' class="active"' : '' ?>>
  <a href="hardware-statistics.php">Hardware Statistics <i class="glyphicon glyphicon-chevron-right"></i></a>
</li>

You can do with jQuery (or pure Javascript if you feel better):

jQuery(document).load(function($){

   var page = window.location.pathname;

   // remove qualquer parâmetro de url 
   // por exemplo de 'pagina.php?id=10' para 'pagina.php'
   page = page.replace(/\?.+/, ''); 

   // Caso seja uma url amigavel e queria apenas o primeiro parâmetro
   // por exemplo de 'pagina/produto/fogao' para 'pagina'
   page = page.split('/')[0]; 

   // Aplica a classe
   $('#left_sidebar a[href="' + page + '"]').parent() // Seleciona pai
                                          .addClass('active') // Adiciona classe
                                          .siblings() // Seleciona irmãos
                                          .removeClass('active'); // Remove classe
});