New dropdown menu top nav bar

ramitaarora commented 2 weeks ago

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

![image](https://github.com/hackforla/website/assets/104021517/d0b63e83-45cb-44bf-860b-8550941791ec)

Visuals after changes are applied

github-actions[bot] commented 2 weeks ago

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 commented 2 weeks ago

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

marioantonini commented 2 weeks ago

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

marioantonini commented 1 week ago

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 #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 commented 1 week ago

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 commented 1 week ago

@ExperimentsInHonesty

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".
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.
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 commented 6 days ago

@roslynwythe

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

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

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 commented 5 days ago

@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 commented 1 day ago

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

hackforla / website