the overlay in burger resolved
This commit is contained in:
“Salar
parent
8d6a9ab74c
commit
e94514ed02
198
src/components/Burger.tsx
Normal file
198
src/components/Burger.tsx
Normal file
@ -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;
|
||||||
@ -27,6 +27,7 @@ import { useTranslation } from "react-i18next";
|
|||||||
import Link from "components/typography/Link";
|
import Link from "components/typography/Link";
|
||||||
import LocalizationButton from "components/LocalizationButton";
|
import LocalizationButton from "components/LocalizationButton";
|
||||||
import LogoScipaper from "components/LogoScipaper";
|
import LogoScipaper from "components/LogoScipaper";
|
||||||
|
import Burger from "components/Burger";
|
||||||
|
|
||||||
const Header = () => {
|
const Header = () => {
|
||||||
const [authenticated, setAuthenticated] = useState(false);
|
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 ">
|
<div className="flex items-center font-bold text-sm gap-1 md:gap-2 ">
|
||||||
{!authenticated
|
{!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
|
<Button
|
||||||
emphasis="low"
|
emphasis="medium"
|
||||||
|
className="hidden md:flex"
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
className="text-xs sm:px-4 sm:text-sm "
|
|
||||||
>
|
>
|
||||||
{t("navbar.auth.signIn")}
|
{t("navbar.auth.signUp")}
|
||||||
</Button>
|
</Button>,
|
||||||
</>,
|
]
|
||||||
<Button
|
|
||||||
emphasis="medium"
|
|
||||||
className="hidden md:flex"
|
|
||||||
onClick={onClick}
|
|
||||||
>
|
|
||||||
{t("navbar.auth.signUp")}
|
|
||||||
</Button>,
|
|
||||||
]
|
|
||||||
: [
|
: [
|
||||||
<Button emphasis="low">
|
<Button emphasis="low">
|
||||||
<Button.Icon>
|
<Button.Icon>
|
||||||
{!notification ? (
|
{!notification ? (
|
||||||
<SVGBell className="h-6 w-6 fill-gray-900 stroke-gray-900" />
|
<SVGBell className="h-6 w-6 fill-gray-900 stroke-gray-900" />
|
||||||
) : (
|
) : (
|
||||||
<SVGBellNotification 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.Icon>
|
||||||
</Button>,
|
</Button>,
|
||||||
|
|
||||||
<Button emphasis="low" className="hidden lg:flex">
|
<Button emphasis="low" className="hidden lg:flex">
|
||||||
<Button.Icon>
|
<Button.Icon>
|
||||||
<Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
|
<Avatar className="bg-[rgb(255,122,69)] text-white">K</Avatar>
|
||||||
</Button.Icon>
|
</Button.Icon>
|
||||||
</Button>,
|
</Button>,
|
||||||
]}
|
]}
|
||||||
{/* Burger component will be shown for the small screens */}
|
{/* Burger component will be shown for the small screens */}
|
||||||
<Navbar className="block lg:hidden" />
|
<Burger className="block lg:hidden" />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user