nav: set the active item on the top navigation

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 bump-sh#193
paulRbr · Mar 26, 2024 · acfe41e · acfe41e
1 parent 60bb66f
commit acfe41e
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -2,4 +2,6 @@
 layout: guides
 title: Guides
 page_class: guides
+paginate:
+  collection: guides
 ---