Skip to content

Commit

Permalink
Merge pull request #8381 from alphagov/560_transition_main_navigation…
Browse files Browse the repository at this point in the history 
…_bar_to_design_system

Transition main navigation bar to new design system.
  • Loading branch information
@farahTW
farahTW authored Nov 2, 2023
2 parents 457c423 + 8d8a9c5 commit ee8e3ce
Show file tree
Hide file tree
Showing 8 changed files with 376 additions and 103 deletions.
5 changes: 5 additions & 0 deletions app/controllers/admin/base_controller.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@ def render_design_system(design_system_view, legacy_view)
end
end

def show_new_header?
current_user.can_preview_design_system?
end
helper_method :show_new_header?

private

def new_design_system?
Expand Down
17 changes: 17 additions & 0 deletions app/helpers/admin/header_helper.rb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
module Admin::HeaderHelper
def sub_nav_item(name, path)
{
label: name,
href: path,
current: request.path.start_with?(path),
}
end

def main_nav_item(name, path)
{
text: name,
href: path,
active: request.path.end_with?(path),
}
end
end
24 changes: 10 additions & 14 deletions app/views/components/_sub_navigation.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
<%
items ||= []
%>
<%= tag.div class: "govuk-grid-row app-c-sub-navigation" do %>
<%= tag.div class: "govuk-grid-column-full" do %>
<%= tag.nav role: "navigation", aria: { label: "Sub Navigation" } do %>
<%= tag.ul class: "app-c-sub-navigation__list" do %>
<% items.each do |item| %>
<%
item_classes = %w( app-c-sub-navigation__list-item )
item_classes << "app-c-sub-navigation__list-item--current" if item[:current]
item_aria_attributes = { current: "page" } if item[:current]
%>
<%= tag.li class: item_classes do %>
<%= link_to item[:label], item[:href], class: "govuk-link govuk-link--no-visited-state govuk-link--no-underline app-c-sub-navigation__list-item-link", data: item[:data_attributes], aria: item_aria_attributes %>
<% end %>
<% end %>
<%= tag.nav class: "app-c-sub-navigation", role: "navigation", aria: { label: "Sub Navigation" } do %>
<%= tag.ul class: "app-c-sub-navigation__list" do %>
<% items.each do |item| %>
<%
item_classes = %w( app-c-sub-navigation__list-item )
item_classes << "app-c-sub-navigation__list-item--current" if item[:current]
item_aria_attributes = { current: "page" } if item[:current]
%>
<%= tag.li class: item_classes do %>
<%= link_to item[:label], item[:href], class: "govuk-link govuk-link--no-visited-state govuk-link--no-underline app-c-sub-navigation__list-item-link", data: item[:data_attributes], aria: item_aria_attributes %>
<% end %>
<% end %>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/layouts/admin.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<% end %>

<% content_for :navbar do %>
<%= render "shared/header", admin_template: true %>
<%= render "shared/legacy_header", admin_template: true %>
<% if t('admin.whats_new.show_banner') %>
<div class="govuk-design-system-styling">
<div class="<%= yield(:full_width) === "true" ? "app-width-container--full-width" : "container" %>">
Expand Down
12 changes: 8 additions & 4 deletions app/views/layouts/design_system.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,15 @@

<%= render "govuk_publishing_components/components/skip_link" %>

<div class="legacy-whitehall">
<div class="environment-<%= environment %> navbar-wrapper">
<%= render partial: "shared/header" %>
<% if show_new_header? %>
<%= render partial: "shared/header" %>
<% else %>
<div class="legacy-whitehall">
<div class="environment-<%= environment %> navbar-wrapper">
<%= render partial: "shared/legacy_header" %>
</div>
</div>
</div>
<% end %>

