New dropdown menu top nav bar

[ramitaarora]

Fixes #2455

What changes did you make?

• Created a hoverable dropdown menu in the top navigation
• Fixed the links in _data > navigation > main.yml according to new design
• In _data > navigation > main.yml, added link-name variable
• Fixed the hover states for the desktop navigation and new dropdown menu

Why did you make the changes (we will use this info to test)?

• I made these style changes in accordance to the new design in figma
• I added the link-name variable in order to have the dropdown menu render dynamically, rather than hard-coding each filename.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b ramitaarora-new-design-top-nav-bar feature-homepage-launch
git pull https://github.com/ramitaarora/hfla-site.git new-design-top-nav-bar

---

Note that CONTRIBUTING.md cannot previewed locally; rather it should be previewed at this URL:

https://github.com/ramitaarora/website/blob/new-design-top-nav-bar/CONTRIBUTING.md  

[LRenDO]

Hi @marioantonini and @roslynwythe! When you have a minute, please add your ETA and Availability. Thanks!

[marioantonini]

1. Availability: W, Th, Fr: 2-4
2. ETA: EoD 5/16/2024

[marioantonini]

The links under Toolkit are not resolving properly, but I guess that is an issue with the actual toolkit page not having the proper anchor tags. Some of the navigation links seem wonky (meaning they go inconsistently to either same page or different pages), but that is beyond the scope of this particular issue.

Apart from the requested changes involving classes and ids, the navigation looks good!
All the dropdowns work properly. Links are behaving as expected. And everything looks as nice as the figma files!!

[marioantonini]

After discussing with @ExperimentsInHonesty, the conclussion is that adding the anchor tags to the Toolkit page is part of the scope of this issue.

• This is mentioned in the Action Items of Implement the new design for the top navigation bar #2455
  Check all the links in the top navigation work and go to the correct webpage or section on a webpage

@ramitaarora please add the proper anchor tags to the file toolkit.html

[ramitaarora]

Hey @roslynwythe and @marioantonini , I made the requested changes! For the #our-work anchor tag, I added it to the homepage under projects, but let me know if I should put it in a different place.

As discussed in office hours, I left the toolkit links as is, since that seems to be a bigger issue. :)

[roslynwythe]

@ExperimentsInHonesty

1. There was no named anchor target for the link "Our Story". Just to prove that navigation is working, an anchor was added on the homepage just above the heading "Explore our projects by Program Area".
2. On the Toolkit page, the named anchors for Guides and External Resources do exist, however the links are not working, and we believe that is a result of the manipulation of the url (via window.history.replaceState) that is performed within Toolkit.js, as part of the filter implementation. For example, if you enter the url /toolkit#guides in the browser, the address is reset to /toolkit/? and the portion of the url after the "#" is lost. I believe this will require modification to the javascript and that may not fall within the scope of this issue. Please advise.
3. There is an accessibility issue: the new navigation bar is not fully navigable via keyboard. A keyboard user can navigate between the top level menu items but is not able to expand the drop down menu. Please advise, is this within the scope of this issue?

[ExperimentsInHonesty]

@roslynwythe

1. There was no named anchor target for the link "Our Story". Just to prove that navigation is working, an anchor was added on the homepage just above the heading "Explore our projects by Program Area".

I don't see a menu item "Our Story" on the menu example of the figma layout

2. On the Toolkit page, the named anchors for Guides and External Resources do exist, however the links are not working, and we believe that is a result of the manipulation of the url (via window.history.replaceState) that is performed within Toolkit.js, as part of the filter implementation. For example, if you enter the url /toolkit#guides in the browser, the address is reset to /toolkit/? and the portion of the url after the "#" is lost. I believe this will require modification to the javascript and that may not fall within the scope of this issue. Please advise.

@ramitaarora Please make an ER for this

3. There is an accessibility issue: the new navigation bar is not fully navigable via keyboard. A keyboard user can navigate between the top level menu items but is not able to expand the drop down menu. Please advise, is this within the scope of this issue?

@roslynwythe @ramitaarora the accessibility is within the scope of this issue.

[roslynwythe]

@ExperimentsInHonesty I apologize, I meant to write that there was no named anchor target for the link "Our Work" on the homepage. Just to prove that navigation is working, an anchor was added on the homepage just above the heading "Explore our projects by Program Area".

@ramitaarora please contact me on Slack if you need help writing the ER or with implementing keyboard navigation for the drop down.

[ramitaarora]

@roslynwythe I am working on the keyboard accessibility - which js file could I write this code in? Or should I make a new one?

[marioantonini]

1. Availability: Th, Fr: 2-5
2. ETA: EoD 6/7/2024

[marioantonini]

Changes look good. I tested the navigation, and apart from the discussed issue with the links in Toolkit, everything is pointing to the right place.
@roslynwythe @ramitaarora the only thing that for some reason I was not able to test properly was keyboard navigation. But that might have been a problem on my end.

[roslynwythe]

@ramitaarora great job adding assets/js/nav-accessibility.js for keyboard navigation. However in mobile and tablet views, while the "hamburger" menu icon does expand via keyboard, the menu options themselves are not reachable via keyboard navigation.

[roslynwythe]

Great job @ramitaarora

• code changes are correct and clean
• PR is well-formed and descriptive
• changes check out in the browser

There are some changes we would like to see in the menu before the homepage launch, but we have decided to accept this PR as-is and to create new ERs/issues to address these changes. These changes are:

• remove hyperlinks from the top-level menu items
• improvement to keyboard navigation to use down arrow and/or Enter for submenu
• remove Toolkit menu item from header menu
• remove Toolkit item from footer menu