Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve mega menu submenu highlighting #6012

Merged
merged 1 commit into from
Sep 18, 2020
Merged

Conversation

chosak
Copy link
Member

@chosak chosak commented Sep 16, 2020

We want a mega menu submenu to be highlighted (i.e. appear visually selected) when users are on a child page of that submenu.

The current logic assumes that we can determine this by comparing URL paths; for example, if a submenu contains a link to /foo/, and the user is on /foo/bar/, then we should highlight the submenu.

For increased flexibility, we also want to support the case when menu items point to links with query strings, for example /foo/?something. In this case, we want a page like /foo/bar/ to also mark the submenu as selected. This commit alters the logic so that we strip off the menu link query string before comparing it to the request path.

Note that this logic only applies to the top-level highlighting of submenus (for example Consumer Tools on the current site). This doesn't alter how the specific menu links themselves are highlighted.

How to test this PR

  1. Run locally and confirm that menu highlighting works properly with the current menus.
  2. Change a menu link so that it points to a URL with a query string (see Add management commands to export/import mega menu #6011 for one way to do this), and then confirm that its menu continues to be highlighted if you visit the URL without the query string.
    • Note that the link itself will not be highlighted; this is unfortunate but deliberate to avoid duplicate highlighting in cases where multiple links differ only by their query string.

Checklist

  • PR has an informative and human-readable title
  • Changes are limited to a single goal (no scope creep)
  • Code follows the standards laid out in the CFPB development guidelines

We want a mega menu submenu to be highlighted (i.e. appear visually
selected) when users are on a child page of that submenu.

The current logic assumes that we can determine this by comparing URL
paths; for example, if a submenu contains a link to /foo/, and the user
is on /foo/bar/, then we should highlight the submenu.

For increased flexibility, we also want to support the case when menu
items point to links with query strings, for example /foo/?something. In
this case, we want a page like /foo/bar/ to also mark the submenu as
selected. This commit alters the logic so that we strip off the menu
link query string before comparing it to the request path.

Note that this logic only applies to the top-level highlighting of
submenus (for example Consumer Tools on the current site). This doesn't
alter how the specific menu links themselves are highlighted.
@chosak chosak force-pushed the fix/menu-qs-link-highlighting branch from ef9f2ad to 3f2cb4a Compare September 18, 2020 15:13
@CFPBot CFPBot merged commit eb06fc2 into main Sep 18, 2020
@CFPBot CFPBot deleted the fix/menu-qs-link-highlighting branch September 18, 2020 15:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants