Skip to content

Commit

Permalink
nav: set the active item on the top navigation
Browse files Browse the repository at this point in the history
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
  • Loading branch information
paulRbr authored and thimy committed Sep 11, 2024
1 parent 7fb6969 commit 99e2566
Show file tree
Hide file tree
Showing 8 changed files with 25 additions and 10 deletions.
4 changes: 4 additions & 0 deletions src/_components/shared/nav/item.css
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/_components/shared/nav/item.erb
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<nav-item>
<nav-item<% if @active %> class="active"<% end %>>
<a href="<%= relative_url @link %>"><%= @title %></a>
</nav-item>
4 changes: 2 additions & 2 deletions src/_components/shared/nav/item.rb
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion src/_components/shared/navbar.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
8 changes: 7 additions & 1 deletion src/_components/shared/navbar.rb
Original file line number Diff line number Diff line change
@@ -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
6 changes: 3 additions & 3 deletions src/_data/navbar.yml
Original file line number Diff line number Diff line change
@@ -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"}
7 changes: 5 additions & 2 deletions src/_layouts/default.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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 %>
Expand Down
2 changes: 2 additions & 0 deletions src/_pages/guides.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,6 @@
layout: guides
title: Guides
page_class: guides
paginate:
collection: guides
---

0 comments on commit 99e2566

Please sign in to comment.