🛠️ Implemented MenuBar component

✨ Added responsive navigation menu
🚀 Ready to enhance user experience
📝 Updated MenuBar with animation
👀 Keep an eye out for further improvements

src/shared/MenuBar.tsx

@@ -0,0 +1,81 @@
+import React, { useState, Fragment, useEffect } from "react";
+import { Transition, Dialog } from "@headlessui/react";
+import NavMobile from "./Navigation/NavMobile";
+import { Bars3Icon } from "@heroicons/react/24/outline";
+import { usePathname } from "next/navigation";
+
+export interface MenuBarProps {
+  className?: string;
+  iconClassName?: string;
+}
+const MenuBar: React.FC<MenuBarProps> = ({
+  className = "p-2.5 rounded-lg text-neutral-700 dark:text-neutral-300",
+  iconClassName = "h-8 w-8",
+}) => {
+  const [isVisable, setIsVisable] = useState(false);
+
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setIsVisable(false);
+  }, [pathname]);
+
+  const handleOpenMenu = () => setIsVisable(true);
+  const handleCloseMenu = () => setIsVisable(false);
+
+  const renderContent = () => {
+    return (
+      <Transition appear show={isVisable} as={Fragment}>
+        <Dialog
+          as="div"
+          className="relative z-50 overflow-hidden"
+          onClose={handleCloseMenu}
+        >
+          <Transition.Child
+            as={Fragment}
+            enter=" duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave=" duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Overlay className="fixed inset-0 bg-black/60 dark:bg-black/70" />
+          </Transition.Child>
+          <div className="fixed inset-0">
+            <div className="flex justify-end min-h-full ">
+              <Transition.Child
+                as={Fragment}
+                enter="transition duration-100 transform"
+                enterFrom="opacity-0 translate-x-56"
+                enterTo="opacity-100 translate-x-0"
+                leave="transition duration-150 transform"
+                leaveFrom="opacity-100 translate-x-0"
+                leaveTo="opacity-0 translate-x-56"
+              >
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden transition-all ">
+                  <NavMobile onClickClose={handleCloseMenu} />
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    );
+  };
+
+  return (
+    <>
+      <button
+        onClick={handleOpenMenu}
+        className={`focus:outline-none flex items-center justify-center ${className}`}
+      >
+        <Bars3Icon className={iconClassName} />
+      </button>
+
+      {renderContent()}
+    </>
+  );
+};
+
+export default MenuBar;