simple non-js menu list

DFE-Digital · Apr 18, 2024 · 5cd3a16 · 5cd3a16
1 parent f206a34
commit 5cd3a16
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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