From eb3035ba60222322aaffc12fe15e2cfd0d928894 Mon Sep 17 00:00:00 2001
From: "Paul B." <paulr@bump.sh>
Date: Mon, 25 Mar 2024 12:15:47 +0100
Subject: [PATCH] nav: set the active item on the top navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Based on the three collections “help”, “guides” and “product-updates”
this commit adds a CSS property `active` on the active category in the
top navigation bar.

Visually I've simply added an underlined text decoration (but fill
free to suggest something else).

Part of #193
---
 src/_components/shared/nav/item.css | 4 ++++
 src/_components/shared/nav/item.erb | 2 +-
 src/_components/shared/nav/item.rb  | 4 ++--
 src/_components/shared/navbar.erb   | 2 +-
 src/_components/shared/navbar.rb    | 8 +++++++-
 src/_data/navbar.yml                | 6 +++---
 src/_layouts/default.erb            | 7 +++++--
 src/_pages/guides.md                | 2 ++
 8 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/_components/shared/nav/item.css b/src/_components/shared/nav/item.css
index 926d62e5..2d958797 100644
--- a/src/_components/shared/nav/item.css
+++ b/src/_components/shared/nav/item.css
@@ -1,3 +1,7 @@
+nav-item.active {
+  text-decoration: underline;
+}
+
 nav-item :is(a, a:visited, a:focus) {
   border-radius: var(--border-radius-medium);
   color: var(--text-color);
diff --git a/src/_components/shared/nav/item.erb b/src/_components/shared/nav/item.erb
index 53458d8d..d5aeb58c 100644
--- a/src/_components/shared/nav/item.erb
+++ b/src/_components/shared/nav/item.erb
@@ -1,3 +1,3 @@
-<nav-item>
+<nav-item<% if @active %> class="active"<% end %>>
   <a href="<%= relative_url @link %>"><%= @title %></a>
 </nav-item>
diff --git a/src/_components/shared/nav/item.rb b/src/_components/shared/nav/item.rb
index a5ab892b..d88733d4 100644
--- a/src/_components/shared/nav/item.rb
+++ b/src/_components/shared/nav/item.rb
@@ -1,5 +1,5 @@
 class Shared::Nav::Item < Bridgetown::Component
-  def initialize(title:, link:)
-    @title, @link = title, link
+  def initialize(title:, link:, active: false)
+    @title, @link, @active = title, link, active
   end
 end
diff --git a/src/_components/shared/navbar.erb b/src/_components/shared/navbar.erb
index cb0b3b2a..5fed3bcb 100644
--- a/src/_components/shared/navbar.erb
+++ b/src/_components/shared/navbar.erb
@@ -7,7 +7,7 @@
     <nav-links data-toggle-target="item">
       <div class="nav-group">
         <% @site.data.navbar.left_links.each do |item| %>
-          <%= render Shared::Nav::Item.new(title: item.title, link: item.link) %>
+          <%= render Shared::Nav::Item.new(title: item.title, link: item.link, active: current_item?(item)) %>
         <% end %>
       </div>
       <div class="nav-group">
diff --git a/src/_components/shared/navbar.rb b/src/_components/shared/navbar.rb
index 7691bfef..90bc0d02 100644
--- a/src/_components/shared/navbar.rb
+++ b/src/_components/shared/navbar.rb
@@ -1,6 +1,12 @@
 class Shared::Navbar < Bridgetown::Component
-  def initialize(metadata:, resource:)
+  def initialize(metadata:, resource:, collection: nil)
     @metadata, @resource = metadata, resource
+    @collection = collection || @resource.collection&.label
     @site = Bridgetown::Current.site
   end
+
+  def current_item?(item)
+    item.collection.present? &&
+      item.collection == @collection
+  end
 end
diff --git a/src/_data/navbar.yml b/src/_data/navbar.yml
index e945f1d7..2816a5f9 100644
--- a/src/_data/navbar.yml
+++ b/src/_data/navbar.yml
@@ -1,7 +1,7 @@
 left_links:
-  - {title: "Documentation", link: "/help"}
-  - {title: "Product Updates", link: "/product-updates"}
-  - {title: "Guides", link: "/guides"}
+  - {title: "Documentation", link: "/help", collection: "help"}
+  - {title: "Product Updates", link: "/product-updates", collection: "product-updates"}
+  - {title: "Guides", link: "/guides", collection: "guides"}
 right_links:
   - {title: "API Reference", link: "https://developers.bump.sh"}
   - {title: "Bump.sh", link: "https://bump.sh"}
diff --git a/src/_layouts/default.erb b/src/_layouts/default.erb
index c82c4b73..d8e02936 100644
--- a/src/_layouts/default.erb
+++ b/src/_layouts/default.erb
@@ -4,8 +4,11 @@
     <%= render "head", metadata: site.metadata, title: data.title %>
   </head>
   <body class="<%= data.page_class %>"data-controller="copy <% if data.sidebar %>toggle<% end %>">
-    <%# lit :bump_navbar, logo: relative_url('/images/bump-logo.svg') %>
-    <%= render Shared::Navbar.new(metadata: site.metadata, resource: resource) %>
+    <%= render Shared::Navbar.new(
+      metadata: site.metadata,
+      resource: resource,
+      collection: data.paginate&.collection || data.prototype&.collection
+    ) %>
 
     <%= yield %>
 
diff --git a/src/_pages/guides.md b/src/_pages/guides.md
index a3327a70..3ed1ef61 100644
--- a/src/_pages/guides.md
+++ b/src/_pages/guides.md
@@ -2,4 +2,6 @@
 layout: guides
 title: Guides
 page_class: guides
+paginate:
+  collection: guides
 ---