Do navbar button selection in the template instead of using Java Script

src/js/main.js

@@ -1,16 +1,4 @@
 document.addEventListener("DOMContentLoaded", function() {
-  // ---------------- Selected Navbar Link -------------------------
-  let navbar_links = document.querySelectorAll('.nav-links a');
-  let trim_last_slash = window.location.href.replace(/\/$/, '');
-  let selected_navbar_link = [...navbar_links].filter((item) => {
-    return ((item.href === trim_last_slash) || (item.href === window.location.href))
-  })
-  if (selected_navbar_link.length !== 0) {
-    for (let element of selected_navbar_link) {
-      element.className = "bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium"
-    }
-  }
-
   // ---------------- Switch Theme -------------------------
   // On page load or when changing themes, best to add inline in `head` to avoid FOUC
   if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {

templates/layout.html

@@ -74,8 +74,6 @@
         <div class="flex-1 flex items-center">
           <div class="flex-shrink-0 flex items-center ml-2">
             <a href="{{ config.base_url | safe }}" class="text-xl text-gray-800 dark:text-white">{{config.extra.navbar.title}}</a>
-            <!-- <img class="block lg:hidden h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow">
-            <img class="hidden lg:block h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow"> -->
           </div>
           <div class="hidden sm:block sm:ml-6">
             <div class="nav-links flex space-x-4">
@@ -84,8 +82,12 @@
               {% if lang == item.lang %}
               {% for link in item.links %}
               <a href="{{ config.base_url | trim_end_matches(pat='/') | safe }}/{{ link.url }}"
-                class="text-gray-800 dark:text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">{{
-                link.name }}</a>
+              {% if current_path and ((link.url != '' and link.url in current_path) or link.url == '' and current_path == '/') %}
+                class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" {# Highlight button, if button URL is part of the current path. #}
+              {% else %}
+                class="text-gray-800 dark:text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
+              {% endif %}
+                >{{link.name }}</a>
               {% endfor %}
               {% endif %}
               {% endfor %}