diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index d9934f5..0000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-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;
diff --git a/src/components/parts/Header.tsx b/src/components/parts/Header.tsx
index 99650bb..12e8a4e 100644
--- a/src/components/parts/Header.tsx
+++ b/src/components/parts/Header.tsx
@@ -1,113 +1,174 @@
-/* -------------------------------------------------------------------------- */
-/* Libs */
-/* -------------------------------------------------------------------------- */
-import React, { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import classNames from "classnames";
+import { useState } from "react";
/* -------------------------------------------------------------------------- */
/* Components */
/* -------------------------------------------------------------------------- */
-import ContextMenu from "components/containers/contextmenu/ContextMenu";
-import Logotype from "components/Logotype";
-import Avatar from "components/containers/Avatar";
-import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction";
-/* -------------------------------------------------------------------------- */
-/* SVG */
-/* -------------------------------------------------------------------------- */
-/* -------------------------------------------------------------------------- */
-/* Hooks */
-/* -------------------------------------------------------------------------- */
-import { useUserStore } from "user/data/userSlice";
-import { useUserViewModel } from "user/controller/userViewModel";
-import { useUIStore } from "ui/data/uiSlice";
-import { useUIViewModel } from "ui/controller/uiViewModel";
-import { useTranslation } from "react-i18next";
-import ServicesNavigationContext from "services/views/ServicesNavigationContext";
-import { useAuthStore } from "auth/data/authSlice";
-import { useAuthViewModel } from "auth/controller/useAuthViewModel";
+import ContextMenuAction from "../drop-down-menu/ContextMenuAction";
+import ContextMenu from "../drop-down-menu/ContextMenu";
+import Logofreeland from "../Logofreeland";
+import { Button } from "../Button/Button";
+import Avatar from "../Avatar";
+import Navbar from "../Navbar";
+import Logo from "../Logo";
+import { RouterLink } from "components/typography/RouterLink";
/* -------------------------------------------------------------------------- */
-/* Main application header */
+/* Icons */
/* -------------------------------------------------------------------------- */
-type Props = {
- title?: string;
-}
-/**
- * Main application header
- * @return {JSX.Element}
- */
-export default function Header({title}: Props) {
+import {
+ SVGBellNotification,
+ SVGBell,
+ SVGFavoriteOutlined,
+ SVGFolder,
+ SVGFile,
+ SVGEye,
+} from "components/icons";
- const {t} = useTranslation();
- const userStore = useUserStore();
- const uiStore = useUIStore();
- const authStore = useAuthStore();
- const {signOut} = useAuthViewModel(authStore);
- const { user, isLoading, getUser } = useUserViewModel(userStore);
- const { showSearchbar } = useUIViewModel(uiStore);
+const Header = () => {
+ const [authenticated, setAuthenticated] = useState(false);
+ const onClick = () => setAuthenticated(true);
+ const [notification, setNotification] = useState(false);
- useEffect(() => {
- getUser();
- }, [getUser]);
-
- const navigate = useNavigate();
+ /* -------------------------------------------------------------------------- */
+ /* Implement Header Component */
+ /* -------------------------------------------------------------------------- */
return (
- <div
- className="flex items-center flex-row
- justify-between py-2.5 px-8 bg-gray-300/5 h-14"
+ <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"
>
- <div className="flex-none flex items-center space-x-3">
- <ServicesNavigationContext />
- <Logotype name={title} />
- </div>
- <div className="flex-none flex items-center space-x-3">
-
- <ContextMenu
- button={<Avatar className="p-2" />}
- className="absolute w-full min-h-14 sm:w-80 -bottom-3
- sm:top-auto sm:bottom-auto right-0
- mt-5 z-10 sm:transform -translate-1/2
- origin-top-center flex flex-col items-center justify-center !pt-8"
+ {/* 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"
>
- <Logotype name="techpal" />
- <div className="w-full my-4 flex justify-center">
- <Avatar width="27%" className="p-3.5" />
- </div>
- <div className="text-xl text-center font-bold leading-relaxed">
- {isLoading
- ? " "
- : t("hellousr", {
- username: [user?.lastname, user?.firstname].join(" "),
- })}
- </div>
- <div className="text-sm text-center text-gray-300 leading-relaxed mb-5">
- {isLoading ? " " : user?.email}
- </div>
- <ContextMenuAction
- action={() => {
- navigate('/personal-information');
- }}
- disabled={isLoading}
- className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
- caption="Account settings"
-
- />
- <ContextMenuAction
- action={() => {
- navigate("");
- }}
- disabled={isLoading}
- className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
- caption={t("account.connect")}
-
- />
- <ContextMenuAction
- action={signOut}
- className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md transition-colors"
- caption={t('logOut')}
-
- />
- </ContextMenu>
+ {/* Link Create now - start - */}
+ <RouterLink
+ className="text-blue-500 px-4 font-bold uppercase"
+ to="/create-new"
+ >
+ Create new
+ </RouterLink>
+ {/* 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>
- </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>
+ {!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>,
+ ]}
+ {/* Burger component will be shown for the small screens */}
+ <Navbar className="block lg:hidden" />
+ </div>
+ </header>
);
-}
+};
+
+export default Header;