set active classs to links

Author: Alban Bailly

themes/linode-hugo-base-theme/gulpfile.js

@@ -48,7 +48,7 @@ gulp.task('compile', () => {
     .pipe(
       purgecss({
         content: [html],
-        whitelist: ['mobile-nav']
+        whitelist: ['mobile-nav', ['active']]
       })
     )
     .pipe(gulp.dest(output));

themes/linode-hugo-base-theme/layouts/partials/2_molecules/nav.html

@@ -1,3 +1,4 @@
+{{ $url := .URL }}
 {{ range .Site.Menus.main }}
-  <a href="{{ .URL }}">{{ .Name }}</a>
+  <a href="{{ .URL }}" class="{{ if eq $url .URL }}active{{ end }}">{{ .Name }}</a>
 {{ end }}

themes/linode-hugo-base-theme/srcCSS/components/0_utilities/typography.css

@@ -78,7 +78,8 @@ a {
 
 a:hover,
 a:visited,
-a:active {
+a:active,
+a.active {
   text-decoration: underline;
 }
 

themes/linode-hugo-base-theme/static/assets/css/main.css

@@ -1,10 +1,8 @@
 // Navigation Toggle
-
-const mainMenu = document.getElementById('main-menu');
-const menuIcon = document.getElementById('menu-icon');
-const mobileClass = 'open';
-
 function toggleNav() {
+  const mainMenu = document.getElementById('main-menu');
+  const menuIcon = document.getElementById('menu-icon');
+  const mobileClass = 'open';
   if (!mainMenu.classList.contains(mobileClass)) {
     mainMenu.classList.add(mobileClass);
     menuIcon.classList.add(mobileClass);