Scipaper/Frontend
5
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

resolve localization button in the header

Browse Source
This commit is contained in:
“Salar 2022-10-19 16:58:19 +03:00
parent 1475d2db27
commit 01a873477b
1 changed files with 51 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/parts/Header.tsx
View File

@ -5,7 +5,7 @@ import { useState, useTransition } from "react";
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
import ContextMenuAction from "../drop-down-menu/ContextMenuAction"; import ContextMenuAction from "../drop-down-menu/ContextMenuAction";
import ContextMenu from "../drop-down-menu/ContextMenu"; import ContextMenu from "../drop-down-menu/ContextMenu";
import LogoScipaper from "../LogoScipaper"; import Logofreeland from "../Logofreeland";
import { Button } from "../Button/Button"; import { Button } from "../Button/Button";
import Avatar from "../Avatar"; import Avatar from "../Avatar";
import Navbar from "../Navbar"; import Navbar from "../Navbar";
@ -25,6 +25,8 @@ import {
} from "components/icons"; } from "components/icons";
import i18n from "localization/i18n"; import i18n from "localization/i18n";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import LocalizationButton from "components/LocalizationButton";
import Link from "components/typography/Link";
const Header = () => { const Header = () => {
const [authenticated, setAuthenticated] = useState(false); const [authenticated, setAuthenticated] = useState(false);
@ -47,16 +49,16 @@ const Header = () => {
xl:gap-60 xl:px-16" xl:gap-60 xl:px-16"
> >
{/* Logo and Menu */} {/* Logo and Menu */}
<div className="flex gap-8 xl:gap-x-16 items-center"> <div className="flex gap-8 xl:gap-x-16">
{/* Logo - start - className="w-7 sm:w-10 " /> */} {/* Logo - start - className="w-7 sm:w-10 " /> */}
<a className="Logo flex items-center gap-1 sm:gap-2 " href="/"> <Link className="Logo flex items-center gap-1 sm:gap-2 " to="/">
<Logo <Logo
className={classNames(authenticated ? "w-10" : "w-7 sm:w-10" )} className={classNames(authenticated ? "w-10" : "w-7 sm:w-10")}
/> />
<LogoScipaper <Logofreeland
className={classNames(authenticated ? "w-28" : "w-20 sm:w-28")} className={classNames(authenticated ? "w-28" : "w-20 sm:w-28")}
/> />
</a> </Link>
{/* Logo - end - */} {/* Logo - end - */}
{/* Menu( Create new - My library - About ) Start */} {/* Menu( Create new - My library - About ) Start */}
@ -69,36 +71,36 @@ const Header = () => {
className="text-blue-500 px-4 font-bold uppercase" className="text-blue-500 px-4 font-bold uppercase"
to="/create-new" to="/create-new"
> >
{t('navbar.createNew')} {t("navbar.createNew")}
</RouterLink> </RouterLink>
{/* Link Create now - end - */} {/* Link Create now - end - */}
{/* Dropdown Menu My library - start - */} {/* Dropdown Menu My library - start - */}
<ContextMenu <ContextMenu
emphasis="high" emphasis="high"
button={t('navbar.library.navTitle')} button={t("navbar.library.navTitle")}
className="border-none uppercase" className="border-none uppercase"
> >
<ContextMenuAction <ContextMenuAction
caption={t('navbar.library.publications')} caption={t("navbar.library.publications")}
action={() => console.log("My publications")} action={() => console.log("My publications")}
icon={<SVGFile className="stroke-black " />} icon={<SVGFile className="stroke-black " />}
></ContextMenuAction> ></ContextMenuAction>
<ContextMenuAction <ContextMenuAction
caption={t('navbar.library.favorites')} caption={t("navbar.library.favorites")}
action={() => console.log("My Favorites")} action={() => console.log("My Favorites")}
icon={<SVGFavoriteOutlined className="stroke-black" />} icon={<SVGFavoriteOutlined className="stroke-black" />}
></ContextMenuAction> ></ContextMenuAction>
<ContextMenuAction <ContextMenuAction
caption={t('navbar.library.collections')} caption={t("navbar.library.collections")}
action={() => console.log("My Collections")} action={() => console.log("My Collections")}
icon={<SVGFolder className="stroke-black fill-black" />} icon={<SVGFolder className="stroke-black fill-black" />}
></ContextMenuAction> ></ContextMenuAction>
<ContextMenuAction <ContextMenuAction
caption={t('navbar.library.recentViewed')} caption={t("navbar.library.recentViewed")}
action={() => console.log("Recent Viewed")} action={() => console.log("Recent Viewed")}
icon={<SVGEye className="stroke-black " />} icon={<SVGEye className="stroke-black " />}
></ContextMenuAction> ></ContextMenuAction>
@ -108,21 +110,21 @@ const Header = () => {
{/* Dropdown Menu About - start - */} {/* Dropdown Menu About - start - */}
<ContextMenu <ContextMenu
emphasis="high" emphasis="high"
button={t('navbar.about.navTitle')} button={t("navbar.about.navTitle")}
className="border-none uppercase" className="border-none uppercase"
> >
<ContextMenuAction <ContextMenuAction
caption={t('navbar.about.aboutProject')} caption={t("navbar.about.aboutProject")}
action={() => console.log("About Freeland")} action={() => console.log("About Freeland")}
></ContextMenuAction> ></ContextMenuAction>
<ContextMenuAction <ContextMenuAction
caption={t('navbar.about.contacts')} caption={t("navbar.about.contacts")}
action={() => console.log("Contact Us")} action={() => console.log("Contact Us")}
></ContextMenuAction> ></ContextMenuAction>
<ContextMenuAction <ContextMenuAction
caption={t('navbar.about.help')} caption={t("navbar.about.help")}
action={() => console.log("Help")} action={() => console.log("Help")}
></ContextMenuAction> ></ContextMenuAction>
</ContextMenu> </ContextMenu>
@ -135,19 +137,22 @@ const Header = () => {
<div className="flex items-center font-bold text-sm gap-1 md:gap-2 "> <div className="flex items-center font-bold text-sm gap-1 md:gap-2 ">
{!authenticated {!authenticated
? [ ? [
<>
<LocalizationButton className="hidden md:flex" />
<Button <Button
emphasis="low" emphasis="low"
onClick={onClick} onClick={onClick}
className="text-xs sm:px-4 sm:text-sm " className="text-xs sm:px-4 sm:text-sm "
> >
{t('navbar.auth.signIn')} {t("navbar.auth.signIn")}
</Button>, </Button>
</>,
<Button <Button
emphasis="medium" emphasis="medium"
className="hidden md:flex" className="hidden md:flex"
onClick={onClick} onClick={onClick}
> >
{t('navbar.auth.signUp')} {t("navbar.auth.signUp")}
</Button>, </Button>,
] ]
: [ : [