Responsive Navbar with light/dark toggle button Using React

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

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

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!😉