Basics

Left Nav Toggle

import { useState } from "react";

const LeftNavMenu = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="flex h-screen">
      <div
        className={`fixed z-10 inset-0 bg-black opacity-50 transition-opacity ${
          isOpen ? "visible" : "invisible"
        } md:hidden`}
        onClick={toggleMenu}
      ></div>
      <div
        className={`fixed z-20 inset-y-0 left-0 w-64 transition duration-300 transform ${
          isOpen ? "translate-x-0" : "-translate-x-full"
        } md:relative md:translate-x-0`}
      >
        {/* Left nav menu content goes here */}
      </div>
      <div className="flex flex-col flex-1 overflow-hidden">
        {/* Main content goes here */}
      </div>
    </div>
  );
};

export default LeftNavMenu;