consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract component to render the responsive menu

Browse Source 
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.
This commit is contained in:
Javi Martín
2023-01-28 15:56:52 +01:00
parent b489923f66
commit 49cb6e010b
5 changed files with 18 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/components/layout/admin_header_component.html.erb
View File

@@ -17,16 +17,9 @@
</h1> </h1>
<% if show_account_menu? %> <% if show_account_menu? %>
<div data-responsive-toggle="responsive_menu" data-hide-for="medium"> <%= render Layout::ResponsiveMenuComponent.new do %>
<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::AccountMenuComponent.new(user) %> <%= render Layout::AccountMenuComponent.new(user) %>
</div> <% end %>
<% end %> <% end %>
</div> </div>
</div> </div>

10
app/components/layout/responsive_menu_component.html.erb Normal file
View File

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

2
app/components/layout/responsive_menu_component.rb Normal file
View File

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

11
app/views/layouts/_header.html.erb
View File

@@ -17,14 +17,7 @@
<% end %> <% end %>
</h1> </h1>
<span data-responsive-toggle="responsive-menu" data-hide-for="medium"> <%= render Layout::ResponsiveMenuComponent.new do %>
<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::AccountMenuComponent.new(current_user) %> <%= render Layout::AccountMenuComponent.new(current_user) %>
<div class="show-for-small-only"> <div class="show-for-small-only">
@@ -33,7 +26,7 @@
<%= render "shared/top_links" %> <%= render "shared/top_links" %>
</div> </div>
</div> </div>
</div> <% end %>
</div> </div>
<div id="navigation_bar" class="subnavigation"> <div id="navigation_bar" class="subnavigation">

4
spec/support/common_actions/users.rb
View File

@@ -75,11 +75,11 @@ module Users
end end
def expect_to_be_signed_in 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 end
def expect_not_to_be_signed_in 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 end
def do_login_for(user, management:) def do_login_for(user, management:)