Add navigation tab, remove the old navigation

app/components/tab_navigation_component.html.erb

@@ -1,15 +0,0 @@
-<nav class="app-tab-navigation" aria-label="sub menu">
-  <ul class="app-tab-navigation__list">
-    <% items.each do |item| %>
-      <% if item.fetch(:current, false) || current_page?(strip_query(item.fetch(:url))) %>
-        <li class="app-tab-navigation__item app-tab-navigation__item--current">
-          <%= govuk_link_to item[:name], item[:url], class: "app-tab-navigation__link", aria: { current: "page" } %>
-        </li>
-      <% else %>
-        <li class="app-tab-navigation__item">
-          <%= govuk_link_to item[:name], item[:url], class: "app-tab-navigation__link" %>
-        </li>
-      <% end %>
-    <% end %>
-  </ul>
-</nav>

app/components/tab_navigation_component.rb

@@ -1,14 +0,0 @@
-class TabNavigationComponent < ViewComponent::Base
-  attr_reader :items
-
-  def initialize(items:)
-    @items = items
-    super
-  end
-
-  def strip_query(url)
-    url = Addressable::URI.parse(url)
-    url.query_values = nil
-    url.to_s
-  end
-end

app/controllers/organisations_controller.rb

@@ -1,8 +1,14 @@
 class OrganisationsController < ApplicationController
-  before_action :authenticate_user!
-  before_action :find_resource
+  before_action :authenticate_user!, except: [:index]
+  before_action :find_resource, except: [:index]
   before_action :authenticate_scope!
 
+  def index
+    if !current_user.support?
+      redirect_to user_path(current_user)
+    end
+  end
+
   def show
     redirect_to details_organisation_path(@organisation)
   end
@@ -41,10 +47,11 @@ private
   end
 
   def authenticate_scope!
-    render_not_found if current_user.organisation != @organisation
+    render_not_found if current_user.organisation != @organisation && !current_user.support?
   end
 
   def find_resource
+    return if current_user.support?
     @organisation = Organisation.find(params[:id])
   end
 end

app/controllers/users_controller.rb

@@ -5,6 +5,12 @@ class UsersController < ApplicationController
   before_action :find_resource, except: %i[new create]
   before_action :authenticate_scope!, except: %i[new]
 
+  def index
+    if !current_user.support?
+      redirect_to user_path(@user)
+    end
+  end
+
   def update
     if @user.update(user_params)
       if @user == current_user

app/frontend/styles/_primary-navigation.scss

