A Navbar With Context App Built With React.js

In this project, let’s build a Navbar with Context by applying the concepts we have learned till now.

Refer to the image below:

Design Files

• Extra Small (Size < 576px) and Small (Size >= 576px) – Home
• Extra Small (Size < 576px) and Small (Size >= 576px) – About
• Extra Small (Size < 576px) and Small (Size >= 576px) – Not Found
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) – Home Light Theme
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) – Home Dark Theme
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) – About Light Theme
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) – About Dark Theme
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) – Not Found Light Theme
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) – Not Found Dark Theme

Set Up Instructions

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

Completion Instructions

The app must have the following functionalities

• Initially, the app should consists of light theme
• When the dark theme image is clicked in the respective route
  • The dark theme image should be changed to light theme image
  • The app should be changed to dark mode
• when the light theme image is clicked in the Respective route
  • The light theme image should be changed to dark theme image
  • The app should be changed to light mode
• The Theme Context has an object as a value with the following properties
  • isDarkTheme – this key is used to change the theme
  • toggleTheme – this method is used to update the value of the isDarkTheme
• When an undefined path is provided in the URL then the page should navigate to the NotFound Route

Use these files to complete the implementation:

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

Important Note

The following instructions are required for the tests to pass

• The Home image for light theme and dark theme should have the alt attribute value as home
• The About image for light theme and dark theme should have the alt attribute value as about
• The Website Logo image for light theme and dark theme should have the alt attribute value as website logo
• The Theme image for light theme and dark theme should have the alt attribute value as theme
• The Theme button should have the testid as theme

Resources

• https://assets.ccbp.in/frontend/react-js/home-light-img.png

• https://assets.ccbp.in/frontend/react-js/home-dark-img.png

• https://assets.ccbp.in/frontend/react-js/about-light-img.png

• https://assets.ccbp.in/frontend/react-js/about-dark-img.png

• https://assets.ccbp.in/frontend/react-js/website-logo-light-theme-img.png

• https://assets.ccbp.in/frontend/react-js/website-logo-dark-theme-img.png

• https://assets.ccbp.in/frontend/react-js/light-theme-img.png

• https://assets.ccbp.in/frontend/react-js/dark-theme-img.png

• https://assets.ccbp.in/frontend/react-js/not-found-img.png alt should be not found

• 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.