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

@@ -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>

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>

app/components/layout/responsive_menu_component.rb

@@ -0,0 +1,2 @@
+class Layout::ResponsiveMenuComponent < ApplicationComponent
+end