From 49cb6e010b2398117ac9cf9d9e6ec3512ae85c44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 28 Jan 2023 15:56:52 +0100
Subject: [PATCH] Extract component to render the responsive menu

We were using the same code for the button in both the public and admin
headers, so we're removing the duplication.

Since the menu and the button must go together, and the contents of the
menu are different for different layouts, we're passing these contents
using a block.

Note the ID of the menu was `responsive-menu` in the public section but
`responsive_menu` in the admin section. Since we usually use underscores
for IDs and dashes for classes, we're keeping the one with the
underscore.
---
 app/components/layout/admin_header_component.html.erb | 11 ++---------
 .../layout/responsive_menu_component.html.erb         | 10 ++++++++++
 app/components/layout/responsive_menu_component.rb    |  2 ++
 app/views/layouts/_header.html.erb                    | 11 ++---------
 spec/support/common_actions/users.rb                  |  4 ++--
 5 files changed, 18 insertions(+), 20 deletions(-)
 create mode 100644 app/components/layout/responsive_menu_component.html.erb
 create mode 100644 app/components/layout/responsive_menu_component.rb

diff --git a/app/components/layout/admin_header_component.html.erb b/app/components/layout/admin_header_component.html.erb
index 903cc4541..f843abdf4 100644
--- a/app/components/layout/admin_header_component.html.erb
+++ b/app/components/layout/admin_header_component.html.erb
@@ -17,16 +17,9 @@
       </h1>
 
       <% if show_account_menu? %>
-        <div data-responsive-toggle="responsive_menu" data-hide-for="medium">
-          <button class="menu-button" type="button" data-toggle="responsive_menu">
-            <span class="menu-icon"></span>
-            <span><%= t("application.menu") %></span>
-          </button>
-        </div>
-
-        <div id="responsive_menu" class="responsive-menu">
+        <%= render Layout::ResponsiveMenuComponent.new do %>
           <%= render Layout::AccountMenuComponent.new(user) %>
-        </div>
+        <% end %>
       <% end %>
     </div>
   </div>
diff --git a/app/components/layout/responsive_menu_component.html.erb b/app/components/layout/responsive_menu_component.html.erb
new file mode 100644
index 000000000..3a0e6feab
--- /dev/null
+++ b/app/components/layout/responsive_menu_component.html.erb
@@ -0,0 +1,10 @@
+<span data-responsive-toggle="responsive_menu" data-hide-for="medium">
+  <button type="button" class="menu-button" data-toggle>
+    <span class="menu-icon"></span>
+    <%= t("application.menu") %>
+  </button>
+</span>
+
+<div id="responsive_menu" class="responsive-menu">
+  <%= content %>
+</div>
diff --git a/app/components/layout/responsive_menu_component.rb b/app/components/layout/responsive_menu_component.rb
new file mode 100644
index 000000000..baa98c998
--- /dev/null
+++ b/app/components/layout/responsive_menu_component.rb
@@ -0,0 +1,2 @@
+class Layout::ResponsiveMenuComponent < ApplicationComponent
+end
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 24c200df7..bdbbf3dde 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -17,14 +17,7 @@
       <% end %>
     </h1>
 
-    <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
-      <button type="button" class="menu-button" data-toggle>
-        <span class="menu-icon"></span>
-        <%= t("application.menu") %>
-      </button>
-    </span>
-
-    <div id="responsive-menu" class="responsive-menu">
+    <%= render Layout::ResponsiveMenuComponent.new do %>
       <%= render Layout::AccountMenuComponent.new(current_user) %>
 
       <div class="show-for-small-only">
@@ -33,7 +26,7 @@
           <%= render "shared/top_links" %>
         </div>
       </div>
-    </div>
+    <% end %>
   </div>
 
   <div id="navigation_bar" class="subnavigation">
diff --git a/spec/support/common_actions/users.rb b/spec/support/common_actions/users.rb
index 624b3854f..01caf46cf 100644
--- a/spec/support/common_actions/users.rb
+++ b/spec/support/common_actions/users.rb
@@ -75,11 +75,11 @@ module Users
   end
 
   def expect_to_be_signed_in
-    expect(find("#responsive-menu")).to have_content "My account"
+    expect(find("#responsive_menu")).to have_content "My account"
   end
 
   def expect_not_to_be_signed_in
-    expect(find("#responsive-menu")).not_to have_content "My account"
+    expect(find("#responsive_menu")).not_to have_content "My account"
   end
 
   def do_login_for(user, management:)