Header with the navbar files - without additional files
This commit is contained in:
“Salar
parent
3671d3d5bc
commit
dafbb444be
163
src/components/Header.tsx
Normal file
163
src/components/Header.tsx
Normal file
@ -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;
|
||||
@ -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
|
||||
className="inline-flex justify-center w-full rounded-md border
|
||||
border-gray-300 shadow-sm px-1 py-1 bg-white text-sm font-medium
|
||||
text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2
|
||||
focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-black"
|
||||
>
|
||||
<Burger className="h-6 w-6" />
|
||||
<Menu.Button as={Button} emphasis="low">
|
||||
<Button.Icon>
|
||||
<SVGHamburger className="h-6 w-6" />
|
||||
</Button.Icon>
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user