<div class="govuk-width-container">
<%= render "shared/phase_banner", {
Expand Down
134 changes: 50 additions & 84 deletions app/views/shared/_header.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,54 @@
<% environment_style = GovukAdminTemplate.environment_style %>
<% environment_label = GovukAdminTemplate.environment_label %>
<% environment = GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment %>
<% admin_template ||= false %>
<% organisation = current_user&.organisation %>
<% user = current_user %>

<header class="
masthead
navbar
navbar-default
navbar-inverse
navbar-static-top
<% if !t('admin.whats_new.show_banner') && admin_template %>add-bottom-margin<% end %>
<% if environment_style %>environment-indicator<% end %>" role="banner">
<div class="navbar-container container-fluid">
<div class="navbar-header">
<%# Bootstrap toggle for collapsed navbar content, used at smaller widths %>
<a class="navbar-toggle" data-toggle="collapse" data-target="header .navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<%= link_to "GOV.UK Whitehall", admin_root_path, :class => "navbar-brand" %>
<% if environment_label %>
<div class="environment-label">
<%= environment_label %>
</div>
<% end %>
</div>
<nav role="navigation" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><%= link_to "Dashboard", admin_root_path %></li>
<li><%= link_to "View website", Whitehall.public_root, class: "open_website" %></li>
</ul>
<div class="navbar-text pull-right remove-bottom-margin">
<ul class="list-inline">
<li>
<%= signon_link %>
</li>
<% if user_signed_in? %>
<li>
<%= link_to current_user.name, admin_user_path(current_user), id: "#user_settings" %>
</li>
<li>
<%= link_to "Logout", "/auth/gds/sign_out" %>
</li>
<% end %>
<%= admin_users_header_link %>
</ul>
</div>
</nav>
</div>
<%= render "govuk_publishing_components/components/layout_header", {
product_name: "Whitehall Publisher",
environment: environment,
navigation_items: [
main_nav_item("Dashboard", admin_root_path),
{
text: "View website",
href: Whitehall.public_root,
},
{
text: "Switch app",
href: Plek.external_url_for("signon"),
},
*(
if user_signed_in?
[
main_nav_item(user.name, admin_user_path(user)),
{
text: "Logout",
href: "/auth/gds/sign_out",
}]
end),
main_nav_item("All users", admin_users_path),
],
} %>

<div class="container-fluid">
<ul id="global-nav" class="masthead-tabs list-unstyled">
<li class="masthead-tab-item js-create-new create-new" data-module="navbar-toggle">
<a href="#new-document-menu" class="toggler js-navbar-toggle__toggler" id="new-document-label">New document</a>
<%= document_creation_dropdown %>
</li>
<%= admin_documents_header_link %>
<%= admin_statistics_announcements_link %>
<%= admin_featured_header_link %>
<%= admin_user_organisation_header_link %>
<li class="js-more-nav masthead-tab-item" data-module="navbar-toggle">
<a href="#more-links-menu" id="more-links-label" class="toggler js-navbar-toggle__toggler">More</a>
<ul id="more-links-menu" class="masthead-menu masthead-menu-right js-hidden unstyled js-navbar-toggle__menu hide-before-js-module-init" role="menu" aria-labelledby="more-links-label">
<%= admin_organisations_header_menu_link %>
<%= admin_policy_groups_header_menu_link %>
<%= admin_roles_header_menu_link %>
<%= admin_people_header_menu_link %>
<%= admin_topical_events_header_menu_link %>
<%= admin_worldwide_organisations_header_menu_link %>
<%= admin_world_location_news_header_menu_link %>
<%= admin_fields_of_operation_header_menu_link %>
<%= admin_cabinet_ministers_header_menu_link %>
<%= admin_get_involved_header_menu_link %>
<%= admin_sitewide_settings_header_menu_link %>
<%= admin_governments_header_menu_link %>
</ul>
</li>
</ul>
</div>
<% if admin_template %>
<section class="notices">
<%= render partial: "shared/notices" %>
</section>
<% end %>
</header>
<div class="govuk-width-container">
<%= render "components/sub_navigation", {
items: [
sub_nav_item("New document", admin_new_document_path),
sub_nav_item("Documents", admin_editions_path),
sub_nav_item("Statistics announcements", admin_statistics_announcements_path),
*(
if user_signed_in? && organisation
[
sub_nav_item("Featured documents", features_admin_organisation_path(organisation, locale: nil)),
sub_nav_item("Corporate information", admin_organisation_corporate_information_pages_path(organisation)),
]
end),
sub_nav_item("More", admin_more_path),
],
} %>
</div>

<% if admin_template %>
<section class="notices">
<%= render partial: "shared/notices" %>
</section>
<% end %>
88 changes: 88 additions & 0 deletions app/views/shared/_legacy_header.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<% environment_style = GovukAdminTemplate.environment_style %>
<% environment_label = GovukAdminTemplate.environment_label %>
<% environment = GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment %>
<% admin_template ||= false %>

<header class="
masthead
navbar
navbar-default
navbar-inverse
navbar-static-top
<% if !t('admin.whats_new.show_banner') && admin_template %>add-bottom-margin<% end %>
<% if environment_style %>environment-indicator<% end %>" role="banner">
<div class="navbar-container container-fluid">
<div class="navbar-header">
<%# Bootstrap toggle for collapsed navbar content, used at smaller widths %>
<a class="navbar-toggle" data-toggle="collapse" data-target="header .navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<%= link_to "GOV.UK Whitehall", admin_root_path, :class => "navbar-brand" %>
<% if environment_label %>
<div class="environment-label">
<%= environment_label %>
</div>
<% end %>
</div>
<nav role="navigation" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><%= link_to "Dashboard", admin_root_path %></li>
<li><%= link_to "View website", Whitehall.public_root, class: "open_website" %></li>
</ul>
<div class="navbar-text pull-right remove-bottom-margin">
<ul class="list-inline">
<li>
<%= signon_link %>
</li>
<% if user_signed_in? %>
<li>
<%= link_to current_user.name, admin_user_path(current_user), id: "#user_settings" %>
</li>
<li>
<%= link_to "Logout", "/auth/gds/sign_out" %>
</li>
<% end %>
<%= admin_users_header_link %>
</ul>
</div>
</nav>
</div>

<div class="container-fluid">
<ul id="global-nav" class="masthead-tabs list-unstyled">
<li class="masthead-tab-item js-create-new create-new" data-module="navbar-toggle">
<a href="#new-document-menu" class="toggler js-navbar-toggle__toggler" id="new-document-label">New document</a>
<%= document_creation_dropdown %>
</li>
<%= admin_documents_header_link %>
<%= admin_statistics_announcements_link %>
<%= admin_featured_header_link %>
<%= admin_user_organisation_header_link %>
<li class="js-more-nav masthead-tab-item" data-module="navbar-toggle">
<a href="#more-links-menu" id="more-links-label" class="toggler js-navbar-toggle__toggler">More</a>
<ul id="more-links-menu" class="masthead-menu masthead-menu-right js-hidden unstyled js-navbar-toggle__menu hide-before-js-module-init" role="menu" aria-labelledby="more-links-label">
<%= admin_organisations_header_menu_link %>
<%= admin_policy_groups_header_menu_link %>
<%= admin_roles_header_menu_link %>
<%= admin_people_header_menu_link %>
<%= admin_topical_events_header_menu_link %>
<%= admin_worldwide_organisations_header_menu_link %>
<%= admin_world_location_news_header_menu_link %>
<%= admin_fields_of_operation_header_menu_link %>
<%= admin_cabinet_ministers_header_menu_link %>
<%= admin_get_involved_header_menu_link %>
<%= admin_sitewide_settings_header_menu_link %>
<%= admin_governments_header_menu_link %>
</ul>
</li>
</ul>
</div>
<% if admin_template %>
<section class="notices">
<%= render partial: "shared/notices" %>
</section>
<% end %>
</header>
Loading

0 comments on commit ee8e3ce

Please sign in to comment.