Implement the new design for the top navigation bar

[macho-catt]

Dependency

• [x] https://github.com/hackforla/website/issues/3023
• [x] https://github.com/hackforla/website/issues/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

• [x] Read the wiki article: DR:-Capitalization-of-menu-items-in-nav-bar-and-header
• [x] 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
  • [x] The data can be stored under _data/navigation
  • [x] The main navigation bar should dynamically get the data using liquid instead of being statically rendered
• [x] Modify the existing navigation bar based on the new Figma design
• [x] 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
  • [x] 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 https://github.com/hackforla/website/blob/66f89317e84517f4bbbd29911bb21aeddb8bb2d3/_includes/main-nav.html#L1-L14

Related issues:

• https://github.com/hackforla/website/issues/3023
• https://github.com/hackforla/website/issues/3026
• https://github.com/hackforla/website/issues/2802

[github-actions[bot]]

Hi @macho-catt.

Good job adding the required labels to this issue.

Additional Resources: Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done) Wiki: How to create issues (WIP. Link will be updated when the wiki is done)

[kristine-eudey]

@macho-catt I just updated the order of menu items in the "Join Us" section of the top nav to match the order they appear on the Join Us page.

[IsaacDesigns]

@ExperimentsInHonesty is the new menu still relevant? You had told me that we don't have a Get IN Touch page on Wednesdays meeting. The menu items are also not consistent with the new sitemap and Home page design.

[answebdev]

ETA: 3/23/2022 (end of day) Availability: 6 hours

[answebdev]

Progress Report

• Progress: Have redesigned the navbar according to the figma design (i.e., navbar items Our Work, Join Us, Get in Touch, etc. with dropdown items) and got most of the basic styling done (though still need to finish some styling)
• Blockers: I got the redesigned navbar dropdown working, but all of the dropdown items are in one separate .yml. file, and they should be in separate files. I am currently stuck on getting this to work (i.e., they are in now in separate files but my blocker is getting everything to work)
• Availability: 6 hours
• ETA: 3/30/2022

[answebdev]

• Progress: Worked on and finished CSS according to Figma design; need to work on CSS for smaller screen sizes
• Blockers: Though I mostly worked on the CSS since the last Progress Report, I still need to work on getting the dropdown items into in separate .yml files and getting this to work (as of now, the dropdown items are in separate .yml files, but my blocker is getting everything to work)
• Availability: 6 hours
• ETA: 4/6/2022

