From 5cd3a1672ec9af1ad9e88663fa42ba42c3bd8acc Mon Sep 17 00:00:00 2001
From: Martyn Whitwell <martyn.whitwell@gmail.com>
Date: Thu, 18 Apr 2024 16:33:47 +0100
Subject: [PATCH] simple non-js menu list

---
 app/components/header_component.html.erb |  5 ++++-
 app/views/pages/browse.html.erb          | 16 ++++++++++++++++
 app/webpacker/packs/js_enabled.js        |  4 ++--
 app/webpacker/styles/utility.scss        | 14 ++++++++++++++
 config/routes.rb                         |  1 +
 5 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 app/views/pages/browse.html.erb

diff --git a/app/components/header_component.html.erb b/app/components/header_component.html.erb
index 7daf452eb6..e687d6e7bb 100644
--- a/app/components/header_component.html.erb
+++ b/app/components/header_component.html.erb
@@ -10,7 +10,10 @@
   <%= 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 %>
diff --git a/app/views/pages/browse.html.erb b/app/views/pages/browse.html.erb
new file mode 100644
index 0000000000..88ac506aee
--- /dev/null
+++ b/app/views/pages/browse.html.erb
@@ -0,0 +1,16 @@
+<h1>Content List</h1>
+
+<%= tag.ul do %>
+  <% Pages::Navigation.root_pages.each do |resource| %>
+    <li>
+      <%= link_to(resource.title, resource.path) %>
+      <% if resource.subcategories? %>
+        <ul>
+          <% resource.subcategories.map do |category| %>
+          <li><%= category %></li>
+          <% end %>
+        </ul>
+      <% end %>
+    </li>
+  <% end %>
+<% end %>
diff --git a/app/webpacker/packs/js_enabled.js b/app/webpacker/packs/js_enabled.js
index 664271c87f..3153bcd577 100644
--- a/app/webpacker/packs/js_enabled.js
+++ b/app/webpacker/packs/js_enabled.js
@@ -1,2 +1,2 @@
-document.documentElement.classList.toggle('js-enabled');
-document.body.classList.toggle('js-enabled');
+document.documentElement.classList.add('js-enabled');
+document.body.classList.add('js-enabled');
diff --git a/app/webpacker/styles/utility.scss b/app/webpacker/styles/utility.scss
index 2ca09d831d..359225d941 100644
--- a/app/webpacker/styles/utility.scss
+++ b/app/webpacker/styles/utility.scss
@@ -93,6 +93,20 @@ $chevron-direction-map: (
 }
 /* stylelint-enable */
 
+html.js-enabled {
+  // hide components if javascript is enabled
+  .hidden-when-js-enabled {
+    display: none;
+  }
+}
+
+html:not(.js-enabled) {
+  // hide components if javascript is disabled
+  .hidden-when-js-disabled {
+    display: none;
+  }
+}
+
 // Mixins for targetting specific legacy/quirky/inferior browsers
 
 @mixin safari-only {
diff --git a/config/routes.rb b/config/routes.rb
index ae9c172e67..218061290e 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -71,6 +71,7 @@
   get "/privacy-policy", to: "pages#privacy_policy", as: :privacy_policy
   get "/cookies", to: "pages#cookies", as: :cookies
   get "/session-expired", to: "pages#session_expired", as: :session_expired
+  get "/browse", to: "pages#browse", as: :browse
 
   get "/welcome", to: "pages#welcome", as: :welcome_guide
   get "/welcome/my-journey-into-teaching", to: "pages#welcome_my_journey_into_teaching", as: :welcome_my_journey_into_teaching