sixty5-street/components/layout/MobileMenu.js

'use client'
import Link from "next/link";
import { useState } from "react";

const MobileMenu = ({ isSidebar, handleMobileMenu, handleSidebar }) => {
  const [isActive, setIsActive] = useState({
    status: false,
    key: "",
    subMenuKey: "",
  });

  const handleToggle = (key, subMenuKey = "") => {
    if (isActive.key === key && isActive.subMenuKey === subMenuKey) {
      setIsActive({
        status: false,
        key: "",
        subMenuKey: "",
      });
    } else {
      setIsActive({
        status: true,
        key,
        subMenuKey,
      });
    }
  };

  return (
    <>
      <div className="mobile-menu">
        <div className="menu-backdrop" onClick={handleMobileMenu}></div>
        <div className="close-btn" onClick={handleMobileMenu}>
          <span className="icon flaticon-multiply"></span>
        </div>

        <nav className="menu-box">
          <div className="nav-logo">
            <Link href="/" onClick={handleMobileMenu}>
              <img src="/assets/images/logo/logo-black.png" alt="" title="" />
            </Link>
          </div>

          <div className="menu-outer">
            <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
              <ul className="navigation">
                {/* <li className={isActive.key == 1 ? "dropdown current" : "dropdown"}><Link href="/" onClick={handleMobileMenu}>Home</Link>
                  <ul style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
                    <li><Link href="/" onClick={handleMobileMenu}>Home One</Link></li>
                    <li><Link href="index-2" onClick={handleMobileMenu}>Home Two</Link></li>
                    <li><Link href="index-3" onClick={handleMobileMenu}>Home Three</Link></li>
                    <li><Link href="index-4" onClick={handleMobileMenu}>Home Four</Link></li>
                  </ul>
                  <div className={isActive.key == 1 ? "dropdown-btn open" : "dropdown-btn"} onClick={() => handleToggle(1)}><span className="fa fa-angle-right" /></div>
                </li> */}

                <li className={isActive.key == 2 ? "dropdown current" : "dropdown"}>
                  <Link href="/#about" onClick={handleMobileMenu}>About</Link>
                  {/* <ul style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
                    <li><Link href="about" onClick={handleMobileMenu}>About</Link></li>
                    <li><Link href="team" onClick={handleMobileMenu}>Team</Link></li>
                    <li><Link href="restaurant" onClick={handleMobileMenu}>Restaurant</Link></li>
                  </ul>
                  <div className={isActive.key == 2 ? "dropdown-btn open" : "dropdown-btn"} onClick={() => handleToggle(2)}><span className="fa fa-angle-right" /></div> */}
                </li>

                <li><Link href="/#popular-dishes" onClick={handleMobileMenu}>Popular Dishes</Link></li>
                <li><Link href="/#sixty5-street-specials" onClick={handleMobileMenu}>Sixty5 Street Specials</Link></li>

                <li className={isActive.key == 3 ? "dropdown current" : "dropdown"}>
                  <Link href="/#menu" onClick={handleMobileMenu}>Menu</Link>
                  {/* <ul style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
                    <li><Link href="menu" onClick={handleMobileMenu}>Menu</Link></li>
                    <li><Link href="milkshake" onClick={handleMobileMenu}>Milk Shake</Link></li>
                    <li><Link href="frappe" onClick={handleMobileMenu}>Frappe</Link></li>
                    <li><Link href="boba-tea" onClick={handleMobileMenu}>Boba Tea</Link></li>
                    <li><Link href="slushy" onClick={handleMobileMenu}>Slushy</Link></li>
                  </ul>
                  <div className={isActive.key == 3 ? "dropdown-btn open" : "dropdown-btn"} onClick={() => handleToggle(3)}><span className="fa fa-angle-right" /></div> */}
                </li>

                {/* <li className={isActive.key == 4 ? "dropdown current" : "dropdown"}><Link href="/#" onClick={handleMobileMenu}>Gallery</Link>
                  <ul style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
                    <li><Link href="gallery" onClick={handleMobileMenu}>Gallery</Link></li>
                    <li><Link href="gallery-2" onClick={handleMobileMenu}>Gallery 02</Link></li>
                  </ul>
                  <div className={isActive.key == 4 ? "dropdown-btn open" : "dropdown-btn"} onClick={() => handleToggle(4)}><span className="fa fa-angle-right" /></div>
                </li>

                <li className={isActive.key == 5 ? "dropdown current" : "dropdown"}><Link href="/#" onClick={handleMobileMenu}>Blog</Link>
                  <ul style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}>
                    <li><Link href="blog-classic" onClick={handleMobileMenu}>Blog Classic</Link></li>
                    <li><Link href="blog-details2" onClick={handleMobileMenu}>Blog Single 02</Link></li>
                    <li><Link href="blog-details" onClick={handleMobileMenu}>Blog Details</Link></li>
                    <li><Link href="/error" onClick={handleMobileMenu}>Not Found</Link></li>
                  </ul>
                  <div className={isActive.key == 5 ? "dropdown-btn open" : "dropdown-btn"} onClick={() => handleToggle(5)}><span className="fa fa-angle-right" /></div>
                </li>
                <li><Link href="/contact" onClick={handleMobileMenu}>Contact</Link></li> */}
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </>
  );
};

export default MobileMenu;