fix: dynamically highlight active navigation tab based on current page. Closes Issue #154

Author: mohitjoshi-hey

_includes/header.html

@@ -13,11 +13,21 @@ <h2 id="project_tagline">{{ page.subtitle }}</h2>
     </div>
     <!-- Tabbed navigation bar -->
     <ul class="nav nav-tabs">
-        <li id="home" class="active" role="presentation"><a href="/">Home</a></li>
-        <li id="news" role="presentation"><a href="/news">News</a></li>
-        <li id="blog" role="presentation"><a href="/blog">Blog</a></li>
-        <li id="GSoC" role="presentation"><a href="/GSoC">GSoC</a></li> 
-        <li id="tutorials" role="presentation"><a href="/tutorials">Tutorials</a></li>
+        <li id="home" class="{% if page.url == '/' %}active{% endif %}" role="presentation">
+            <a href="/">Home</a>
+        </li>
+        <li id="news" class="{% if page.url contains '/news' %}active{% endif %}" role="presentation">
+            <a href="/news">News</a>
+        </li>
+        <li id="blog" class="{% if page.url contains '/blog' %}active{% endif %}" role="presentation">
+            <a href="/blog">Blog</a>
+        </li>
+        <li id="GSoC" class="{% if page.url contains '/GSoC' %}active{% endif %}" role="presentation">
+            <a href="/GSoC">GSoC</a>
+        </li>
+        <li id="tutorials" class="{% if page.url contains '/tutorials' %}active{% endif %}" role="presentation">
+            <a href="/tutorials">Tutorials</a>
+        </li>
     </ul>
     <!-- INCLUDE DOWNLOAD BUTTON IF THE PAGE HAS IT SET IN THE FRONT-MATTER -->
     {% if page.download == true %}