-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor Navigation Bar: Add Menu Folders for Improved Organization a…
…nd Include CTA (#3596) # 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 > <img width="1312" alt="Screenshot 2024-08-26 at 9 43 27 PM" src="https://github.com/user-attachments/assets/16250c80-f780-4a43-8d04-17a05c17cdf4"> > ### New version at 1279px > <img width="1490" alt="Screenshot 2024-08-26 at 9 41 42 PM" src="https://github.com/user-attachments/assets/eabc03aa-9801-4c0e-a33e-884b20ca3dfa"> > > ### Previous version at 969px to 768px > <img width="1312" alt="Screenshot 2024-08-26 at 9 43 45 PM" src="https://github.com/user-attachments/assets/c21a5dfe-e66b-4f18-b61b-f3441a536d3c"> > <img width="1312" alt="Screenshot 2024-08-26 at 9 44 19 PM" src="https://github.com/user-attachments/assets/cc8463ea-158c-412e-8572-0c2dfb39fdd2"> > ### New version at 969px > <img width="1490" alt="Screenshot 2024-08-26 at 9 42 00 PM" src="https://github.com/user-attachments/assets/7dc2f5b7-0542-493d-9ad9-7ab83152f3f5"> > ### Previous version - mobile > <img width="210" alt="Screenshot 2024-08-26 at 9 44 37 PM" src="https://github.com/user-attachments/assets/b58c73e9-f3d9-4d35-9578-6d8e8adf440d"> > ### New version - mobile > <img width="260" alt="Screenshot 2024-08-26 at 9 42 26 PM" src="https://github.com/user-attachments/assets/83519fef-e642-4d34-afcc-7b7771127c17"> > ### New version - desktop folders > <img width="1490" alt="Screenshot 2024-08-26 at 9 40 50 PM" src="https://github.com/user-attachments/assets/14e40c18-63d9-452a-8e44-49c8a79c98f4"> > <img width="1490" alt="Screenshot 2024-08-26 at 9 40 56 PM" src="https://github.com/user-attachments/assets/72222117-80fe-4997-b6c0-0aadfe0741a2"> > <img width="1490" alt="Screenshot 2024-08-26 at 9 41 01 PM" src="https://github.com/user-attachments/assets/87b73729-167f-40a3-9361-b8fa92d172d1"> ## Types of changes - New content or feature - Refactor / chore ## New frontend preview link is below in the Netlify comment 😎
- Loading branch information
Showing
16 changed files
with
326 additions
and
137 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import HetBigCTA from '../../styles/HetComponents/HetBigCTA' | ||
| import HetCTABig from '../../styles/HetComponents/HetCTABig' | ||
|
|
||
| export default function ShareYourStory() { | ||
| return ( | ||
|
|
@@ -128,9 +128,9 @@ export default function ShareYourStory() { | |
| more inclusive and informed community. | ||
| </p> | ||
| <div className='mt-20 flex justify-center'> | ||
| <HetBigCTA href='mailto:[email protected]'> | ||
| <HetCTABig href='mailto:[email protected]'> | ||
| Share your story | ||
| </HetBigCTA> | ||
| </HetCTABig> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,67 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import FlagIcon from '@mui/icons-material/Flag'; | ||
| import { METHODOLOGY_PAGE_LINK } from '../../utils/internalRoutes'; | ||
| import { IconButton } from '@mui/material'; | ||
| import HetTextArrowLink from '../../styles/HetComponents/HetTextArrowLink'; | ||
| import type React from 'react' | ||
| import { useState, useEffect } from 'react' | ||
| import FlagIcon from '@mui/icons-material/Flag' | ||
| import { METHODOLOGY_PAGE_LINK } from '../../utils/internalRoutes' | ||
| import { IconButton } from '@mui/material' | ||
| import HetTextArrowLink from '../../styles/HetComponents/HetTextArrowLink' | ||
| import { Close } from '@mui/icons-material' | ||
|
|
||
| const Banner: React.FC = () => { | ||
| const [isVisible, setIsVisible] = useState(false); | ||
| const [isVisible, setIsVisible] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| const currentPath = window.location.pathname; | ||
| const currentSearch = window.location.search; | ||
| const bannerClosed = sessionStorage.getItem('bannerClosed'); | ||
| const currentPath = window.location.pathname | ||
| const currentSearch = window.location.search | ||
| const bannerClosed = sessionStorage.getItem('bannerClosed') | ||
|
|
||
| if (currentPath === '/exploredata' && currentSearch === '' && !bannerClosed) { | ||
| setIsVisible(true); | ||
| setIsVisible(true) | ||
| } else { | ||
| setIsVisible(false); | ||
| setIsVisible(false) | ||
| } | ||
| }, [window.location.pathname, window.location.search]); | ||
| }, [window.location.pathname, window.location.search]) | ||
|
|
||
| const handleClose = () => { | ||
| setIsVisible(false); | ||
| sessionStorage.setItem('bannerClosed', 'true'); | ||
| }; | ||
| setIsVisible(false) | ||
| sessionStorage.setItem('bannerClosed', 'true') | ||
| } | ||
|
|
||
| if (!isVisible) { | ||
| return null; | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <section className="bg-infobarColor text-center p-4" aria-labelledby="banner-heading"> | ||
| <div className="flex justify-between"> | ||
| <div className="flex lg:flex-row flex-wrap items-center justify-start md:items-center lg:justify-start m-0 px-2"> | ||
| <section className='bg-infobarColor text-center p-4' aria-labelledby='banner-heading'> | ||
| <div className='flex justify-between'> | ||
| <div className='flex lg:flex-row flex-wrap items-center justify-start md:items-center lg:justify-start m-0 px-2'> | ||
| <FlagIcon | ||
| className="lg:visible hidden mr-2 text-alertColor" | ||
| aria-hidden="true" | ||
| className='lg:visible hidden mr-2 text-alertColor' | ||
| aria-hidden='true' | ||
| /> | ||
| <p className="text-small p-0 my-0 text-left lg:mr-8" id="banner-heading"> | ||
| <span className="font-sansTitle text-small lg:text-text font-bold m-0 p-0"> | ||
| <p className='text-small p-0 my-0 text-left lg:mr-8' id='banner-heading'> | ||
| <span className='font-sansTitle text-small lg:text-text font-bold m-0 p-0'> | ||
| Major gaps in the data: | ||
| </span>{' '} | ||
| Structural racism causes health inequities. We’re closing these gaps to improve U.S. health policies. | ||
| </p> | ||
| <HetTextArrowLink | ||
| link={`${METHODOLOGY_PAGE_LINK}/limitations#missing-data`} | ||
| linkText="Learn more" | ||
| containerClassName="block md:mx-2 md:my-0 mx-0 my-4" | ||
| linkClassName="text-black" | ||
| linkText='Learn more' | ||
| containerClassName='block md:mx-2 md:my-0 mx-0 my-4' | ||
| linkClassName='text-black' | ||
| /> | ||
| </div> | ||
| <IconButton | ||
| onClick={handleClose} | ||
| className="banner-close-button p-2.5 md:my-auto mb-auto xs:mt-[2px]" | ||
| aria-label="Close banner" | ||
| className='banner-close-button p-2.5 md:my-auto mb-auto' | ||
| aria-label='Close banner' | ||
| sx={{ borderRadius: 1 }} | ||
| > | ||
| <div className="icon-small w-embed"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="24" | ||
| height="24" | ||
| viewBox="0 0 16 16" | ||
| fill="none" | ||
| aria-hidden="true" | ||
| > | ||
| <path | ||
| d="M12.2 3.80667C11.94 3.54667 11.52 3.54667 11.26 3.80667L7.99998 7.06L4.73998 3.8C4.47998 3.54 4.05998 3.54 3.79998 3.8C3.53998 4.06 3.53998 4.48 3.79998 4.74L7.05998 8L3.79998 11.26C3.53998 11.52 3.53998 11.94 3.79998 12.2C4.05998 12.46 4.47998 12.46 4.73998 12.2L7.99998 8.94L11.26 12.2C11.52 12.46 11.94 12.46 12.2 12.2C12.46 11.94 12.46 11.52 12.2 11.26L8.93998 8L12.2 4.74C12.4533 4.48667 12.4533 4.06 12.2 3.80667Z" | ||
| fill="currentColor" | ||
| ></path> | ||
| </svg> | ||
| </div> | ||
| <Close/> | ||
| </IconButton> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
| ) | ||
| } | ||
|
|
||
| export default Banner; | ||
| export default Banner |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 3 additions & 3 deletions
6
...nd/src/styles/HetComponents/HetBigCTA.tsx → ...nd/src/styles/HetComponents/HetCTABig.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { Button } from '@mui/material' | ||
| import type { ReactNode } from 'react' | ||
| import { useHistory } from 'react-router-dom' | ||
|
|
||
| interface HetCTASmallProps { | ||
| children: ReactNode | ||
| href: string | ||
| id?: string | ||
| className?: string | ||
| } | ||
|
|
||
| export default function HetCTASmall({ children, href, id, className }: HetCTASmallProps) { | ||
| const history = useHistory() | ||
|
|
||
| const handleClick = () => { | ||
| if (!href.startsWith('mailto:')) { | ||
| history.push(href) | ||
| } | ||
| } | ||
|
|
||
| const isMailTo = href.startsWith('mailto:') | ||
| const optionalMailTo = isMailTo ? href : undefined | ||
|
|
||
| return ( | ||
| <Button | ||
| id={id} | ||
| variant='outlined' | ||
| className={`rounded-2xl my-2 px-8 py-2 w-auto bg-altGreen ${className ?? ''}`} | ||
| href={optionalMailTo} | ||
| onClick={isMailTo ? undefined : handleClick} | ||
| > | ||
| <span className='text-small text-white font-bold'> | ||
| {children} | ||
| </span> | ||
| </Button> | ||
| ) | ||
| } |
Oops, something went wrong.