From 01a873477b547e1f425087c1b66d92ba0c9e24ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Wed, 19 Oct 2022 16:58:19 +0300
Subject: [PATCH] resolve localization button in the header
---
src/components/parts/Header.tsx | 97 +++++++++++++++++----------------
1 file changed, 51 insertions(+), 46 deletions(-)
diff --git a/src/components/parts/Header.tsx b/src/components/parts/Header.tsx
index 9fbd384..258238c 100755
--- a/src/components/parts/Header.tsx
+++ b/src/components/parts/Header.tsx
@@ -5,7 +5,7 @@ import { useState, useTransition } from "react";
/* -------------------------------------------------------------------------- */
import ContextMenuAction from "../drop-down-menu/ContextMenuAction";
import ContextMenu from "../drop-down-menu/ContextMenu";
-import LogoScipaper from "../LogoScipaper";
+import Logofreeland from "../Logofreeland";
import { Button } from "../Button/Button";
import Avatar from "../Avatar";
import Navbar from "../Navbar";
@@ -25,6 +25,8 @@ import {
} from "components/icons";
import i18n from "localization/i18n";
import { useTranslation } from "react-i18next";
+import LocalizationButton from "components/LocalizationButton";
+import Link from "components/typography/Link";
const Header = () => {
const [authenticated, setAuthenticated] = useState(false);
@@ -47,16 +49,16 @@ const Header = () => {
xl:gap-60 xl:px-16"
>
{/* 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 " /> */}
- <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
- 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")}
/>
- </a>
+ </Link>
{/* Logo - end - */}
{/* Menu( Create new - My library - About ) Start */}
@@ -69,36 +71,36 @@ const Header = () => {
className="text-blue-500 px-4 font-bold uppercase"
to="/create-new"
>
- {t('navbar.createNew')}
+ {t("navbar.createNew")}
</RouterLink>
{/* Link Create now - end - */}
{/* Dropdown Menu My library - start - */}
<ContextMenu
emphasis="high"
- button={t('navbar.library.navTitle')}
+ button={t("navbar.library.navTitle")}
className="border-none uppercase"
>
<ContextMenuAction
- caption={t('navbar.library.publications')}
+ caption={t("navbar.library.publications")}
action={() => console.log("My publications")}
icon={<SVGFile className="stroke-black " />}
></ContextMenuAction>
<ContextMenuAction
- caption={t('navbar.library.favorites')}
+ caption={t("navbar.library.favorites")}
action={() => console.log("My Favorites")}
icon={<SVGFavoriteOutlined className="stroke-black" />}
></ContextMenuAction>
<ContextMenuAction
- caption={t('navbar.library.collections')}
+ caption={t("navbar.library.collections")}
action={() => console.log("My Collections")}
icon={<SVGFolder className="stroke-black fill-black" />}
></ContextMenuAction>
<ContextMenuAction
- caption={t('navbar.library.recentViewed')}
+ caption={t("navbar.library.recentViewed")}
action={() => console.log("Recent Viewed")}
icon={<SVGEye className="stroke-black " />}
></ContextMenuAction>
@@ -108,21 +110,21 @@ const Header = () => {
{/* Dropdown Menu About - start - */}
<ContextMenu
emphasis="high"
- button={t('navbar.about.navTitle')}
+ button={t("navbar.about.navTitle")}
className="border-none uppercase"
>
<ContextMenuAction
- caption={t('navbar.about.aboutProject')}
+ caption={t("navbar.about.aboutProject")}
action={() => console.log("About Freeland")}
></ContextMenuAction>
<ContextMenuAction
- caption={t('navbar.about.contacts')}
+ caption={t("navbar.about.contacts")}
action={() => console.log("Contact Us")}
></ContextMenuAction>
<ContextMenuAction
- caption={t('navbar.about.help')}
+ caption={t("navbar.about.help")}
action={() => console.log("Help")}
></ContextMenuAction>
</ContextMenu>
@@ -135,38 +137,41 @@ const Header = () => {
<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 "
- >
- {t('navbar.auth.signIn')}
- </Button>,
- <Button
- emphasis="medium"
- className="hidden md:flex"
- onClick={onClick}
- >
- {t('navbar.auth.signUp')}
- </Button>,
- ]
+ <>
+ <LocalizationButton className="hidden md:flex" />
+ <Button
+ emphasis="low"
+ onClick={onClick}
+ className="text-xs sm:px-4 sm:text-sm "
+ >
+ {t("navbar.auth.signIn")}
+ </Button>
+ </>,
+ <Button
+ emphasis="medium"
+ className="hidden md:flex"
+ onClick={onClick}
+ >
+ {t("navbar.auth.signUp")}
+ </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">
+ <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>,
- ]}
+ <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>