Scipaper/Frontend
5
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

the overlay in burger resolved

Browse Source
This commit is contained in:
“Salar 2022-10-31 17:13:43 +03:00
parent 8d6a9ab74c
commit e94514ed02
2 changed files with 230 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
src/components/Burger.tsx Normal file
View 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;

3
src/components/parts/Header.tsx
View File

@ -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);
@ -173,7 +174,7 @@ const Header = () => {
</Button>,
]}
{/* Burger component will be shown for the small screens */}
<Navbar className="block lg:hidden" />
<Burger className="block lg:hidden" />
</div>
</header>
);