Implement the new design for the top navigation bar

[macho-catt]

Dependency

• Homepage redesign: Add anchor to Get In Touch section #3023
• Join Us page: Add anchors to sections Advise Us, Volunteer with Us, and Partner with Us #3026

Overview

We need to implement the new figma design for our main navigation bar so it's more user friendly.

Click here to see current HfLA navigation bar

Click here to see the proposed navigation bar (Figma design)

Note: Feature Branch

The pull request created from this issue should be pushed into a feature branch called "feature-homepage-launch." Please note this wiki article on how to work off of a feature branch.

Action Items

• Read the wiki article: DR:-Capitalization-of-menu-items-in-nav-bar-and-header
• Create data files (if they don't exist yet) with the column title (Our Work, join Us, Get in Touch, etc) and the list of links that go in each column
  • The data can be stored under _data/navigation
  • The main navigation bar should dynamically get the data using liquid instead of being statically rendered
• Modify the existing navigation bar based on the new Figma design
• Remove the current red hover-over text transformation from the top-level menu items
• Implement a new dropdown for each top-level menu items
  • Hover-over of menu items should reveal the dropdown menus, with top nav text remaining unchanged
  • Ensure that the dropdown from the navigation bar has 93% opacity
  • Ensure to implement the hover state according to the figma design
• Check all the links in the top navigation work and go to the correct webpage or section on a webpage
• Create a PR that is merging into the feature branch called "feature-homepage-launch". See How to work off of a feature branch wiki article for detailed instructions.

New hover-over menu items

Remove red hover-over text for top level menu items

Dropdown has 93% opacity

Resources/Instructions

Feature branch wiki article
Figma - New navigation bar design
Navigation data directory
Click below to see main nav bar

website/_includes/main-nav.html

Lines 1 to 14 in 66f8931

	<nav class="header-nav" id="headerNav">
	<ul class="inline-list" id="mobileNavLink">
	{% for item in site.data.navigation.main %}
	<li class="{{ item.list_class_name }}">
	<a href="{{ item.link }}">
	{% if item.icon %} {%- include {{ site.baseurl
	}}{{ item.icon }} -%} {% endif %}
	{{- item.name -}}
	</a>
	</li>
	{% endfor %}
	</ul>
	</nav>

Related issues:

• Homepage redesign: Add anchor to Get In Touch section #3023
• Join Us page: Add anchors to sections Advise Us, Volunteer with Us, and Partner with Us #3026
• Toolkit page: Add anchors to Guides and External Resources sections  #2802

[JessicaLucindaCheng]

@answebdev Do you need help with your blocker?

[answebdev]

@JessicaLucindaCheng Yes, I think I do. Basically, I have the navbar redesign finished and working according to the Figma designs (see below). But what I'm stuck on is getting the dropdown items into separate .yml files like we previously talked about. As of now, all of the navbar items and their dropdown items are in one file (main.yml), and it works, as you can see below. But when I tried creating separate .yml files for each of the navbar item's dropdown items, I can't get it to work right. I've tried using collections as you first suggested, and tried looking at the other example files, and trying a bunch of other things, but I still can't get the dropdown to work right when I try putting the items in separate files.

The anchor tags also need to be sorted out. I was planning on writing a comment when I finished about creating an issue to deal with the anchor tags, as discussed in a previous meeting with Bonnie, but since I'm stuck on this, I haven't gotten to that yet.

Click here to see navbar redesign

Right now, this is where I'm stuck on, and this is what the navbar looks like when putting the navbar items and their dropdowns in separate .yml files:

Click here to see current blocker state

[github-actions]

Hi @danajeon, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[danajeon]

i. Availability: Mon-Fri 4-7PM EST
ii. ETA: 5/3 EOD

[danajeon]

I'll be busy for the remainder of this week and next week and won't be able to finish this issue by 5/3 EOD, I've unassigned myself from this issue.

[github-actions]

Hi @ramitaarora, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[ramitaarora]

i. Availability: Weekdays 9am-12pm
ii. ETA: May 10

[github-actions]

@ramitaarora

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, May 7, 2024 at 12:06 AM PST.}

[ramitaarora]

Progress: I have completed changing the links for the new menu and the new hover look with the underline. I am in the middle of creating the dropdown menu.
Blockers: I am having trouble creating dynamic dropdowns according to the menu items. I need to incorporate a for loop in the code but am unsure of the syntax.
Availability: Weekdays 9am-12pm.
ETA: May 17 latest
Pictures (optional):

[ramitaarora]

I am blocked: I have an issue where the toolkit anchor tags are not working, but it seems the "/toolkit/" link itself is not working. When I navigate to "/toolkit/" or "/toolkit", it redirects to "/toolkit/?". I have tried changing the slashes but it has not seemed to work yet.

[Thinking-Panda]

@ramitaarora This behavior is probably happening because of the event handlers in toolkit.js

[ExperimentsInHonesty]

@ramitaarora I moved this issue back to the in progress column since it seems like you got your answer. If you need more support, please move this issue back to the questions column and add the ready for merge team label.

[t-will-gillis]

PR #6854 fixes this issue, closing as completed