Merge branch 'develop' into fix/context-menu
This commit is contained in:
Maximus
commit
f2244fbc8a
@ -38,9 +38,6 @@ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
console.log(
|
||||
React.isValidElement(children) && React.Children.only(children).type
|
||||
);
|
||||
const isOnlyIcon =
|
||||
children &&
|
||||
React.isValidElement(children) &&
|
||||
@ -51,11 +48,11 @@ export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
|
||||
return (
|
||||
<button
|
||||
//TODO change on click event
|
||||
onClick={!disabled ? () => alert("Click") : undefined}
|
||||
onClick={!disabled ? () => {} : undefined}
|
||||
className={classNames([
|
||||
"flex content-center justify-between",
|
||||
"text-center",
|
||||
{ padding: defaultStyle },
|
||||
padding,
|
||||
"rounded",
|
||||
{
|
||||
"!cursor-default": disabled,
|
||||
|
||||
@ -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;
|
||||
@ -5,8 +5,8 @@ import classNames from "classnames";
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Components */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
import ContextMenuAction from "./ContextMenuAction";
|
||||
import ContextMenu from "./ContextMenu";
|
||||
import ContextMenuAction from "./drop-down-menu/ContextMenuAction";
|
||||
import ContextMenu from "./drop-down-menu/ContextMenu";
|
||||
import { Button } from "./Button/Button";
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
@ -26,7 +26,7 @@ const Page = ({ title, withOutlet, children, activePath }: Props) => {
|
||||
return (
|
||||
<div className="grid grid-flow-col grid-rows-page grid-cols-layout max-h-screen overflow-hidden transition-all">
|
||||
<header className="col-span-2">
|
||||
<Header title={title} />
|
||||
<Header />
|
||||
</header>
|
||||
<aside
|
||||
className={classNames(
|
||||
|
||||
@ -25,7 +25,7 @@ export function BottomSheetModal({
|
||||
leaveFrom="translate-y-0 opacity-100"
|
||||
leaveTo="translate-y-full opacity-0"
|
||||
>
|
||||
<Dialog className="fixed bottom-0" as="div" onClose={() => {}}>
|
||||
<Dialog className="fixed bottom-0 w-full" as="div" onClose={() => {}}>
|
||||
{children}
|
||||
</Dialog>
|
||||
</Transition>
|
||||
|
||||
@ -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 (
|
||||
<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="flex items-center flex-row
|
||||
justify-between py-2.5 px-8 bg-gray-300/5 h-14"
|
||||
className="hidden lg:flex items-center
|
||||
gap-2"
|
||||
>
|
||||
<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">
|
||||
{/* 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
|
||||
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"
|
||||
emphasis="high"
|
||||
button="My library"
|
||||
className="border-none uppercase"
|
||||
>
|
||||
<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"
|
||||
caption="My Publications"
|
||||
action={() => console.log("My publications")}
|
||||
icon={<SVGFile className="stroke-black " />}
|
||||
></ContextMenuAction>
|
||||
|
||||
/>
|
||||
<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")}
|
||||
caption="My Favorites"
|
||||
action={() => console.log("My Favorites")}
|
||||
icon={<SVGFavoriteOutlined className="stroke-black" />}
|
||||
></ContextMenuAction>
|
||||
|
||||
/>
|
||||
<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')}
|
||||
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>
|
||||
{!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