Expandable/dropdown menus

app/components/header/navigation_component.html.erb

@@ -1,7 +1,33 @@
-<nav id="primary-navigation" class="hidden-mobile" data-navigation-target="nav" aria-label="Primary navigation" role="navigation">
-  <ol class="primary" data-navigation-target="primary">
+<!-- mobile navigation -->
+<%= tag.nav id: "primary-navigation", class: "hidden-mobile", data: { "navigation-target": "nav", action: "click->navigation#handleNavMenuClick" }, "aria-label": "Primary navigation", role: "navigation" do %>
+  <%= tag.ol class: "primary", data: { "navigation-target": "primary" } do %>
     <% all_resources.each do |resource| %>
-      <%= nav_link(resource.title, resource.path) %>
+      <%= nav_link(resource, :mobile) %>
     <% end %>
-  </ol>
-</nav>
+  <% end %>
+<% end %>
+
+<!-- desktop dropdown navigation -->
+<%= tag.div id: "secondary-navigation", class: "desktop-menu-container hidden-mobile", data: { "navigation-target": "desktop", action: "click->navigation#handleNavMenuClick" }, "aria-label": "Secondary navigation", role: "navigation" do %>
+  <div class="category-links">
+    <% all_resources.each do |resource| %>
+      <% if resource.children? %>
+        <%= category_list(resource, :desktop, css_class: "category-links-list hidden-menu") %>
+      <% end %>
+    <% end %>
+  </div>
+
+  <div class="page-links">
+    <% all_resources.each do |resource| %>
+      <% if resource.subcategories.present? %>
+        <% resource.subcategories.each do |subcategory| %>
+          <%= page_list(resource, subcategory, :desktop, css_class: "page-links-list hidden-menu") %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+
+  <div class="key-links">
+  </div>
+
+<% end %>

app/components/header/navigation_component.rb

@@ -1,12 +1,13 @@
 module Header
   class NavigationComponent < ViewComponent::Base
-    attr_reader :resources, :extra_resources
+    attr_reader :resources, :extra_resources, :front_matter
 
-    def initialize(resources: nil, extra_resources: {})
+    def initialize(resources: nil, extra_resources: {}, front_matter: {})
       super
 
       @resources       = resources
       @extra_resources = build_additional_resource_nodes(extra_resources)
+      @front_matter    = front_matter
     end
 
     def before_render
@@ -19,14 +20,130 @@ def all_resources
 
   private
 
