How to add hamburger menu & functionality in React for mobile view? – CSS

I’m working on a React project and I’m trying to make my header section more mobile-responsive. Currently, I have three links (Home, About, and Login) in the left section, a centered logo/title, and search and cart buttons on the right side.

I want to add a hamburger icon that appears on mobile devices (when the screen width is less than 768px) that will toggle a menu containing the Home, About, and Login links. However, I want to keep the search and cart buttons outside of this hamburger menu, and maintain their position on the right side of the header.and I want to add the functionality code for the hamburger part

Here’s my current code for the Header component (including the relevant styles):

Header.jsx

import { useEffect, useState, useContext } from "react";
import { useNavigate } from "react-router-dom";

import { TbSearch } from "react-icons/tb";
import { CgShoppingCart } from "react-icons/cg";

import Search from "./Search/Search";
import Cart from "../Cart/Cart";
import { Context } from "../../utils/context";

import "./Header.scss";

const Header = () => {

    const [scrolled, setScrolled] = useState(false);
    const [showCart, setShowCart] = useState(false);
    const [showSearch, setShowSearch] = useState(false);
    const { cartCount } = useContext(Context);
    const navigate = useNavigate()

    const handleScroll = () => {
        const offset = window.scrollY;
        if (offset > 200) {
            setScrolled(true);
        }
        else {
            setScrolled(false)
        }
    };

    useEffect(() => {
        window.addEventListener("scroll", handleScroll)
    }, []);

    return (
        <>
            <header className={`main-header ${scrolled ? 'sticky-header' : ''}`}>
                <div className="header-content">
                    <ul className="left">
                        <li onClick={() => navigate("/")}>Home</li>
                        <li onClick={() => navigate("/about")}>About</li>
                        <li onClick={() => navigate("/login")}>Login</li>
                    </ul>

                    <div className="center" onClick={() => navigate("/")}>GOLOC.</div>

                    <div className="right">
                        <TbSearch onClick={() => setShowSearch(true)} />

                        <span className="cart-icon" onClick={() => setShowCart(true)}>
                            <CgShoppingCart />
                            {!!cartCount && <span>{cartCount}</span>}
                        </span>
                    </div>
                </div>
            </header>

            {showCart && <Cart setShowCart={setShowCart} />}
            {showSearch && <Search setShowSearch={setShowSearch} />}
        </>
    );
};

export default Header;

Header.scss

@import "../../css-config/mixins.scss";

.main-header {
    width: 100%;
    padding: 0 20px;
    background-color: #212121;
    color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 99;

    @include md {
        padding: 0 40px;
    }

    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        max-width: 1200px;
        margin: 0 auto;

        @include md {
            height: 80px;
        }

        .left {
            list-style-type: none;
            display: none;
            gap: 25px;

            @include md {
                display: flex;
            }

            li {
                font-size: 14px;
                font-weight: 600;
                text-transform: uppercase;
                cursor: pointer;

                @include sm {
                    // visibility: hidden;
                }
            }
        }

        .center {
            font-size: 22px;
            font-weight: 700;
            cursor:

I’ve tried looking up solutions online and have experimented with various CSS properties and React libraries (such as react-icons), but I can’t seem to get the desired result. Any help or guidance would be greatly appreciated!

This is Github repository of this project: https://github.com/aditya9-2/GOLOC