Header with the navbar files - without additional files

src/components/Header.tsx

@@ -0,0 +1,163 @@
+import classNames from "classnames";
+import { useState } from "react";
+/* -------------------------------------------------------------------------- */
+/*                                 Components                                 */
+/* -------------------------------------------------------------------------- */
+import ContextMenuAction from "./ContextMenuAction";
+import ContextMenu from "./ContextMenu";
+import Logofreeland from "./Logofreeland";
+import { Button } from "./Button/Button";
+import Avatar from "./Avatar";
+import Navbar from "./Navbar";
+import Bell from "./Bell";
+import Logo from "./Logo";
+import Link from "./Link";
+
+/* -------------------------------------------------------------------------- */
+/*                                    Icons                                   */
+/* -------------------------------------------------------------------------- */
+import { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.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";
+
+const Header = () => {
+  const [authenticated, setAuthenticated] = useState(false);
+  const onClick = () => setAuthenticated(true);
+
+  /* -------------------------------------------------------------------------- */
+  /*                         Implement Header Component                         */
+  /* -------------------------------------------------------------------------- */
+  return (
+    <header
+      className="header flex justify-between items-center  box-border w-full 
+                border border-gray-75  
+                h-16 
+                px-4
+                gap-5
+                md:gap-20
+                lg:gap-40 lg:px-8
+                xl:gap-60 xl:px-16"
+    >
+      {/* Logo and Menu */}
+      <div className="flex gap-8 xl:gap-x-16">
+        {/* Logo  - start - className="w-7 sm:w-10  " /> */}
+        <a className="Logo flex items-center gap-1  sm:gap-2 " href="/">
+          <Logo
+            className={classNames(authenticated ? "w-10" : "w-7 sm:w-10")}
+          />
+          <Logofreeland
+            className={classNames(authenticated ? "w-28" : "w-20 sm:w-28")}
+          />
+        </a>
+        {/* Logo  - end - */}
+
+        {/* Menu( Create new - My library - About ) Start */}
+        <div
+          className="hidden lg:flex items-center
+             gap-2"
+        >
+          {/* Link Create now - start -  */}
+          <Link className="text-blue-500 px-4 font-bold uppercase" href="#">
+            Create new
+          </Link>
+          {/* Link Create now - end -  */}
+
+          {/* Dropdown Menu My library - start - */}
+          <ContextMenu
+            emphasis="high"
+            button="My library"
+            className="border-none uppercase"
+          >
+            <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 My library - End -  */}
+
+          {/* Dropdown Menu About - start - */}
+          <ContextMenu
+            emphasis="high"
+            button="About"
+            className="border-none uppercase"
+          >
+            <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 - */}
+        </div>
+        {/* Menu( Create new - My library - About ) End */}
+      </div>
+
+      {/* Sign in - Sign up - Notification - Avatar - Burger  */}
+      <div className="flex items-center font-bold text-sm gap-1 md:gap-2 ">
+        {!authenticated
+          ? [
+              <Button
+                emphasis="low"
+                onClick={onClick}
+                className="text-xs sm:px-4 sm:text-sm  "
+              >
+                Sign in
+              </Button>,
+              <Button
+                emphasis="medium"
+                className="hidden md:flex"
+                onClick={onClick}
+              >
+                Sign up
+              </Button>,
+            ]
+          : [
+              <Button emphasis="low">
+                <Button.Icon>
+                  <Bell className="h-6 w-6" />
+                </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" />
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/Navbar.tsx

@@ -1,21 +1,34 @@
+import { Menu, Transition } from "@headlessui/react";
 import React, { Fragment } from "react";
 import classNames from "classnames";
-import { Menu, Transition } from "@headlessui/react";
-import { ChevronDownIcon } from "@heroicons/react/solid";
-import Burger from "./Burger";
 
-const Navbar = () => {
+/* -------------------------------------------------------------------------- */
+/*                                 Components                                 */
+/* -------------------------------------------------------------------------- */
+import ContextMenuAction from "./ContextMenuAction";
+import ContextMenu from "./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>
+    <div {...props}>
       <Menu as="div" className="relative inline-block text-left">
         <div>
-          <Menu.Button
+          <Menu.Button as={Button} emphasis="low">
-            className="inline-flex justify-center w-full rounded-md border 
+            <Button.Icon>
-          border-gray-300 shadow-sm px-1 py-1 bg-white text-sm font-medium 
+              <SVGHamburger className="h-6 w-6" />
-          text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 
+            </Button.Icon>
-          focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-black"
-          >
-            <Burger className="h-6 w-6" />
           </Menu.Button>
         </div>
 
@@ -55,7 +68,37 @@ const Navbar = () => {
                       "block px-4 py-2 text-sm"
                     )}
                   >
-                    MY LIBRARY
+                    {/* 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>
@@ -68,25 +111,31 @@ const Navbar = () => {
                       "block px-4 py-2 text-sm"
                     )}
                   >
-                    ABOUT
+                    {/* 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>
-              {/* <form method="POST" action="#">
-                <Menu.Item>
-                  {({ active }) => (
-                    <button
-                      type="submit"
-                      className={classNames(
-                        active ? "bg-gray-100 text-gray-900" : "text-gray-700",
-                        "block w-full text-left px-4 py-2 text-sm"
-                      )}
-                    >
-                      Sign out
-                    </button>
-                  )}
-                </Menu.Item>
-              </form> */}
             </div>
           </Menu.Items>
         </Transition>