In this project, let's build a Hamburger Menu app by applying the concepts we have learned till now.

Refer to the image below:


hamburger menu output

Design Files

Click to view

Set Up Instructions

Click to view
  • Download dependencies by running npm install
  • Start up the app using npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

  • Initially, the Home Route should be displayed
  • When hamburger icon button in the header is clicked, then the popup should be opened
    popup

  • When the Home is clicked, then the page should be navigated to the Home Route
  • When the About is clicked, then the page should be navigated to the About Route
  • When the close button is clicked, then the popup should be closed
  • When the website logo in the Header is clicked, then the page should be navigated to the Home Route
Components Structure
component structure breakdown home

component structure breakdown about

Implementation Files

Use these files to complete the implementation:

  • src/App.js
  • src/components/Header/index.js
  • src/components/Header/index.css
  • src/components/Home/index.js
  • src/components/Home/index.css
  • src/components/About/index.js
  • src/components/About/index.css
  • src/components/NotFound/index.js
  • src/components/NotFound/index.css

Quick Tips

Click to view

To build this project, take a look at the React Popup reading material

  • To style popup content use .popup-content class
<Popup
  modal
  trigger={
    //write code here
  }
  className="popup-content"
>
  //write code here
</Popup>

Important Note

Click to view

The following instructions are required for the tests to pass

  • Home Route should consist of / in the URL path
  • About Route should consist of /about in the URL path
  • No need to use the BrowserRouter in App.js as we have already included in index.js
  • The hamburger icon button should have the data-testid as hamburgerIconButton
  • The close button in the popup should have the data-testid as closeButton
  • GiHamburgerMenu from react-icons should be used for Hamburger Icon in the Header
  • IoMdClose from react-icons should be used for Close Icon in the Popup
  • AiFillHome from react-icons should be used for Home Icon in the Popup
  • BsInfoCircleFill from react-icons should be used for About Icon in the Popup

Resources

Image URLs
Colors
Hex: #dcdcdc
Hex: #ffffff
Hex: #616e7c
Font-families
  • Roboto

Things to Keep in Mind

  • All components you implement should go in the src/components directory.
  • Don't change the component folder names as those are the files being imported into the tests.
  • Do not remove the pre-filled code
  • Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.