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>