Create Responsive Sidebar with React JS and tailwindCSS

Are you interested in making websites? Do you want to learn something new? If so, you're in the right place! In this easy tutorial post, we'll show you how to create a responsive sidebar for your website using React JS and Tailwind CSS.

Why React JS and Tailwind CSS?

React JS helps you make websites that change and react to what people do. It's popular because it's easy to use and makes your website look good. Tailwind CSS is a tool that helps you style your website quickly and easily. Together, they make a great team for building websites that look good and work well.

Getting Started

First, make sure you have a computer with Node.js and npm (Node Package Manager) installed. If you don't know what those are, don't worry! They're just tools we need to use to build our website. Then, follow these steps:

Create a React App Using the below command

npx create-react-app my-app

If you want to know how to install Tailwind CSS watch the below video 

Once you are done with all the setups, follow the below steps

Step 1 - /src/components/Sidebar.jsx

import React, { useState } from 'react'
import logo from '../logo.png';

// icons
import { MdMenuOpen } from "react-icons/md";
import { IoHomeOutline } from "react-icons/io5";
import { FaProductHunt } from "react-icons/fa";
import { FaUserCircle } from "react-icons/fa";
import { TbReportSearch } from "react-icons/tb";
import { IoLogoBuffer } from "react-icons/io";
import { CiSettings } from "react-icons/ci";
import { MdOutlineDashboard } from "react-icons/md";

const menuItems = [
  {
    icons: <IoHomeOutline size={30} />,
    label: 'Home'
  },
  {
    icons: <FaProductHunt size={30} />,
    label: 'Products'
  },
  {
    icons: <MdOutlineDashboard size={30} />,
    label: 'Dashboard'
  },
  {
    icons: <CiSettings size={30} />,
    label: 'Setting'
  },
  {
    icons: <IoLogoBuffer size={30} />,
    label: 'Log'
  },
  {
    icons: <TbReportSearch size={30} />,
    label: 'Report'
  }
]

export default function Sidebar() {

  const [open, setOpen] = useState(true)

  return (
    <nav className={`shadow-md h-screen p-2 flex flex-col duration-500 bg-blue-600 text-white ${open ? 'w-60' : 'w-16'}`}>

      {/* Header */}
      <div className=' px-3 py-2 h-20 flex justify-between items-center'>
        <img src={logo} alt="Logo" className={`${open ? 'w-10' : 'w-0'} rounded-md`} />
        <div><MdMenuOpen size={34} className={` duration-500 cursor-pointer ${!open && ' rotate-180'}`} onClick={() => setOpen(!open)} /></div>
      </div>

      {/* Body */}

      <ul className='flex-1'>
        {
          menuItems.map((item, index) => {
            return (
              <li key={index} className='px-3 py-2 my-2 hover:bg-blue-800 rounded-md duration-300 cursor-pointer flex gap-2 items-center relative group'>
                <div>{item.icons}</div>
                <p className={`${!open && 'w-0 translate-x-24'} duration-500 overflow-hidden`}>{item.label}</p>
                <p className={`${open && 'hidden'} absolute left-32 shadow-md rounded-md
                 w-0 p-0 text-black bg-white duration-100 overflow-hidden group-hover:w-fit group-hover:p-2 group-hover:left-16
                `}>{item.label}</p>
              </li>
            )
          })
        }
      </ul>
      {/* footer */}
      <div className='flex items-center gap-2 px-3 py-2'>
        <div><FaUserCircle size={30} /></div>
        <div className={`leading-5 ${!open && 'w-0 translate-x-24'} duration-500 overflow-hidden`}>
          <p>Saheb</p>
          <span className='text-xs'>saheb@gmail.com</span>

        </div>
      </div>


    </nav>
  )
}

Once the component is created, let's import the component to the App.jsx component.

Step 2 - /src/App.jsx

import logo from './logo.svg';
import './App.css';
import Sidebar from './components/Sidebar';

function App() {
  return (
    <div className=' bg-gray-100'>
      <Sidebar/>
    </div>
  );
}

export default App;

Complete Video:

GitHub link : https://github.com/SAHEB24027824/SideNav-React-Tailwind