Merge pull request 'Fixed header' (#101) from fix/header into develop
Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/101
This commit is contained in:
Denis Gorbunov
commit
faed5dd8dc
@ -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;
|
|
||||||
@ -1,113 +1,174 @@
|
|||||||
/* -------------------------------------------------------------------------- */
|
import classNames from "classnames";
|
||||||
/* Libs */
|
import { useState } from "react";
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
import React, { useEffect } from "react";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Components */
|
/* Components */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
import ContextMenu from "components/containers/contextmenu/ContextMenu";
|
import ContextMenuAction from "../drop-down-menu/ContextMenuAction";
|
||||||
import Logotype from "components/Logotype";
|
import ContextMenu from "../drop-down-menu/ContextMenu";
|
||||||
import Avatar from "components/containers/Avatar";
|
import Logofreeland from "../Logofreeland";
|
||||||
import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction";
|
import { Button } from "../Button/Button";
|
||||||
/* -------------------------------------------------------------------------- */
|
import Avatar from "../Avatar";
|
||||||
/* SVG */
|
import Navbar from "../Navbar";
|
||||||
/* -------------------------------------------------------------------------- */
|
import Logo from "../Logo";
|
||||||
/* -------------------------------------------------------------------------- */
|
import { RouterLink } from "components/typography/RouterLink";
|
||||||
/* 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";
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Main application header */
|
/* Icons */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
type Props = {
|
import {
|
||||||
title?: string;
|
SVGBellNotification,
|
||||||
}
|
SVGBell,
|
||||||
/**
|
SVGFavoriteOutlined,
|
||||||
* Main application header
|
SVGFolder,
|
||||||
* @return {JSX.Element}
|
SVGFile,
|
||||||
*/
|
SVGEye,
|
||||||
export default function Header({title}: Props) {
|
} from "components/icons";
|
||||||
|
|
||||||
const {t} = useTranslation();
|
const Header = () => {
|
||||||
const userStore = useUserStore();
|
const [authenticated, setAuthenticated] = useState(false);
|
||||||
const uiStore = useUIStore();
|
const onClick = () => setAuthenticated(true);
|
||||||
const authStore = useAuthStore();
|
const [notification, setNotification] = useState(false);
|
||||||
const {signOut} = useAuthViewModel(authStore);
|
|
||||||
const { user, isLoading, getUser } = useUserViewModel(userStore);
|
|
||||||
const { showSearchbar } = useUIViewModel(uiStore);
|
|
||||||
|
|
||||||
useEffect(() => {
|
/* -------------------------------------------------------------------------- */
|
||||||
getUser();
|
/* Implement Header Component */
|
||||||
}, [getUser]);
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
const navigate = useNavigate();
|
|
||||||
return (
|
return (
|
||||||
<div
|
<header
|
||||||
className="flex items-center flex-row
|
className="header flex justify-between items-center box-border w-full
|
||||||
justify-between py-2.5 px-8 bg-gray-300/5 h-14"
|
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">
|
{/* Logo and Menu */}
|
||||||
<ServicesNavigationContext />
|
<div className="flex gap-8 xl:gap-x-16">
|
||||||
<Logotype name={title} />
|
{/* Logo - start - className="w-7 sm:w-10 " /> */}
|
||||||
</div>
|
<a className="Logo flex items-center gap-1 sm:gap-2 " href="/">
|
||||||
<div className="flex-none flex items-center space-x-3">
|
<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 - */}
|
||||||
|
|
||||||
<ContextMenu
|
{/* Menu( Create new - My library - About ) Start */}
|
||||||
button={<Avatar className="p-2" />}
|
<div
|
||||||
className="absolute w-full min-h-14 sm:w-80 -bottom-3
|
className="hidden lg:flex items-center
|
||||||
sm:top-auto sm:bottom-auto right-0
|
gap-2"
|
||||||
mt-5 z-10 sm:transform -translate-1/2
|
|
||||||
origin-top-center flex flex-col items-center justify-center !pt-8"
|
|
||||||
>
|
>
|
||||||
<Logotype name="techpal" />
|
{/* Link Create now - start - */}
|
||||||
<div className="w-full my-4 flex justify-center">
|
<RouterLink
|
||||||
<Avatar width="27%" className="p-3.5" />
|
className="text-blue-500 px-4 font-bold uppercase"
|
||||||
</div>
|
to="/create-new"
|
||||||
<div className="text-xl text-center font-bold leading-relaxed">
|
>
|
||||||
{isLoading
|
Create new
|
||||||
? " "
|
</RouterLink>
|
||||||
: t("hellousr", {
|
{/* Link Create now - end - */}
|
||||||
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"
|
|
||||||
|
|
||||||
/>
|
{/* Dropdown Menu My library - start - */}
|
||||||
<ContextMenuAction
|
<ContextMenu
|
||||||
action={() => {
|
emphasis="high"
|
||||||
navigate("");
|
button="My library"
|
||||||
}}
|
className="border-none uppercase"
|
||||||
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"
|
<ContextMenuAction
|
||||||
caption={t("account.connect")}
|
caption="My Publications"
|
||||||
|
action={() => console.log("My publications")}
|
||||||
|
icon={<SVGFile className="stroke-black " />}
|
||||||
|
></ContextMenuAction>
|
||||||
|
|
||||||
/>
|
<ContextMenuAction
|
||||||
<ContextMenuAction
|
caption="My Favorites"
|
||||||
action={signOut}
|
action={() => console.log("My Favorites")}
|
||||||
className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md transition-colors"
|
icon={<SVGFavoriteOutlined className="stroke-black" />}
|
||||||
caption={t('logOut')}
|
></ContextMenuAction>
|
||||||
|
|
||||||
/>
|
<ContextMenuAction
|
||||||
</ContextMenu>
|
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>
|
||||||
</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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user