From 5315330818254ffec4412236bbb804508d934c5e Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:17:54 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Implemented=20MenuBar?=
 =?UTF-8?q?=20component=20=E2=9C=A8=20Added=20responsive=20navigation=20me?=
 =?UTF-8?q?nu=20=F0=9F=9A=80=20Ready=20to=20enhance=20user=20experience=20?=
 =?UTF-8?q?=F0=9F=93=9D=20Updated=20MenuBar=20with=20animation=20?=
 =?UTF-8?q?=F0=9F=91=80=20Keep=20an=20eye=20out=20for=20further=20improvem?=
 =?UTF-8?q?ents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/MenuBar.tsx | 81 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/shared/MenuBar.tsx

diff --git a/src/shared/MenuBar.tsx b/src/shared/MenuBar.tsx
new file mode 100644
index 0000000..c12be0b
--- /dev/null
+++ b/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;