Fix css and refactor subnavigation bar

content/about/about.erb

@@ -1,8 +1,12 @@
 ---
 narrow_page: true
+subnavigation:
+  bar: about
+  identifier: about
+  name: Zeus WPI
+  order: 100
 ---
 
-<%= render '/partials/_about_sub_navbar.*', selected: 'about' %>
 <h1 class="title is-1 has-text-centered">About Zeus WPI</h1>
 
 <div class="content">

content/about/historiek.erb

@@ -1,8 +1,13 @@
 ---
 narrow_page: true
 typography: true
+subnavigation:
+  bar: about
+  identifier: historiek
+  name: Historiek
+  order: 400
 ---
-<%= render '/partials/_about_sub_navbar.*', selected: 'historiek' %>
+
 <h1 class="title is-1 has-text-centered">Historiek</h1>
 
 <div class="timeline">

content/about/oud-bestuur.erb

@@ -1,9 +1,12 @@
 ---
 narrow_page: true
+subnavigation:
+  bar: about
+  identifier: oud-bestuur
+  name: Oud-bestuur
+  order: 500
 ---
 
-<%= render '/partials/_about_sub_navbar.*', selected: 'oud-bestuur' %>
-
 <h1 class="title is-1 has-text-centered">Oud-bestuur</h1>
 
 <div class="content">

content/about/privacy.erb

@@ -3,8 +3,13 @@ title: Privacybeleid
 narrow_page: true
 typography: true
 toc: true
+subnavigation:
+  bar: about
+  identifier: privacy
+  name: Privacybeleid
+  order: 300
 ---
-<%= render '/partials/_about_sub_navbar.*', selected: 'privacy' %>
+
 <h1 class="title is-1 has-text-centered" id="top">Privacybeleid</h1>
 <div id="table-of-contents" class="menu column is-4">
   <p class="menu-label">

content/about/sponsorende-leden.erb

@@ -1,8 +1,12 @@
 ---
 narrow_page: true
+subnavigation:
+  bar: about
+  identifier: sponsorende-leden
+  name: Sponsorende leden
+  order: 700
 ---
 
-<%= render '/partials/_about_sub_navbar.*', selected: 'sponsoring-members' %>
 <h1 class='title is-1 has-text-centered'>Sponsorende leden</h1>
 
 <div id='sponsoring-members' class="content">

content/about/statuten.md

@@ -1,9 +1,12 @@
 ---
 narrow_page: true
+subnavigation:
+  bar: about
+  identifier: statuten
+  name: Statuten
+  order: 200
 ---
 
-<%= render '/partials/_about_sub_navbar.*', selected: 'statuten' %>
-
 # Statuten
 {:.title.is-1.has-text-centered}
 

content/about/verslagen.erb

@@ -1,8 +1,12 @@
 ---
 narrow_page: true
+subnavigation:
+  bar: about
+  identifier: verslagen
+  name: Verslagen
+  order: 600
 ---
 
-<%= render '/partials/_about_sub_navbar.*', selected: 'verslagen' %>
 <h1 class="title is-1 has-text-centered">Reports</h1>
 
 <div class="content">

layouts/generic.erb

@@ -4,6 +4,9 @@
   </header>
   <main class="section">
     <% if item[:narrow_page] %>
+    <% if item[:subnavigation] %>
+    <%= render '/partials/_sub_navbar.*', selected: item[:subnavigation][:identifier] %>
+    <% end %>
     <div class="columns">
       <article class="column is-8 is-offset-2 <%= 'toc-container' if @item[:toc] %>">
     <% end %>

layouts/partials/_about_sub_navbar.erb

@@ -1,11 +0,0 @@
-<div class="subnav tabs">
-  <ul>
-    <li class="<%= 'is-active' if @selected == 'about'%>"><a href="/about/about">Zeus WPI</a></li>
-    <li class="<%= 'is-active' if @selected == 'statuten'%>"><a href="/about/statuten">Statuten</a></li>
-    <li class="<%= 'is-active' if @selected == 'privacy'%>"><a href="/about/privacy">Privacybeleid</a></li>
-    <li class="<%= 'is-active' if @selected == 'historiek'%>"><a href="/about/historiek">Historiek</a></li>
-    <li class="<%= 'is-active' if @selected == 'oud-bestuur'%>"><a href="/about/oud-bestuur">Oud-bestuur</a></li>
-    <li class="<%= 'is-active' if @selected == 'verslagen'%>"><a href="/about/verslagen">Verslagen</a></li>
-    <li class="<%= 'is-active' if @selected == 'sponsoring-members'%>"><a href="/about/sponsorende-leden">Sponsorende leden</a></li>
-  </ul>
-</div>

layouts/partials/_sub_navbar.erb

@@ -0,0 +1,11 @@
+<div class="subnav tabs is-centered">
+  <ul>
+    <% subnavigables(@item[:subnavigation][:bar]).map { |e| e[:subnavigation] }.each do |nav| %>
+    <li class="<%= 'is-active' if @selected == nav[:identifier] %>">
+      <a href="<%= "/#{nav[:bar]}/#{nav[:identifier]}" %>">
+        <%= nav[:name] %>
+      </a>
+    </li>
+    <% end %>
+  </ul>
+</div>

lib/helpers/nav.rb

@@ -12,4 +12,11 @@ module NavigationHelper
   def navigables
     items.select { |i| i[:navigable] }.sort_by { |x| x[:order] || 10_000 }
   end
+
+
+  def subnavigables(bar)
+    items
+      .select { |i| i.attributes.dig(:subnavigation, :bar) == bar }
+      .sort_by { |x| x[:subnavigation][:order] || 10_000 }
+  end
 end