Implement: Active Link

[llighter]

EXAMPLE: NAVIGATION LINKS WITH AN active CLASS ADDED FOR ON THE CURRENT PAGE

<ul>
{%- for post in collections.post -%}
  <li{% if page.url == post.url %} class="active"{% endif %}>{{ post.data.title }}</li>
{%- endfor -%}
</ul>

Implement in conjunction with navigation.

[llighter]

I think Material Tab bar is too much for me. It could be better using plane nav-bar to build Bottom Border Nav Links Here's an Example.

[llighter]

This is an simple example referred from eleventy-base-blog

<header>
   <h1 class="home"><a href="{{ '/' | url }}">{{ metadata.title }}</a></h1>
   <ul class="nav">
     {%- for nav in collections.nav | reverse -%}
     <li class="nav-item{% if nav.url == page.url %} nav-item-active{% endif %}"><a href="{{ nav.url | url }}">{{ nav.data.navtitle }}</a></li>
     {%- endfor -%}
   </ul>
</header>

[llighter]

Instead of explicity writing, I can use collection tag, nav. So I can use collection of nav.

Before applying this change, I have to check nav object. So that I can see what's inside.

Also, I should remove the style applied to the a tag.