From e94514ed022a8dcec850034f201a70e190cd7c5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Mon, 31 Oct 2022 17:13:43 +0300
Subject: [PATCH] the overlay in burger resolved

---
 src/components/Burger.tsx       | 198 ++++++++++++++++++++++++++++++++
 src/components/parts/Header.tsx |  63 +++++-----
 2 files changed, 230 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Burger.tsx

diff --git a/src/components/Burger.tsx b/src/components/Burger.tsx
new file mode 100644
index 0000000..99b9e67
--- /dev/null
+++ b/src/components/Burger.tsx
@@ -0,0 +1,198 @@
+import { Menu, Transition } from "@headlessui/react";
+import React, { Fragment } from "react";
+import classNames from "classnames";
+import { Disclosure } from "@headlessui/react";
+
+/* -------------------------------------------------------------------------- */
+/*                                 Components                                 */
+/* -------------------------------------------------------------------------- */
+import ContextMenuAction from "./drop-down-menu/ContextMenuAction";
+import ContextMenu from "./drop-down-menu/ContextMenu";
+import { Button } from "./Button/Button";
+import Link from "./typography/Link";
+
+/* -------------------------------------------------------------------------- */
+/*                                    Icons                                   */
+/* -------------------------------------------------------------------------- */
+import { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg";
+import { ReactComponent as SVGHamburger } from "assets/svg/hamburger.svg";
+import { ReactComponent as SVGFolder } from "assets/svg/folder.svg";
+import { ReactComponent as SVGFile } from "assets/svg/file.svg";
+import { ReactComponent as SVGEye } from "assets/svg/eye.svg";
+import { ReactComponent as SVGArrowUp } from "assets/svg/arrow-up.svg";
+import { ReactComponent as SVGCaretDown } from "assets/svg/caret-down.svg";
+
+type Props = React.ComponentPropsWithoutRef<"div">;
+
+const Burger = (props: Props) => {
+  return (
+    <div {...props}>
+      <Menu as="div" className="relative inline-block text-left z-30">
+        <div>
+          <Menu.Button as={Button} emphasis="low">
+            <Button.Icon>
+              <SVGHamburger className="h-6 w-6" />
+            </Button.Icon>
+          </Menu.Button>
+        </div>
+
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items
+            className="origin-top-right absolute right-0 mt-5 w-44 rounded-md 
+          shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
+          >
+            <div className="py-1">
+              <Disclosure>
+                <Disclosure.Button className="uppercase text-base	 px-2 py-1">
+                  <Link className="text-[#096DD9]">create new</Link>
+                </Disclosure.Button>
+              </Disclosure>
+              <hr />
+              <Disclosure>
+                {({ open }) => (
+                  <>
+                    <Disclosure.Button
+                      className="uppercase px-2 flex justify-between w-full items-center
+                      py-1
+                      hover:bg-gray-100
+                      text-base	
+                     "
+                    >
+                      my library
+                      <SVGArrowUp
+                        className={`${
+                          open ? "rotate-180 transform" : "rotate-360"
+                        } h-5 w-5 `}
+                      />
+                    </Disclosure.Button>
+
+                    <Link to="#" className="w-full">
+                      <Disclosure.Panel
+                        className="px-2 flex items-center font-normal	gap-1 py-1 w-full ease-in-out duration-300
+                        rounded
+                        hover:bg-gray-200
+                        text-base	
+                        "
+                      >
+                        <SVGFile className="stroke-black w-4 h-4" />
+                        My Publications
+                      </Disclosure.Panel>
+                    </Link>
+
+                    <Link to="#" className="w-full">
+                      <Disclosure.Panel
+                        className="px-2 flex items-center font-normal	gap-1 py-1 w-full ease-in-out duration-300
+                        rounded
+                        hover:bg-gray-200
+                        text-base	
+                        "
+                      >
+                        <SVGFavoriteOutlined className="stroke-black w-4 h-4" />
+                        My Favorites
+                      </Disclosure.Panel>
+                    </Link>
+
+                    <Link to="#" className="w-full">
+                      <Disclosure.Panel
+                        className="px-2 flex items-center font-normal	gap-1 py-1 w-full ease-in-out duration-300
+                        rounded
+                        hover:bg-gray-200
+                        text-base	
+                        "
+                      >
+                        <SVGFolder className="stroke-black fill-black w-4 h-4" />
+                        My Collections
+                      </Disclosure.Panel>
+                    </Link>
+
+                    <Link to="#" className="w-full">
+                      <Disclosure.Panel
+                        className="px-2 flex items-center font-normal	gap-1 py-1 w-full ease-in-out duration-300
+                         rounded
+                         hover:bg-gray-200
+                         text-base	
+                         "
+                      >
+                        <SVGEye className="stroke-black w-4 h-4" />
+                        Recent Viewed
+                      </Disclosure.Panel>
+                    </Link>
+                  </>
+                )}
+              </Disclosure>
+              <hr />
+              {/* Third list - start */}
+              <Disclosure>
+                {({ open }) => (
+                  <>
+                    <Disclosure.Button
+                      className="uppercase px-2 flex justify-between w-full items-center
+                      py-1
+                      hover:bg-gray-100
+                      text-base	
+                     "
+                    >
+                      About
+                      <SVGArrowUp
+                        className={`${
+                          open ? "rotate-180 transform" : "rotate-360"
+                        } h-5 w-5 `}
+                      />
+                    </Disclosure.Button>
+
+                    <Link to="#" className="w-full">
+                      <Disclosure.Panel
+                        className="px-2 flex items-center font-normal	gap-1 py-1 w-full ease-in-out duration-300
+                        rounded
+                        hover:bg-gray-200
+                        text-base	
+                        "
+                      >
+                        About Freeland
+                      </Disclosure.Panel>
+                    </Link>
+
+                    <Link to="#" className="w-full">
+                      <Disclosure.Panel
+                        className="px-2 flex items-center font-normal	gap-1 py-1 w-full ease-in-out duration-300
+                        rounded
+                        hover:bg-gray-200
+                        text-base	
+                        "
+                      >
+                        Contact Us
+                      </Disclosure.Panel>
+                    </Link>
+
+                    <Link to="#" className="w-full">
+                      <Disclosure.Panel
+                        className="px-2 flex items-center font-normal	gap-1 py-1 w-full ease-in-out duration-300
+                        rounded
+                        hover:bg-gray-200
+                        text-base	
+                        "
+                      >
+                        Help
+                      </Disclosure.Panel>
+                    </Link>
+                  </>
+                )}
+              </Disclosure>
+              {/* Third list - end */}
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
+  );
+};
+
+export default Burger;
diff --git a/src/components/parts/Header.tsx b/src/components/parts/Header.tsx
index a34dc4d..e38c1d5 100755
--- a/src/components/parts/Header.tsx
+++ b/src/components/parts/Header.tsx
@@ -27,6 +27,7 @@ import { useTranslation } from "react-i18next";
 import Link from "components/typography/Link";
 import LocalizationButton from "components/LocalizationButton";
 import LogoScipaper from "components/LogoScipaper";
+import Burger from "components/Burger";
 
 const Header = () => {
   const [authenticated, setAuthenticated] = useState(false);
@@ -137,43 +138,43 @@ const Header = () => {
       <div className="flex items-center font-bold text-sm gap-1 md:gap-2 ">
         {!authenticated
           ? [
-            <>
-              <LocalizationButton className="hidden md:flex" />
+              <>
+                <LocalizationButton className="hidden md:flex" />
+                <Button
+                  emphasis="low"
+                  onClick={onClick}
+                  className="text-xs sm:px-4 sm:text-sm  "
+                >
+                  {t("navbar.auth.signIn")}
+                </Button>
+              </>,
               <Button
-                emphasis="low"
+                emphasis="medium"
+                className="hidden md:flex"
                 onClick={onClick}
-                className="text-xs sm:px-4 sm:text-sm  "
               >
-                {t("navbar.auth.signIn")}
-              </Button>
-            </>,
-            <Button
-              emphasis="medium"
-              className="hidden md:flex"
-              onClick={onClick}
-            >
-              {t("navbar.auth.signUp")}
-            </Button>,
-          ]
+                {t("navbar.auth.signUp")}
+              </Button>,
+            ]
           : [
-            <Button emphasis="low">
-              <Button.Icon>
-                {!notification ? (
-                  <SVGBell className="h-6 w-6 fill-gray-900 stroke-gray-900" />
-                ) : (
-                  <SVGBellNotification className="h-6 w-6 fill-gray-900 stroke-gray-900" />
-                )}
-              </Button.Icon>
-            </Button>,
+              <Button emphasis="low">
+                <Button.Icon>
+                  {!notification ? (
+                    <SVGBell className="h-6 w-6 fill-gray-900 stroke-gray-900" />
+                  ) : (
+                    <SVGBellNotification className="h-6 w-6 fill-gray-900 stroke-gray-900" />
+                  )}
+                </Button.Icon>
+              </Button>,
 
-            <Button emphasis="low" className="hidden lg:flex">
-              <Button.Icon>
-                <Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
-              </Button.Icon>
-            </Button>,
-          ]}
+              <Button emphasis="low" className="hidden lg:flex">
+                <Button.Icon>
+                  <Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
+                </Button.Icon>
+              </Button>,
+            ]}
         {/* Burger component will be shown for the small screens */}
-        <Navbar className="block lg:hidden" />
+        <Burger className="block lg:hidden" />
       </div>
     </header>
   );