-    def nav_link(link_text, link_path)
-      tag.li class: class_name(link_path) do
-        link_to_unless_current(link_text, link_path, class: "link--black link--no-underline") { tag.div(link_text) }
+    def sync_mode(mode)
+      mode == :mobile ? :desktop : :mobile
+    end
+
+    def nav_link(resource, mode)
+      title = resource.title
+      path = resource.path
+      li_id = "#{path.parameterize}-#{mode}"
+      li_sync_id = "#{path.parameterize}-#{sync_mode(mode)}"
+      child_menu_id = category_list_id(resource, mode)
+      child_menu_sync_id = category_list_id(resource, sync_mode(mode))
+      child_menu_ids = [child_menu_id, child_menu_sync_id].join(" ")
+      li_css = ("active" if uri_is_root?(path) || first_uri_segment_matches_link?(path)).to_s
+      show_dropdown = resource.children?
+      link_css = "menu-link link link--black link--no-underline"
+      aria_attributes = show_dropdown ? { expanded: false, controls: child_menu_ids } : {}
+      tag.li id: li_id, class: li_css, data: { "sync-id": li_sync_id, "child-menu-id": child_menu_id, "child-menu-sync-id": child_menu_sync_id, "direct-link": !show_dropdown, "toggle-secondary-navigation": show_dropdown, action: "keydown.tab->navigation#handleMenuTab" } do
+        safe_join([
+          link_to(path, class: link_css, aria: aria_attributes) do
+            safe_join([
+              tag.span(title, class: "menu-title"),
+              contracted_icon(visible: show_dropdown),
+            ])
+          end,
+          if mode == :mobile && resource.children?
+            [
+              row_break,
+              category_list(resource, mode, css_class: "category-links-list hidden-menu hidden-desktop"),
+            ]
+          end,
+        ])
+      end
+    end
+
+    def category_list(resource, mode, css_class:)
+      tag.ol(class: css_class, id: category_list_id(resource, mode)) do
+        safe_join(
+          [
+            resource.children_without_subcategory.map do |child_resource|
+              nav_link(child_resource, mode)
+            end,
+            resource.subcategories.map do |category|
+              category_link(category, resource, mode)
+            end,
+            view_all_link(resource, mode),
+          ],
+        )
+      end
+    end
+
+    def category_list_id(resource, mode)
+      "#{resource.path.parameterize}-categories-#{mode}"
+    end
+
+    def category_link(subcategory, resource, mode)
+      title = subcategory
+      li_id = "#{resource.path.parameterize}-#{title.parameterize}-#{mode}"
+      li_sync_id = "#{resource.path.parameterize}-#{title.parameterize}-#{sync_mode(mode)}"
+      child_menu_id = page_list_id(resource, subcategory, mode)
+      child_menu_sync_id = page_list_id(resource, subcategory, sync_mode(mode))
+      child_menu_ids = [child_menu_id, child_menu_sync_id].join(" ")
+      li_css = ("active" if subcategory == front_matter["subcategory"]).to_s
+      link_css = "menu-link link link--black link--no-underline btn-as-link"
+      aria_attributes = { expanded: false, controls: child_menu_ids }
+      tag.li id: li_id, class: li_css, data: { "sync-id": li_sync_id, "child-menu-id": child_menu_id, "child-menu-sync-id": child_menu_sync_id, "direct-link": false, action: "keydown.tab->navigation#handleMenuTab" } do
+        safe_join(
+          [
+            tag.button(type: "button", class: link_css, aria: aria_attributes) do
+              safe_join(
+                [
+                  tag.span(title, class: "menu-title"),
+                  contracted_icon(visible: true),
+                ],
+              )
+            end,
+            row_break,
+            if mode == :mobile
+              page_list(resource, subcategory, mode, css_class: "page-links-list hidden-menu hidden-desktop")
+            end,
+          ],
+        )
+      end
+    end
+
+    def page_list_id(resource, subcategory, mode)
+      "#{resource.path.parameterize}-#{subcategory.parameterize}-pages-#{mode}"
+    end
+
+    def page_list(resource, subcategory, mode, css_class:)
+      tag.ol(class: css_class, id: page_list_id(resource, subcategory, mode)) do
+        safe_join(
+          [
+            resource.children_in_subcategory(subcategory).map do |child_resource|
+              nav_link(child_resource, mode)
+            end,
+          ],
+        )
       end
     end
 
-    def class_name(link_path)
-      "active" if uri_is_root?(link_path) || first_uri_segment_matches_link?(link_path)
+    def view_all_link(resource, mode)
+      title = "View all in #{resource.title}"
+      path = resource.path
+      id = "menu-view-all-#{path.parameterize}-#{mode}"
+      li_css = "view-all #{'active' if uri_is_root?(path)}"
+      link_css = "menu-link link link--black"
+
+      tag.li class: li_css, data: { id: id, "direct-link": true } do
+        safe_join([
+          link_to(path, class: link_css) do
+            tag.span(title, class: "menu-title")
+          end,
+        ])
+      end
+    end
+
+    def row_break
+      tag.div(class: "break", "aria-hidden": true)
+    end
+
+    def contracted_icon(visible: true)
+      if visible
+        tag.span(class: "nav-icon nav-icon__contracted", aria: { hidden: true })
+      end
     end
 
     def uri_is_root?(link_path)

app/components/header_component.html.erb

