125106f9c0
While Foundations's off-canvas menu allows us to forget about writing CSS, it also leads to complicated HTML. Ideally Foundation would provide an easy way to simplify what we're doing, but I haven't found anything in the documentation. We could simplify the HTML a bit more if we used a CSS grid layout instead of a flex one, but old browsers have better support for the latter. Note we're using `breakpoint(medium)` so we can group the CSS for small screens and follow SCSS-Lint rules at the same time. Also note behavior of the main area when the menu appears on small screens is slightly different: it doesn't move the main content to the right. I've done it this way so we don't have any overflow issues, unlike the previous version. There's a small issue using a label and a checkbox to enable/disable the menu: sighted keyboard users with a small screen might not be able to enable the menu. So we're adding the `:focus-within` pseudoclass so the menu can be normally navigated using the keyboard. Even if old browsers don't support this pseudoclass, we believe the probability of a sighted user using a small screen, navigating with the keyboard and using an old browser is really low, particularly in the admin area. We're also adding the `aria-hidden` attribute on the label, since the menu is never hidden for screen readers and so having a control to show it could be confusing. Since the label is not focusable, we're complying with the fourth ARIA rule: > Do not use role="presentation" or aria-hidden="true" on a focusable > element . > > Using either of these on a focusable element will result in some users > focusing on 'nothing'.
67 lines
2.3 KiB
Plaintext
67 lines
2.3 KiB
Plaintext
<ul id="admin_menu" data-accordion-menu>
|
|
<li class="section-title">
|
|
<a href="#">
|
|
<span class="icon-user"></span>
|
|
<strong><%= t("management.menu.users") %></strong>
|
|
</a>
|
|
<ul class="is-active">
|
|
|
|
<li <%= "class=is-active" if menu_users? %>>
|
|
<%= link_to t("management.menu.select_user"), management_document_verifications_path %>
|
|
</li>
|
|
|
|
<% if managed_user.email %>
|
|
<li <%= "class=is-active" if menu_edit_password_email? %>>
|
|
<%= link_to t("management.account.menu.reset_password_email"), edit_password_email_management_account_path %>
|
|
</li>
|
|
<% end %>
|
|
|
|
<li <%= "class=is-active" if menu_edit_password_manually? %>>
|
|
<%= link_to t("management.account.menu.reset_password_manually"), edit_password_manually_management_account_path %>
|
|
</li>
|
|
|
|
<li <%= "class=is-active" if menu_create_proposal? %>>
|
|
<%= link_to t("management.menu.create_proposal"), new_management_proposal_path %>
|
|
</li>
|
|
|
|
<li <%= "class=is-active" if menu_support_proposal? %>>
|
|
<%= link_to t("management.menu.support_proposals"), management_proposals_path %>
|
|
</li>
|
|
|
|
<% if Setting["process.budgets"] %>
|
|
<li <%= "class=is-active" if menu_create_investments? %>>
|
|
<%= link_to t("management.menu.create_budget_investment"), create_investments_management_budgets_path %>
|
|
</li>
|
|
|
|
<li <%= "class=is-active" if menu_support_investments? %>>
|
|
<%= link_to t("management.menu.support_budget_investments"), support_investments_management_budgets_path %>
|
|
</li>
|
|
<% end %>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<% if Setting["process.budgets"] %>
|
|
<li <%= "class=is-active" if menu_print_investments? %>>
|
|
<%= link_to print_investments_management_budgets_path do %>
|
|
<span class="icon-print"></span>
|
|
<%= t("management.menu.print_budget_investments") %>
|
|
<% end %>
|
|
</li>
|
|
<% end %>
|
|
|
|
<li <%= "class=is-active" if menu_print_proposals? %>>
|
|
<%= link_to print_management_proposals_path do %>
|
|
<span class="icon-print"></span>
|
|
<%= t("management.menu.print_proposals") %>
|
|
<% end %>
|
|
</li>
|
|
|
|
<li <%= "class=is-active" if menu_user_invites? %>>
|
|
<%= link_to new_management_user_invite_path do %>
|
|
<span class="icon-letter"></span>
|
|
<%= t("management.menu.user_invites") %>
|
|
<% end %>
|
|
</li>
|
|
</ul>
|