Hamburger Menu React JS Using Third Party Package ReactJS - Popup

Overview

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/styledComponents.js
  • src/components/Header/index.css
  • src/components/Home/index.js
  • src/components/Home/styledComponents.js
  • src/components/About/index.js
  • src/components/About/styledComponents.js
  • src/components/NotFound/index.js
  • src/components/NotFound/styledComponents.js

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
//write code here ">
<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
  • Styled Components should be used for styling purposes
  • The hamburger icon button should have the data-testid as hamburgerIconButton
  • The close button in the popup should have the data-testid as closeButton
  • Roboto should be applied as font-family for Home and About links in Popup
  • 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.
You might also like...
Radial Menu for FiveM,built with React
Radial Menu for FiveM,built with React

BCS Radial Menu This project is to freshen up the options for free radial menu f

🍪 A stylized command menu for React.
🍪 A stylized command menu for React.

🚧 Superkey is under development and is not ready for production. If you have any bugs or problems please create an issue. 🚧 Website (working 😊 ) •

📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀
📱 A performant, easy to use hold to open context menu for React Native powered by Reanimated 🚀

React Native Hold Menu A performant, easy to use hold to open context menu for React Native powered by Reanimated. 🔥 This package is experimental and

Smart data-driven menu rendered in an overlay
Smart data-driven menu rendered in an overlay

React Data Menu Smart data-driven menu rendered in an overlay. Hints-based aligning with custom renderers and factories. Never clipped by other compon

:art: Off-canvas menus for React.

React Off-Canvas Off-canvas menus for React. Installation $ npm install --save react-offcanvas Usage Basic Usage OffCanvas width={300} transition

A react lib for building circular menus in a very easy and handy way.
A react lib for building circular menus in a very easy and handy way.

react-planet A react lib for building circular menus in a very easy and handy way. Live-Demo: STORYBOOK Read the full story @ Medium or innFactory-Blo

A simple Hook for creating fully accessible dropdown menus in React

This Hook handles all the accessibility logic when building a dropdown menu, dropdown button, etc., and leaves the design completely up to you. It also handles the logic for closing the menu when you click outside of it.

React dismissable context and hook with layers (nesting) support
React dismissable context and hook with layers (nesting) support

Context and hook to add support for nested, auto-dismissable layers. State can be globally controlled through context. Best used with react-popper.

Tiny react library for building tooltips, flyovers, menus and more
Tiny react library for building tooltips, flyovers, menus and more

Postel 🌑 Postel is a single component that you can easily extend into customized tooltips, dropdowns, flyovers – any type of UI which would make sens

Owner
null
:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations

react-burger-menu An off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations. Using R

Imogen 4.8k Jan 8, 2023
React component for building accessible menu, dropdown, submenu, context menu and more.

React-Menu An accessible and keyboard-friendly React menu library. Live examples and docs Features React menu components for easy and fast web develop

Zheng Song 837 Jan 9, 2023
Left navigation menu. Get data from JSON file and display simple form menu.

Left Navbar Menu Left navigation menu. Get data from JSON file and display simple form menu. User Interface created using React and Typescript. App st

Wojtek 5 May 24, 2021
React Dropdown Menu

React Dropdown Menu

Mikkel Laursen 142 Dec 3, 2022
Simple Context menu component for react showing all parent's node menus in theirs contexts.

Simple Context menu component for react showing all inherited parents menu with SSR compatibility.

Nathan Braun 6 Nov 13, 2022
A simple, data-driven, light-weight React Tree Menu component

React Simple Tree Menu Inspired by Downshift, a simple, data-driven, light-weight React Tree Menu component that: does not depend on any UI framework

Huang-Ming Chang 120 Dec 1, 2022
A simple sliding side menu component for React

Cheeseburger Menu A simple sliding side menu component for React. This component provides the sliding menu only, not the hamburger button. For your bu

Eddie McLean 19 May 27, 2022
React dropdown menu components

react-menu-list This project is a set of components for building menus. This project works well for dropdown and autocomplete menus. The menus are cor

Streak 79 Nov 16, 2022
Add a context menu to your react app with ease

Documentation Go here. Installation Using yarn $ yarn add react-contexify Using npm $ npm install --save react-contexify The gist import React from 'r

Fadi Khadra 868 Jan 8, 2023
A react component that displays an unlimited deep menu

react-infinity-menu An unlimited deep side menu Live Demo Demo Installation npm install react-infinity-menu How to use import InfinityMenu from "react

Social Tables 58 Dec 5, 2022