Reuse primary navigation component and add sub navigation for support users

app/components/navigation_component.html.erb

@@ -0,0 +1,17 @@
+<nav class="app-<%= level %>-navigation" aria-label="<%= level %>">
+  <div class="govuk-width-container">
+    <ul class="app-<%= level %>-navigation__list">
+      <% items.each do |item| %>
+        <% if item.current %>
+          <li class="app-<%= level %>-navigation__item app-<%= level %>-navigation__item--current">
+            <%= govuk_link_to item[:text], item[:href], class: "app-#{level}-navigation__link", aria: { current: "page" } %>
+          </li>
+        <% else %>
+          <li class="app-<%= level %>-navigation__item">
+            <%= govuk_link_to item[:text], item[:href], class: "app-#{level}-navigation__link" %>
+          </li>
+        <% end %>
+      <% end %>
+    </ul>
+  </div>
+</nav>

app/components/navigation_component.rb

@@ -0,0 +1,13 @@
+class NavigationComponent < ViewComponent::Base
+  attr_reader :items, :level
+
+  def initialize(items:, level: "primary")
+    @items = items
+    @level = level
+    super
+  end
+
+  def highlighted_tab?(item, _path)
+    item[:current]
+  end
+end

app/components/primary_navigation_component.html.erb

@@ -1,17 +0,0 @@
-<nav class="app-primary-navigation" aria-label="primary">
-  <div class="govuk-width-container">
-    <ul class="app-primary-navigation__list">
-      <% items.each do |item| %>
-        <% if item.current %>
-          <li class="app-primary-navigation__item app-primary-navigation__item--current">
-            <%= govuk_link_to item[:text], item[:href], class: "app-primary-navigation__link", aria: { current: "page" } %>
-          </li>
-        <% else %>
-          <li class="app-primary-navigation__item">
-            <%= govuk_link_to item[:text], item[:href], class: "app-primary-navigation__link" %>
-          </li>
-        <% end %>
-      <% end %>
-    </ul>
-  </div>
-</nav>

app/components/primary_navigation_component.rb

@@ -1,12 +0,0 @@
-class PrimaryNavigationComponent < ViewComponent::Base
-  attr_reader :items
-
-  def initialize(items:)
-    @items = items
-    super
-  end
-
-  def highlighted_tab?(item, _path)
-    item[:current]
-  end
-end

app/frontend/styles/_primary-navigation.scss

@@ -1,14 +1,21 @@
-.app-primary-navigation {
+.app-primary-navigation,
+.app-sub-navigation {
   @include govuk-font(19, $weight: bold);
-  background-color: govuk-colour("light-grey");
   border-bottom: 1px solid $govuk-border-colour;
 }
 
-.govuk-phase-banner + .app-primary-navigation {
+.app-primary-navigation{
+  background-color: govuk-colour("light-grey");
+}
+
+
+.govuk-phase-banner + .app-primary-navigation,
+.app-sub-navigation {
   margin-top: -1px;
 }
 
-.app-primary-navigation__list {
+.app-primary-navigation__list, 
+.app-sub-navigation__list {
   @include govuk-clearfix;
   left: govuk-spacing(-3);
   list-style: none;
@@ -19,7 +26,8 @@
   width: calc(100% + #{govuk-spacing(6)});
 }
 
-.app-primary-navigation__item {
+.app-primary-navigation__item,
+.app-sub-navigation__item {
   box-sizing: border-box;
   display: block;
   float: left;
@@ -29,7 +37,8 @@
   position: relative;
 }
 
-.app-primary-navigation__item--current {
+.app-primary-navigation__item--current,
+.app-sub-navigation__item--current {
   border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
 
   &:hover {
@@ -41,13 +50,15 @@
   }
 }
 
-.app-primary-navigation__item--align-right {
+.app-primary-navigation__item--align-right, 
+.app-sub-navigation__item--align-right {
   @include govuk-media-query($from: tablet) {
     float: right;
   }
 }
 
-.app-primary-navigation__link {
+.app-primary-navigation__link,
+.app-sub-navigation__link {
   @include govuk-link-common;
   @include govuk-link-style-no-visited-state;
   @include govuk-link-style-no-underline;
@@ -64,6 +75,7 @@
   }
 }
 
-.app-primary-navigation__item--current .app-primary-navigation__link:hover {
+.app-primary-navigation__item--current .app-primary-navigation__link:hover,
+.app-sub-navigation__item--current .app-sub-navigation__link:hover {
   text-decoration: none;
 }

app/helpers/navigation_items_helper.rb

@@ -17,10 +17,17 @@ module NavigationItemsHelper
     end
   end
 
+  def secondary_items(path, current_organisation_id)
+    [
+      NavigationItem.new("Logs", "/organisations/#{current_organisation_id}/logs", organisation_logs_current?(path, current_organisation_id)),
+      NavigationItem.new("About this organisation", "/organisations/#{current_organisation_id}", about_organisation_current?(path, current_organisation_id)),
+    ]
+  end
+
 private
 
   def logs_current?(path)
-    path.include?("/logs")
+    path == "/logs"
   end
 
   def users_current?(path)
@@ -30,4 +37,12 @@ private
   def organisation_current?(path)
     path.include?("/organisations") && !path.include?("/users")
   end
+
+  def about_organisation_current?(path, organisation_id)
+    path.include?("/organisations/#{organisation_id}/details") || path.include?("/organisations/#{organisation_id}/edit")
+  end
+
+  def organisation_logs_current?(path, organisation_id)
+    path == "/organisations/#{organisation_id}/logs"
+  end
 end

app/views/layouts/application.html.erb

@@ -65,8 +65,9 @@
     ) %>
 
     <% if !current_user.nil? %>
-      <%= render PrimaryNavigationComponent.new(
+      <%= render NavigationComponent.new(
         items: primary_items(request.path, current_user),
+        level: "primary"
       ) %>
     <% end %>
 

app/views/organisations/logs.erb

@@ -4,6 +4,12 @@
   <span class="govuk-caption-l"><%= @organisation.name %></span>
   <%= content_for(:title) %>
 </h1>
+<div class="govuk-!-margin-bottom-4">
+<%= render NavigationComponent.new(
+    items: secondary_items(request.path, @organisation.id),
+    level: "sub"
+  ) %>
+</div>
 <div class="app-filter-layout" data-controller="filter-layout">
   <div class="govuk-button-group app-filter-toggle">
     <%= govuk_button_to "Create a new lettings log", case_logs_path %>

spec/components/primary_navigation_component_spec.rb

@@ -1,6 +1,6 @@
 require "rails_helper"
 
-RSpec.describe PrimaryNavigationComponent, type: :component do
+RSpec.describe NavigationComponent, type: :component do
   let(:items) do
     [
       NavigationItemsHelper::NavigationItem.new("Organisations", "/organisations", true),

spec/requests/organisations_controller_spec.rb

@@ -397,6 +397,11 @@ RSpec.describe OrganisationsController, type: :request do
         it "does not have specific organisation filter" do
           expect(page).not_to have_content("Specific organisation")
         end
+
+        it "has a sub-navigation with correct tabs" do
+          expect(page).to have_css(".app-sub-navigation")
+          expect(page).to have_content("About this organisation")
+        end
       end
     end