SatcherInstitute / health-equity-tracker

Health Equity Tracker is a free-to-use data visualization platform that is enabling new insights into the impact of COVID-19 and other social and political determinants of health on historically underrepresented groups in the United States.
https://healthequitytracker.org/
MIT License
17 stars 24 forks source link

Refactor Navigation Bar: Add Menu Folders for Improved Organization and Include CTA #3596

Closed kccrtv closed 2 months ago

kccrtv commented 2 months ago

Description and Motivation

This pull request refactors the existing navigation bar by introducing menu folders (dropdowns) to better organize the menu options and enhance user navigation. The restructured menu allows for grouping related links under expandable sections, improving the overall user experience by reducing visual clutter and providing a more intuitive navigation structure. Additionally, addresses issue #1127

In addition to the menu folders, a Call to Action (CTA) has been added to the navigation bar, providing users with quick access to our data landing page. This enhancement aims to increase user engagement by making key actions more prominent and accessible.

Has this been tested? How?

Tests passing

Screenshots (if appropriate)

Previous version at 1279px

Screenshot 2024-08-26 at 9 43 27 PM

New version at 1279px

Screenshot 2024-08-26 at 9 41 42 PM

Previous version at 969px to 768px

Screenshot 2024-08-26 at 9 43 45 PM Screenshot 2024-08-26 at 9 44 19 PM

New version at 969px

Screenshot 2024-08-26 at 9 42 00 PM

Previous version - mobile

Screenshot 2024-08-26 at 9 44 37 PM

New version - mobile

Screenshot 2024-08-26 at 9 42 26 PM

New version - desktop folders

Screenshot 2024-08-26 at 9 40 50 PM Screenshot 2024-08-26 at 9 40 56 PM Screenshot 2024-08-26 at 9 41 01 PM

Types of changes

New frontend preview link is below in the Netlify comment 😎

netlify[bot] commented 2 months ago

Deploy Preview for health-equity-tracker ready!

Built without sensitive environment variables

Name Link
Latest commit 39639dbf7fc2b4c680480595cff687ef918652f9
Latest deploy log https://app.netlify.com/sites/health-equity-tracker/deploys/66ce0b890227790008467397
Deploy Preview https://deploy-preview-3596--health-equity-tracker.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.