Responsive Navbar with light/dark toggle button Using React
Tags: webdev, react, opensource
Published: 2023-11-06 09:42:29

Hello Folks, **today** we are going to setup Responsive **Navbar** with a toggle button to switch between **dark mode** and **light mode** using useContext hook.

As I have **promised** you guys to bring more content on the topic **useContext** hook so here we are, learning in **depth** about it. Follow me to get constant **updates** like this to enrich your knowledge.

As we know setting Navbar with a **responsive** design can be a hectic task if you are planning to build a **large** website, half of our time goes to setup the navbar and today I am planning to give you guys responsive navbar code to **easily** code it and just focus to **grab** the concept of useContext.

So the **prerequisites** to setup this navbar is that you need to install **TailwindCSS** and React.

If you haven't installed TailwindCSS I request you guys to follow this link [TailwindCSS](https://tailwindcss.com/docs/guides/create-react-app)

Now you have every prerequisites here is the Responsive Navbar code that you can **include** it in your React **Project**

```
//Navbar.js

import React, { useContext,  useState } from 'react';
import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai';

import {MdDarkMode} from 'react-icons/md';
import {MdLightMode} from 'react-icons/md';

import { AllContext } from './Context';

const Navbar = () => {
  const [nav, setNav] = useState(false);



  const {darkmode,handleMode}=useContext(AllContext);



  const handleNav = () => {
    setNav(!nav);
  };

  return (
    <div className='flex justify-between items-center h-24 max-w-[1240px] mx-auto px-4 text-white '>
      <h1 className='w-full text-3xl font-bold text-[#00df9a] cursor-pointer'>REACT.</h1>
      <ul className='hidden md:flex cursor-pointer'>
        <li className='p-4'>Home</li>
        <li className='p-4'>Company</li>
        <li className='p-4'>Resources</li>
        <li className='p-4'>About</li>
        <li className='p-4' onClick={handleMode}>{darkmode?<MdLightMode size={25}/>:<MdDarkMode size={25}/>}</li>
      </ul>
      <div onClick={handleNav} className='block md:hidden'>
          {nav ? <AiOutlineClose size={20}/> : <AiOutlineMenu size={20} />}
      </div>
      <ul className={nav ? 'fixed left-0 top-0 w-[60%] h-full border-r border-r-gray-900 bg-[#000300] ease-in-out duration-500' : 'ease-in-out duration-500 fixed left-[-100%]'}>
        <h1 className='w-full text-3xl font-bold text-[#00df9a] m-4 '>REACT.</h1>
          <li className='p-4 border-b border-gray-600'>Home</li>
          <li className='p-4 border-b border-gray-600'>Company</li>
          <li className='p-4 border-b border-gray-600'>Resources</li>
          <li className='p-4 border-b border-gray-600'>About</li>
          <li className='p-4'>Contact</li>
      </ul>
    </div>
  );
};

export default Navbar;
```

This will enable you to **access** Responsive Navbar with **Light/Dark** Toggle button.

Now let's come to our Main topic **useContext** hook. As you might have **already** notice that in our code we used useContext hook to access darkMode and setDarkMode. 

> **useContext** hook is also prop **drilling** approach of **parsing** of data across the pages in React. It simply **means** data are passed around the different pages/component based on the **hierarchy** (Means Top to button approach also means Parent to Child data transfer). 

It simply means if a data is **passed** through any component then it's **child component** or nested components inside that components can easily access that data. Clear Enough Right?

For Visualization of this concept 


![useContext Visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53gnj862ykd5jc4ymb55.PNG)

Here We fetched the **login** credentials in App Component and Since App component is at the Top level of any React Application and **Component A** (User Page) is the child component so login **credentials** is passed from App page to Component A page using useContext hook.

So useContext code for our **Responsive** Navbar for the light/dark toggle **functionality** is:

```
//Context.js

import React, { createContext, useEffect, useState } from "react";

export const AllContext = createContext(null);



  const Context = ({ children }) => {
    
    const [darkmode,setDarkmode]=useState(false);
  
    const handleMode=()=>{
        setDarkmode(!darkmode)
    }


    return (
      <AllContext.Provider
        value={{darkmode,setDarkmode,handleMode}}
      >
        {children}
      </AllContext.Provider>
    );
  };
  
  export default Context;
```

So here we have used useState hook in the **context.js** page to do the toggle and simply pass that **toggle** value in the component `<AllContext.Provider>`. And you can access that toggled value in Navbar using useContext as shown in the `Navbar.js` page


Now, we Simply **wrap** the Context Component in the Top of our **Application** like this:

```

//Main.js

import App from "./App";
import Context from './Context'

export default function Main() {
  return (
   <Context>
      <App />
   </Context>
  )
}


```
In this way, you can use **useContext** hook in your application. If you have any problem please **comment** it out i am more than happy to help and don't forget to like and follow.

> **Sayonaraa!**😉