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 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>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user