Highlight the selected item in the lefthand navigation pane

plugins/builders/helpers.rb

@@ -0,0 +1,7 @@
+class Builders::Helpers < SiteBuilder
+  def build
+    helper :equal_paths do |p1, p2|
+      p1.chomp('/') == p2.chomp('/')
+    end
+  end
+end

src/_components/navigation_section.erb

@@ -4,12 +4,10 @@
   </h2>
 
   <div class="relative mt-3 pl-2">
-    <div class="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"></div>
-    <div class="absolute left-2 h-6 w-px bg-emerald-500" style="top:4px;opacity:1"></div>
 
-    <ul role="list" class="border-l border-transparent">
+    <ul role="list">
       <% @children.each do |k,v| %>
-        <li class="relative">
+        <li class="relative border-l <% if equal_paths(v, @current_path) %>border-emerald-500<% else %>border-transparent<% end %>">
           <a class="flex justify-between gap-2 py-1 pr-3 text-sm transition pl-4 text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="<%= v -%>">
             <span class="truncate"><%= k %></span>
           </a>

src/_components/navigation_section.rb

@@ -1,6 +1,7 @@
 class NavigationSection < Bridgetown::Component
-  def initialize(title, children: {})
+  def initialize(title, children: {}, current_path: nil)
     @title = title
     @children = children
+    @current_path = current_path
   end
 end

src/_partials/_navbar.erb

@@ -7,48 +7,53 @@
     <%= render(NavigationSection.new(
       "Home",
       children: {
-        "Home" => relative_url('/'),
-        "About" => relative_url('/about'),
-        "Downloads" => relative_url('/downloads'),
-        "Getting Help" => relative_url('/getting-help'),
-        "Release Notes" => relative_url('/release-notes')
-      }
+        "Home" => '/',
+        "About" => '/about',
+        "Downloads" => '/downloads',
+        "Getting Help" => '/getting-help',
+        "Release Notes" => '/release-notes'
+      },
+      current_path: resource.relative_url
     )) %>
 
     <%= render(NavigationSection.new(
       "Guides",
       children: {
-        "Quickstart" => relative_url('/guides/quickstart-guide'),
-        "Installation" => relative_url('/guides/installation-guide'),
-        "Transit Data Bundle" => relative_url('/guides/transit-data-bundle-guide'),
-        "Realtime Config" => relative_url('/guides/realtime-configuration-guide'),
-        "API Config" => relative_url('/guides/api-webapp-configuration-guide'),
-        "Phone (IVR) Config" => relative_url('/guides/phone-webapp-configuration-guide'),
-        "Web Config" => relative_url('/guides/webapp-configuration-guide'),
-        "Database Config" => relative_url('/guides/database-configuration-guide'),
-        "Troubleshooting" => relative_url('/guides/troubleshooting-guide')
-      }
+        "Quickstart" => '/guides/quickstart-guide',
+        "Installation" => '/guides/installation-guide',
+        "Transit Data Bundle" => '/guides/transit-data-bundle-guide',
+        "Realtime Config" => '/guides/realtime-configuration-guide',
+        "API Config" => '/guides/api-webapp-configuration-guide',
+        "Phone (IVR) Config" => '/guides/phone-webapp-configuration-guide',
+        "Web Config" => '/guides/webapp-configuration-guide',
+        "Database Config" => '/guides/database-configuration-guide',
+        "Troubleshooting" => '/guides/troubleshooting-guide'
+      },
+      current_path: resource.relative_url
     )) %>
 
     <%= render(NavigationSection.new(
       "Features",
       children: {
-        "Web" => relative_url('/features/web'),
-        "Phone and SMS" => relative_url('/features/phone-and-sms'),
-        "Sign Mode" => relative_url('/features/sign-mode'),
-        "GTFS Realtime" => relative_url('/features/gtfs-realtime'),
-        "Search API" => relative_url('/api/where/search'),
-      }
+        "Web" => '/features/web',
+        "Phone and SMS" => '/features/phone-and-sms',
+        "Sign Mode" => '/features/sign-mode',
+        "GTFS Realtime" => '/features/gtfs-realtime',
+        "Search API" => '/api/where/search',
+      },
+      current_path: resource.relative_url
     )) %>
 
     <%= render (NavigationSection.new(
       "REST API Methods",
-      children: site.data.rest_api['methods'].reduce({}) {|acc, kv| k = kv.first; acc[k] = "/api/where/methods/#{k}"; acc }
+      children: site.data.rest_api['methods'].reduce({}) {|acc, kv| k = kv.first; acc[k] = "/api/where/methods/#{k}"; acc },
+      current_path: resource.relative_url
     )) %>
 
     <%= render (NavigationSection.new(
       "REST API Elements",
-      children: site.data.rest_api['elements'].reduce({}) {|acc, kv| k = kv.first; v = kv.last; acc[(v['name'] || k)] = "/api/where/elements/#{k}"; acc }
+      children: site.data.rest_api['elements'].reduce({}) {|acc, kv| k = kv.first; v = kv.last; acc[(v['name'] || k)] = "/api/where/elements/#{k}"; acc },
+      current_path: resource.relative_url
     )) %>
   </ul>
 </nav>