[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

[JessicaLucindaCheng]

@answebdev Don't worry about writing issues for the anchors because I am writing them already. I will provide you with what the anchor links should be so you can still add them to your code (but since the anchors aren't implemented on the webpages it just won't jump to the specified sections).

I'll get back to you on your blocker about the separate yml files for the menu and let you know about the anchor links most likely by tomorrow.

[answebdev]

@JessicaLucindaCheng Okay, I'll wait for the anchor tags so that they can at least be in the code. Okay, let me know. Thank you!

[JessicaLucindaCheng]

@answebdev Can you push your code to your topic branch on your remote forked repo? This way I can see your code and try to help you better.

Also, here are the links for the anchors. The links won't jump to the sections yet because that hasn't been implemented on the pages but they should go to the webpage for now. You'll need to modify them for your purposes since I don't think the menus will use the full url.

• https://www.hackforla.org/#get-in-touch → This is for the Contact Us submenu item
• https://www.hackforla.org/join#advise
• https://www.hackforla.org/join#volunteer
• https://www.hackforla.org/join#partner
• https://www.hackforla.org/toolkit#guides
• https://www.hackforla.org/toolkit#external-resources

[answebdev]

@JessicaLucindaCheng Thank you. I've pushed the code to my topic branch on my forked repo. Here is the link to my topic branch: https://github.com/answebdev/website/tree/navbar-redesign

What about the anchor link for "Submit Your Pitch" for the Join Us submenu? Would it be "/#submit-your-pitch"?

[JessicaLucindaCheng]

@answebdev Submit your pitch is the current way it opens for the Submit your pitch button now.

I'll try to take a look at your code before tomorrow's meeting and comment in this issue. However, feel free to bring it up in the meeting if we have time for discussion.

Edit: I didn't get a chance to look at your code yet but I will later today.

[JessicaLucindaCheng]

Updated ETA for trying to figure out blocker: Tue, April 12, 2022

Edit: Sorry, going to delay this by a day. New date is Wed, April 14, 2022

[answebdev]

Progress Report

• Progress: Have finished everything (except for the blocker), and have added the anchor links to the .yml files as per Jessica's previous comment.
• Blockers: I got the redesigned navbar dropdown working, but all of the dropdown items are in one separate .yml. file, and they should be in separate files. I am currently stuck on getting this to work (i.e., they are in now in separate files but my blocker is getting everything to work). Currently getting help from Jessica (I have pushed my code to my topic branch on my remote forked repo), who is helping out by looking at my blocker, and will continue as soon as I hear back.
• Availability: 6 hours
• ETA: 4/20/2022

[JessicaLucindaCheng]

@answebdev I took a look at your code and have a few notes.

• It looks like you created your topic branch off of gh-pages and not "feature-homepage-launch". You should base your topic branch off of "feature-homepage-launch" because that is what your pr will be merged into. See the Details section above for instructions.
• For your blocker,
  • The files you have in navsub directory should look more like https://github.com/hackforla/website/blob/gh-pages/_data/internal/communities/ui-ux.yml in terms of structure, specifically
    • For the submenu links, look at https://github.com/hackforla/website/blob/a8a0a36c3a0f50d94e1af5b8f16867d302a9d2a9/_data/internal/communities/ui-ux.yml#L28-L32
    • For the main menu item names you have in main.yml, can probably be incorporated into the files in the navsub directory. Then you won't need to use main.yml.
    • I used this to help with figuring out how to show the submenus in a certain order: https://stackoverflow.com/a/9126294
      • You will need to have another field in each of the submenu files in order to use this method.
      • Also, I don't know if this is the most efficient way to implement this. Thus, if you find a better way to do this, feel free to do that.
• FYI: This may or may not be helpful but I think it's something good to know: Whitespace control in Liquid

[JessicaLucindaCheng]

@answebdev Could you please change the following 2 menu items to have the following capitalization?

• Submit your Pitch
• Get in Touch

This decision came from https://github.com/hackforla/website/issues/2481#issuecomment-1100764836

[answebdev]

@answebdev Could you please change the following 2 menu items to have the following capitalization?

• Submit your Pitch
• Get in Touch

This decision came from #2481 (comment)

Okay, got it.

[answebdev]

Progress Report

• Progress: Got feedback/help back from Jessica and started addressing some of the feedback: Had previously created my topic branch off of "gh-pages", instead of "feature-homepage-launch", so I have now created my topic branch of of "feature-homepage-launch" and worked on my getting my code into this new topic branch; addressed capitalization as mentioned in a comment; updated the files in my navsub directory so that they are consistent with the other .yml files in the codebase in terms of structure.
• Blockers: None yet, as I have just started working on this after receiving feedback
• Availability: 6 hours
• ETA: 4/27/2022

[answebdev]

Progress Report

• Progress: Got feedback/help back from Jessica and started addressing some of the feedback.
• Blockers: I have been having Docker issues since last week, and have not been able to work on this issue, since I was working on my Docker issue. Got Docker issue resolved, but currently have another issue.
• Availability: 6 hours
• ETA: 5/4/2022 (depending on Docker issues)

[JessicaLucindaCheng]

@answebdev Please give a progress report in a comment in this issue that includes Progress, Blockers, Availability, and ETA. See more detailed information in section 2.5 Reporting progress on your issue in CONTRIBUTING.md. If you are taking a leave of absence or a vacation, please also let us know in your progress report.

Also, do you need help with your blocker?

[answebdev]

Progress: Started addressing some of the feedback, e.g., adding the anchor links - all that's left is getting it to work with the nav items in separate .yml files as opposed to having all the navbar items in one .yml file. Blockers: I was mostly trying get my Docker issue fixed, so I was not able to work on this navbar issue. As of now, my Docker is working, though I'm not sure how I got it to work; it still randomly takes some time before it works, but it eventually works. Availability: 6 hours. ETA: 5/11/2022 (depending on Docker issues).

@JessicaLucindaCheng My Docker seems to be working now, though I'm not sure how I got it going, so I wasn't able to post anything about how to fix the issue. It still sometimes takes time to get working, but after a lot of quitting and restarts, it seems to eventually work.

[answebdev]

Progress: Redesign is done and working, but I need to get the nav items in separate .yml files as opposed to having all the navbar items in one .yml file. This is what I've been working on, but have been stuck on getting this to work. Blockers: Getting the dropdown navbar items to work in separate .yml files. Have reached out for help and am currently waiting for feedback. Availability: 6 hours. ETA: 5/18/2022 (depending on when I get feedback back)

[JessicaLucindaCheng]

@answebdev Sorry for the delay in getting back to you about your blocker. Good job so far on your work on the navigation bar. Here are my suggestions:

• The yml files in _data/navigation/navsub have a position, menu, and submenu field. For example for our-work.yml,

  position: 1
  menu: Our Work
  submenu:
  - name: About Us
    url: /about
  - name: Program Areas
    url: /program-areas
  - name: Projects
    url: /projects
  - name: Our Wins
    url: /wins
  - name: Press
    url: /about#news
  

  • The position will help order the menu items
  • The menu will be the main menu item
  • The submenu will contain the submenu items
  • Having the menu and submenu items together will make it easier to iterate through main menu items and their respective submenu items
• For _includes/main-nav.html, the pseudocode logic for iterating through the menu and submenu items:

  for order in (1..4) <!-- This is a for loop that iterates through the numbers 1 through 4, inclusive -->
    for loop iterating through yml files in _data/navigation/navsub
      if the "position" field in the yml file is equal to "order"
        then
          display the main menu item
          for loop iterating through the submenu items in a yml file
            display each submenu item
  

  If what I wrote is confusing, I can go over this with you during meeting time; just let me know.
• Also, make sure the urls for the following submenu items are as follows:
  • url for Press is /about#news
  • url for Volunteer with Us is /join#volunteer
  • url for Partner with Us is /join#partner
  • url for Advise Us is /join#advise
  • url for Guides is /toolkit#guides
  • url for External Resources is /toolkit#external-resources

[answebdev]

Progress: Updated .yml files for submenu navbar items (added "position", "menu", and "submenu" fields) to make it easier to iterate through main menu items; updated URLs for submenu items to the correct URLs Blockers: Not yet, as I just started addressing what was in the feedback Availability: 6 hours. ETA: 5/25/2022

[answebdev]

Progress: Didn't have much of a chance to work on this since my last progress report due to working on tasks for job applications and focusing on other tasks (PR reviews and issue creation) Blockers: Not yet, as I just started addressing what was in the feedback Availability: 6 hours. ETA: 6/1/2022

[answebdev]

This message is to say that I'm going to be taking a week off starting today...I need to get a lot of things done for work.

[answebdev]

Progress: Took a week off to get things done for work, so I did not work on this issue. Blockers: Not yet, as I just started addressing what was in the feedback Availability: 6 hours. ETA: 6/15/2022

[answebdev]

Progress: Did not have time to work on this issue this past week due to having a lot to do for work. Blockers: Not yet, as I just started addressing what was in the feedback Availability: 6 hours. ETA: 6/22/2022

[answebdev]

I will be leaving the HfLA team, so I am moving this issue from ‘In progress’ to the ‘Prioritized Backlog’ on the Project Board. The following are notes for the next developer:

Out of the 10 Action Item tasks above, 8 of them have been completed. The following Action Items need to be completed (see Action Items section above in the issue):

• [ ] The main navigation bar should dynamically get the data using liquid instead of being statically rendered
• [ ] Create a PR that is merging into the feature branch called "feature-homepage-launch".

The completed tasks are currently in the navbar-redesign-branch branch. The main navigation items (Our Work, Join Us, Get in Touch, Toolkit) are in _data/navigation/main.yml. For the dropdown navigation items, as per the comments above, there is a separate file created for each of the main navigation items. Each of the separate files contain the dropdown items for each main navigation item. These files are inside the folder _data/navigation/navsub. The navsub folder contains four .yml files, each containing the dropdown items for each of the main navigation items: get-in-touch.yml, join-us.yml, our-work.yml, and toolkit.yml.

Everything in this issue has been completed except for one thing. Currently, when you hover over the navbar where the main navigation items should be, you can see the dropdown appear as it should. However, neither the main navigation items nor the dropdown items can be seen (see image below). Previously, when all of the navigation items where all in one .yml file, everything worked as it should. But after creating separate .yml files for each set of dropdown items (as noted above), the items do not show. This is the current state of this issue. This is all that needs to be done. Once this is addressed and both the main navigation items and the dropdown items can be seen, the issue will be finished, and then all that needs to be done is to create a PR that is merging into the feature branch called "feature-homepage-launch".

To continue working on where this issue has left off, go to _includes/main-nav.html. This is the file I was last working in. I believe this is what needs to be coded correctly to get everything working.

Current State of Dropdown Menu