Create mobile version of new top nav

IsaacDesigns commented 2 years ago

Dependency

2686

Overview

We need to create a mobile version of the new top nav bar so that it can be implemented and launched alongside the desktop version.

Action Items

[x] Familiarize yourself with the desktop version of the site’s new top nav bar
[x] Create a section to the right of the desktop version for the mobile design
[x] Review the Mobile Navigation Audit in Figma to familiarize yourself with the way mobile nav is designed across the rest of the site
[x] Create a design that translates the desktop version of this new menu design for mobile.
[x] Ensure your design is usable and intuitive for mobile, keeps consistent with Design System guidance and other usage across the site, and provides a good experience for users.
[ ] Once accepted and closed, let development know to make an issue for updating the sitemap, and that they need to put it in the homepage feature branch until homepage launches.

Resources/Instructions

Figma - New Top Nav Figma - Mobile Navigation Audit

github-actions[bot] commented 2 years ago

Hi @IsaacDesigns.

Good job adding the required labels for this issue. The merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

Wiki: How to read and interpret labels

AnyaStewart commented 2 years ago

The issue is awaiting review.

IsaacDesigns commented 2 years ago

Looks good to me. I will send I over for Bonnie to take a look at it and let us know if the issue was completed correctly.

ExperimentsInHonesty commented 2 years ago

@AnyaStewart Please add screen shots into the issue

AnyaStewart commented 2 years ago

ExperimentsInHonesty commented 2 years ago

@AnyaStewart Gave notes to Isaac during meeting. Happy to talk about it directly, if you come to team meeting

white semi transparent background on menu does not work, with words showing through
The red underline seems to be new to the site, we don't do black text with red underline any place else.
I would like to see the other options

AnyaStewart commented 2 years ago

@ExperimentsInHonesty Thank you for your feedback! Sunday meetings are getting hard to attend for me, but I will try to this week. My comments are in bold.

white semi transparent background on menu does not work, with words showing through. I agree, it was my concern as well
The red underline seems to be new to the site, we don't do black text with red underline any place else. It is used in the desktop version of the top nav, so I thought we might carry it over to the mobile as well? It's used a bit differently in the desktop version, so I understand if it doesn't work.
I would like to see the other options I showed other options to the team during our meeting and we had a vote. Attaching the screengrab with options. We decided on the Dropdown B and then I added the red color styling to it, because a chevron like that already exists in the design system. Let me know if you still want me to explore other options

Thanks, Anya

AnyaStewart commented 2 years ago

Update

After the Sunday meeting with here are the next steps agreed:

Explore ways to incorporate the menu link turning red in a clicked state in accordance with the design system
Explore the ways to show the menu links in the top nav vs links across the whole site (it's ok if it differs)
Do research on the top navigation menu links: Our Work and Get in Touch have separate pages for them and the other menus links don't. How do we design it from the user perspective? (Question example: what do you expect when you see this?) @sacamp I will join the research meeting tomorrow to talk over this.

@IsaacDesigns @ExperimentsInHonesty feel free to add anything else you think is important for this issue

Thanks! Anya

github-actions[bot] commented 2 years ago

@AnyaStewart

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.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "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 developer meeting discussion column 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.

_{You are receiving this comment because your last comment was before Monday, January 17, 2022 at 11:18 PM PST.}

AnyaStewart commented 2 years ago

Progress: The issue requires research, new issue has been created for that #2686 Blockers: Research needed

any pictures of the visual changes made to the site so far."

github-actions[bot] commented 2 years ago

@AnyaStewart

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.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "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 developer meeting discussion column 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.

_{You are receiving this comment because your last comment was before Monday, January 31, 2022 at 11:15 PM PST.}

hackforla / website