@@ -10,12 +10,15 @@
   <%= render Header::ExtraNavigationComponent.new(search_input_id: "searchbox__input--desktop") %>
   <%= render Header::LogoComponent.new %>
   <div class="menu-button" id="mobile-navigation-menu-button">
-    <%= tag.button(class: "menu-button__button", id: 'menu-toggle', aria: { expanded: false, controls: 'primary-navigation'}, data: { action: "click->navigation#toggleNav", "navigation-target" => "menu" }) do %>
+    <%= link_to(browse_path, class: "menu-button__button hidden-when-js-enabled") do %>
+      <span class="menu-button__text">Menu</span>
+    <% end %>
+    <%= tag.button(class: "menu-button__button hidden-when-js-disabled", id: 'menu-toggle', aria: { expanded: false, controls: 'primary-navigation'}, data: { action: "click->navigation#toggleNav", "navigation-target" => "menu" }) do %>
       <span class="menu-button__text">Menu</span>
       <span class="menu-button__icon"></span>
     <% end %>
   </div>
-  <%= render Header::NavigationComponent.new %>
+  <%= render Header::NavigationComponent.new(front_matter: front_matter) %>
 </header>
 
 <% if breadcrumbs %>

app/components/header_component.rb

@@ -1,9 +1,10 @@
 class HeaderComponent < ViewComponent::Base
-  attr_reader :breadcrumbs
+  attr_reader :breadcrumbs, :front_matter
 
-  def initialize(breadcrumbs: false)
+  def initialize(breadcrumbs: false, front_matter: {})
     super
 
     @breadcrumbs = breadcrumbs
+    @front_matter = front_matter
   end
 end

app/models/pages/navigation.rb

@@ -54,6 +54,26 @@ def children
         navigation.all_pages.select { |page| page.path.start_with?(path) && page.path != path }
       end
 
+      def children?
+        children.any?
+      end
+
+      def children_without_subcategory
+        children.select { |page| page.subcategory.nil? }
+      end
+
+      def children_in_subcategory(subcategory)
+        children.select { |page| page.subcategory == subcategory }
+      end
+
+      def subcategories
+        children.map(&:subcategory).compact.uniq
+      end
+
+      def subcategories?
+        subcategories.any?
+      end
+
       def menu?
         @menu
       end

app/views/layouts/category.html.erb

@@ -18,7 +18,7 @@
 
       <% grouped_categories(@page.path).each do |title, pages| %>
         <section class="container category__cards main-section">
-          <%= tag.h2(title, class: "heading--box-blue") %>
+          <%= tag.h2(title, id: title.parameterize, class: "heading--box-blue") %>
           <%= tag.nav(aria: { label: "#{title} category" }, class: "category__nav-cards inset") do %>
             <ul class="inset">
               <%= render(Categories::CardComponent.with_collection(pages, heading_tag: "h3")) %>

app/views/layouts/content.html.erb

@@ -3,7 +3,7 @@
     <%= render "sections/head" %>
     <%= body_tag do %>
       <%= render "sections/govuk_javascript" %>
-      <%= render HeaderComponent.new(breadcrumbs: true) %>
+      <%= render HeaderComponent.new(breadcrumbs: true, front_matter: @front_matter) %>
 
       <%= main_tag do %>
         <%= render Content::HeroComponent.new(@front_matter) %>

app/views/pages/browse.html.erb

@@ -0,0 +1,15 @@
+<!-- The <ul> element is dynamically generated -->
+<!-- //NOSONAR -->
+<h1>Menu</h1>
+<% Pages::Navigation.root_pages.each do |resource| %>
+  <h3>
+    <%= link_to(resource.title, resource.path) %>
+    <% if resource.subcategories? %>
+  </h3>
+     <ul>
+        <% resource.subcategories.map do |category| %>
+        <li><%= category %></li>
+        <% end %>
+      </ul>
+    <% end %>
+<% end %>