How to set active menu based on current route? - php

Question

Can anyone suggest a good way of setting the active class on the correct navbar menu item (e.g. in Bootstrap) based on what the current-handled fat-free route is?
The navbar menu in my main template looks like this:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Data
<li>About</li>
</ul>
I could put a check-if around each of these, something like:
<ul class="nav navbar-nav">
<li>{{ #route }}</li>
<li <check if="{{ #route == '/' }}"> class="active"</check>>Home</li>
<li <check if="{{ #route == '/data' }}"> class="active"</check>>Data
<li <check if="{{ #route == '/about' }}"> class="active"</check>>About</li>
</ul>
But that means both setting the #route variable in every route ($f3->set('route', $f3->get('PARAMS.0'))), and embedding the check and the route to compare it to in the template seems prone to error when making changes. I'd quite like to have the link appear active if the start of the route matches (e.g. still set the Data link as active if the route is /data/set/5/report), which would add to the complexity of the template.
I'm partially considering putting all the data for the menu inside an associative array in the code and generating the menu in the template, but I don't like the idea of taking the design of the menu out of the template and into the code.
Any ideas or discussion fully welcomed!

Answer 1

Well it depends partially on how you've defined your routes.
If your routes look like GET /#controller/#action, then the following should do the trick:
{~ $links=array(''=>'Home','data'=>'Data','about'=>'About') ~}
<ul>
<repeat group="#links" key="#ctrl" value="#label">
<li class="{{ #ctrl==##PARAMS.controller ? 'active' : '' }}">
{{ #label }}
</li>
</repeat>
</ul>
(Notice the double ## not to choke on homepage).
If your routes are defined one by one (GET /, GET /data, etc...), then you need to refine a bit the active state detection:
{~ $links=array('/'=>'Home','/data'=>'Data','/about'=>'About') ~}
<ul>
<repeat group="#links" key="#uri" value="#label">
<li class="{{ (#uri=='/' ? #PATH==#uri : strpos(#PATH,#uri)===0) ? 'active' : '' }}">
{{ #label }}
</li>
</repeat>
</ul>
If your routes are defined one by one and named appropriately (GET #home: /, GET #data: /data, GET #data_foo: /data/foo, etc...), then you can avoid hardcoding URIs inside templates:
{~ $links=array('home'=>'Home','data'=>'Data','about'=>'About') ~}
<ul>
<repeat group="#links" key="#name" value="#label">
<li class="{{ strpos(#ALIAS,#name)===0 ? 'active' : '' }}">
{{ #label }}
</li>
</repeat>
</ul>
Whichever method you choose, you may consider defining $links in a config file to improve maintainability.