front-end/src/components/Navbar.tsx

import { Menu, Transition } from "@headlessui/react";
import React, { Fragment } from "react";
import classNames from "classnames";

/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import ContextMenuAction from "./drop-down-menu/ContextMenuAction";
import ContextMenu from "./drop-down-menu/ContextMenu";
import { Button } from "./Button/Button";

/* -------------------------------------------------------------------------- */
/*                                    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";

type Props = React.ComponentPropsWithoutRef<"div">;

const Navbar = (props: Props) => {
  return (
    <div {...props}>
      <Menu as="div" className="relative inline-block text-left">
        <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-56 rounded-md 
          shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
          >
            <div className="py-1">
              <Menu.Item>
                {({ active }) => (
                  <a
                    href="#"
                    className={classNames(
                      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
                      "block px-4 py-2 text-sm"
                    )}
                  >
                    CREATE NEW
                  </a>
                )}
              </Menu.Item>
              <Menu.Item>
                {({ active }) => (
                  <a
                    href="#"
                    className={classNames(
                      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
                      "block px-4 py-2 text-sm"
                    )}
                  >
                    {/* Dropdown Menu start My library */}
                    <ContextMenu
                      emphasis="low"
                      button="MY LIBRARY"
                      className="border-none"
                    >
                      <ContextMenuAction
                        caption="My Publications"
                        action={() => console.log("My publications")}
                        icon={<SVGFile className="stroke-black" />}
                      ></ContextMenuAction>

                      <ContextMenuAction
                        caption="My Favorites"
                        action={() => console.log("My Favorites")}
                        icon={<SVGFavoriteOutlined className="stroke-black" />}
                      ></ContextMenuAction>

                      <ContextMenuAction
                        caption="My Collections"
                        action={() => console.log("My Collections")}
                        icon={<SVGFolder className="stroke-black fill-black" />}
                      ></ContextMenuAction>

                      <ContextMenuAction
                        caption="Recent Viewed"
                        action={() => console.log("Recent Viewed")}
                        icon={<SVGEye className="stroke-black " />}
                      ></ContextMenuAction>
                    </ContextMenu>
                    {/* Dropdown Menu End My library */}
                  </a>
                )}
              </Menu.Item>
              <Menu.Item>
                {({ active }) => (
                  <a
                    href="#"
                    className={classNames(
                      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
                      "block px-4 py-2 text-sm"
                    )}
                  >
                    {/* Dropdown Menu About - start - */}
                    <ContextMenu
                      emphasis="low"
                      button="ABOUT"
                      className="border-none"
                    >
                      <ContextMenuAction
                        caption="About Freeland"
                        action={() => console.log("About Freeland")}
                      ></ContextMenuAction>

                      <ContextMenuAction
                        caption="Contact Us"
                        action={() => console.log("Contact Us")}
                      ></ContextMenuAction>

                      <ContextMenuAction
                        caption="Help"
                        action={() => console.log("Help")}
                      ></ContextMenuAction>
                    </ContextMenu>
                    {/* Dropdown Menu About - End - */}
                  </a>
                )}
              </Menu.Item>
            </div>
          </Menu.Items>
        </Transition>
      </Menu>
    </div>
  );
};

export default Navbar;