@@ -0,0 +1,69 @@
+.app-primary-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 {
+    margin-top: -1px;
+  }
+  
+  .app-primary-navigation__list {
+    @include govuk-clearfix;
+    left: govuk-spacing(-3);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    right: govuk-spacing(-3);
+    width: calc(100% + #{govuk-spacing(6)});
+  }
+  
+  .app-primary-navigation__item {
+    box-sizing: border-box;
+    display: block;
+    float: left;
+    line-height: 50px;
+    height: 50px;
+    padding: 0 govuk-spacing(3);
+    position: relative;
+  }
+  
+  .app-primary-navigation__item--current {
+    border-bottom: $govuk-border-width-narrow solid $govuk-link-colour;
+  
+    &:hover {
+      border-bottom-color: $govuk-link-hover-colour;
+    }
+  
+    &:active {
+      border-bottom-color: $govuk-link-active-colour;
+    }
+  }
+  
+  .app-primary-navigation__item--align-right {
+    @include govuk-media-query($from: tablet) {
+      float: right;
+    }
+  }
+  
+  .app-primary-navigation__link {
+    @include govuk-link-common;
+    @include govuk-link-style-no-visited-state;
+    @include govuk-link-style-no-underline;
+    @include govuk-typography-weight-bold;
+  
+    // Extend the touch area of the link to the list
+    &:after {
+      bottom: 0;
+      content: "";
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+  
+  .app-primary-navigation__item--current .app-primary-navigation__link:hover {
+    text-decoration: none;
+  }

app/frontend/styles/_tab-navigation.scss

@@ -1,76 +0,0 @@
-.app-tab-navigation {
-  @include govuk-font(19, $weight: bold);
-  @include govuk-responsive-margin(6, "bottom");
-}
-
-.app-tab-navigation__list {
-  @include govuk-clearfix;
-  left: govuk-spacing(-3);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  right: govuk-spacing(-3);
-  width: calc(100% + #{govuk-spacing(6)});
-
-  @include govuk-media-query($from: tablet) {
-    box-shadow: inset 0 -1px 0 $govuk-border-colour;
-  }
-}
-
-.app-tab-navigation__item {
-  box-sizing: border-box;
-  display: block;
-  line-height: 40px;
-  height: 40px;
-  padding: 0 govuk-spacing(3);
-
-  @include govuk-media-query($from: tablet) {
-    box-shadow: none;
-    display: block;
-    float: left;
-    line-height: 50px;
-    height: 50px;
-    padding: 0 govuk-spacing(3);
-    position: relative;
-  }
-}
-
-.app-tab-navigation__item--current {
-  @include govuk-media-query($until: tablet) {
-    border-left: 4px solid $govuk-link-colour;
-    padding-left: 11px;
-  }
-
-  @include govuk-media-query($from: tablet) {
-    border-bottom: 4px solid $govuk-link-colour;
-    padding-left: govuk-spacing(3);
-  }
-}
-
-.app-tab-navigation__link {
-  @include govuk-link-common;
-  @include govuk-link-style-no-visited-state;
-  @include govuk-link-style-no-underline;
-  @include govuk-typography-weight-bold;
-
-  &:not(:focus):hover {
-    color: $govuk-link-colour;
-  }
-
-  // Extend the touch area of the link to the list
-  &:after {
-    bottom: 0;
-    content: "";
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-}
-
-.app-tab-navigation__item--current .app-tab-navigation__link {
-  &:hover {
-    text-decoration: none;
-  }
-}

app/frontend/styles/application.scss

@@ -23,12 +23,12 @@ $govuk-new-link-styles: true;
 @import "input";
 @import "related-navigation";
 @import "section-skip-link";
-@import "tab-navigation";
 @import "table-group";
 @import "task-list";
 @import "template";
 @import "pagination";
 @import "panel";
+@import "primary-navigation";
 
 // App utilities
 .app-\!-colour-muted {
@@ -53,3 +53,11 @@ $govuk-new-link-styles: true;
     width: 100%;
   }
 }
+
+.govuk-header__logo {
+  width: 80%;
+}
+
+.govuk-header__content {
+  width: 20%;
+}

app/views/layouts/_primary_navigation.html.erb

@@ -0,0 +1,18 @@
+<nav class="app-primary-navigation">
+<div class="govuk-width-container">
+  <ul class="app-primary-navigation__list">   
+
+  <% items.each do |item| %>
+    <% if current_page?(item.fetch(:url)) || current_page?("#{item.fetch(:url)}/details") %>
+      <li class="app-primary-navigation__item app-primary-navigation__item--current">
+        <%= govuk_link_to item[:name], item[:url], class: 'app-primary-navigation__link', aria: { current: 'page' } %>
+      </li>
+    <% else %>
+      <li class="app-primary-navigation__item">
+        <%= govuk_link_to item[:name], item[:url], class: 'app-primary-navigation__link' %>
+      </li>
+    <% end %>
+  <% end %>
+    </ul>
+</div>
+</nav>

app/views/layouts/application.html.erb

@@ -66,7 +66,26 @@
         <%= content_for(:breadcrumbs) %>
         <%= content_for(:before_content) %>
       </aside>
+    </div>
 
+    <% if !current_user.nil? %>
+      <% if current_user.support? %>
+        <% items = [
+          { name: t("Organisations"), url: "/organisations" },
+          { name: t("Users"), url: "/users" },
+          { name: t("Logs"), url: case_logs_path },
+        ] %>
+      <% else %>
+        <% items = [
+          { name: t("Logs"), url: case_logs_path },
+          { name: t("Users"), url: users_organisation_path(current_user.organisation) },
+          { name: t("About your organisation"), url: "/organisations/#{current_user.organisation.id}" },
+        ] %>
+      <% end %>
+      <%= render partial: "layouts/primary_navigation", locals: {items: items} %>
+    <% end %>
+
+    <div class="govuk-width-container">
       <main class="govuk-main-wrapper" id="main-content" role="main">
         <% if flash.notice && !flash.notice.include?("translation missing") %>
           <%= govuk_notification_banner(

app/views/layouts/organisations.html.erb

@@ -5,8 +5,6 @@
 
   <% items = tab_items(current_user) %>
 
-  <%= render TabNavigationComponent.new(items:) %>
-
   <h2 class="govuk-visually-hidden"><%= content_for(:tab_title) %></h2>
 
   <%= content_for?(:organisations_content) ? yield(:organisations_content) : yield %>