From fbcea15e3528d1c9e8c26dabdc2ff37653ba9522 Mon Sep 17 00:00:00 2001
From: Charlotte Van Petegem <charlotte@vanpetegem.be>
Date: Fri, 23 May 2025 17:11:53 +0200
Subject: [PATCH] Style navigation a bit

---
 .../stylesheets/application.postcss.css       | 23 +++++++++++++++++++
 app/controllers/application_controller.rb     |  2 +-
 app/views/sections/show.html.erb              |  8 ++++---
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/application.postcss.css b/app/assets/stylesheets/application.postcss.css
index fb3308f..a2cf898 100644
--- a/app/assets/stylesheets/application.postcss.css
+++ b/app/assets/stylesheets/application.postcss.css
@@ -21,6 +21,29 @@ h4 {
     padding: 6rem 4rem;
 }
 
+header {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.section-link {
+    word-break: keep-all;
+    white-space: nowrap;
+    color: black;
+    text-transform: uppercase;
+    font-weight: 500;
+    padding: 1rem 0.5rem;
+    line-height: 2.125rem;
+    text-underline-offset: 0.25rem;
+    text-decoration-line: none;
+    text-decoration-thickness: 0.125rem;
+}
+
+.section-link-active {
+    text-decoration-line: underline;
+}
+
 .title-card-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 2f78fe5..47e8c95 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -1,6 +1,6 @@
 class ApplicationController < ActionController::Base
   # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has.
-  allow_browser versions: :modern
+  # allow_browser versions: :modern
 
   before_action :require_authorization
 
diff --git a/app/views/sections/show.html.erb b/app/views/sections/show.html.erb
index a45b429..949e9b1 100644
--- a/app/views/sections/show.html.erb
+++ b/app/views/sections/show.html.erb
@@ -1,7 +1,9 @@
 <% content_for(:header) do %>
-    <% @sections.each do |section| %>
-        <%= link_to section.title, section_url(section) %>
-    <% end %>
+    <div class="section-links">
+        <% @sections.each do |section| %>
+            <%= link_to section.title, section_url(section), html_options = { class: { "section-link": true, "section-link-active": current_page?(section_url(section)) } } %>
+        <% end %>
+    </div>
 <% end %>
 
 <h4><%= @section.title %></h4>