Skip to content

Sai-Mohitha/Navbar-with-Context

Repository files navigation

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

Refer to the image below:


navbar with context 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 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
Components Structure
component structure breakdown Home

component structure breakdown About

Implementation Files

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

Click to view

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 data-testid as theme

Resources

Image URLs
Colors
Hex: #000000
Hex: #ffffff
Hex: #1e293b
Hex: #333333
Hex: #dcdcdc
Hex: #171f46
Hex: #334155
Hex: #64748b
Hex: #f8fafc
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.