26a8f2eace
Some users might not be able to touch the icon due to a motor disability. Other users might think the "Menu" text is part of the button and try to touch it instead. Making the "Menu" text part of the button makes it easier to show/hide this menu. Besides, it lets screen reader users with a small screen hear the word "Menu" associated to the button. We could simplify the HTML a bit more but Foundation's `hamburger` mixin uses the `::after` element with `position: absolute`, so we can't apply it directly to the button without making the CSS more complex.
55 lines
1.7 KiB
Plaintext
55 lines
1.7 KiB
Plaintext
<header class="header">
|
|
<div class="top-links">
|
|
<div class="expanded row">
|
|
<%= render "shared/locale_switcher" %>
|
|
|
|
<%= link_to root_path, class: "float-right" do %>
|
|
<%= t("admin.dashboard.index.back", org: setting["org_name"]) %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="expanded row admin-top-bar">
|
|
<div class="title-bar" 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 class="title-bar-title"><%= t("application.menu") %></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="top-bar">
|
|
<div class="top-bar-left">
|
|
<ul class="menu">
|
|
<li class="menu-text">
|
|
<% if namespace == "officing" %>
|
|
<h1>
|
|
<%= link_to "#" do %>
|
|
<%= setting["org_name"] %>
|
|
<br><small><%= namespaced_header_title %></small>
|
|
<% end %>
|
|
</h1>
|
|
<% else %>
|
|
<h1>
|
|
<%= link_to namespaced_root_path do %>
|
|
<%= setting["org_name"] %>
|
|
<br><small><%= namespaced_header_title %></small>
|
|
<% end %>
|
|
</h1>
|
|
<% end %>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="responsive_menu">
|
|
<div class="top-bar-right">
|
|
<ul class="dropdown menu" data-dropdown-menu>
|
|
<%= render "shared/admin_login_items" %>
|
|
<%= render "layouts/notification_item" %>
|
|
<%= render "devise/menu/login_items" %>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|