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>
);