Created navbar ru localization

public/locales/ru/translation.json

@@ -59,5 +59,29 @@
     "services": {
       "fork": "Не удалось выполнить авторизацию в сервисе"
     }
+  },
+  "articlePage": {
+    "abstract": "Введение",
+    "keywords": "Ключевые слова"
+  },
+  "navbar": {
+    "createNew": "Создать статью",
+    "about": {
+      "navTitle": "О проекте",
+      "aboutProject": "О Scipaper",
+      "contacts": "Контакты",
+      "help": "Помощь"
+    },
+    "library": {
+      "navTitle": "Моя библиотека",
+      "publications": "Публикации",
+      "favorites": "Избранное",
+      "collections": "Коллекции",
+      "recentViewed": "История"
+    },
+    "auth": {
+      "signIn": "Вход",
+      "signUp": "Регистрация"
+    }
   }
 }

src/components/ArticleSearchResult.tsx

@@ -37,7 +37,7 @@ export const ArticleSearchResult = ({ searchItem }: Props) => {
         <Article.SubscriptionsButtons />
       </div>
 
-      <Article.Title linkTo={searchItem.id} className="text-2xl">
+      <Article.Title linkTo={`/article/${searchItem.id}`} className="text-2xl">
         {searchItem.title}
       </Article.Title>
       <Article.Authors emphasis="low" className="flex flex-wrap flex-row">

src/components/fetchAnArticle/AnArticle.tsx

@@ -8,10 +8,13 @@ import Container from "components/Container";
 import NotFound from "./NotFound";
 import { SVGSearch } from "components/icons";
 import BaseLayout from "components/BaseLayout";
+import Typography from "components/typography/Typography";
+import { useTranslation } from "react-i18next";
 
 const AnArticle = () => {
   const store = useArticleStore();
   const { article, hasError, shouldShowLoading } = useArticleViewModel(store);
+  const { i18n, t } = useTranslation();
 
   const { id } = useParams();
   const newId = `${id}`;
@@ -46,9 +49,13 @@ const AnArticle = () => {
             <ArticlePart.Article.InteractionButtons emphasis="high" />
             {article?.tags && (
               <div className="keywords my-10 flex flex-col gap-2">
-                <ArticlePart.Article.Title className="text-2xl">
+                <Typography
-                  Keywords
+                  className="text-2xl"
-                </ArticlePart.Article.Title>
+                  fontWeightVariant="semibold"
+                >
+                  {t('articlePage.keywords')}
+                </Typography>
+
 
                 <ArticlePart.Article.Keywords className="transition ease-in-out delay-50">
                   {article?.tags}
@@ -56,9 +63,12 @@ const AnArticle = () => {
               </div>
             )}
             <div className="abstract my-10 flex flex-col gap-2">
-              <ArticlePart.Article.Title className="text-2xl">
+              <Typography
-                Abstract
+                className="text-2xl"
-              </ArticlePart.Article.Title>
+                fontWeightVariant="semibold"
+              >
+                {t('articlePage.abstract')}
+              </Typography>
               <ArticlePart.Article.Description>
                 {article?.summary !== undefined ? (
                   article?.summary

src/components/parts/Header.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { useState } from "react";
+import { useState, useTransition } from "react";
 /* -------------------------------------------------------------------------- */
 /*                                 Components                                 */
 /* -------------------------------------------------------------------------- */
@@ -23,11 +23,14 @@ import {
   SVGFile,
   SVGEye,
 } from "components/icons";
+import i18n from "localization/i18n";
+import { useTranslation } from "react-i18next";
 
 const Header = () => {
   const [authenticated, setAuthenticated] = useState(false);
   const onClick = () => setAuthenticated(true);
   const [notification, setNotification] = useState(false);
+  const { t, i18n } = useTranslation();
 
   /* -------------------------------------------------------------------------- */
   /*                         Implement Header Component                         */
@@ -66,36 +69,36 @@ const Header = () => {
             className="text-blue-500 px-4 font-bold uppercase"
             to="/create-new"
           >
-            Create new
+            {t('navbar.createNew')}
           </RouterLink>
           {/* Link Create now - end -  */}
 
           {/* Dropdown Menu My library - start - */}
           <ContextMenu
             emphasis="high"
-            button="My library"
+            button={t('navbar.library.navTitle')}
             className="border-none uppercase"
           >
             <ContextMenuAction
-              caption="My Publications"
+              caption={t('navbar.library.publications')}
               action={() => console.log("My publications")}
               icon={<SVGFile className="stroke-black " />}
             ></ContextMenuAction>
 
             <ContextMenuAction
-              caption="My Favorites"
+              caption={t('navbar.library.favorites')}
               action={() => console.log("My Favorites")}
               icon={<SVGFavoriteOutlined className="stroke-black" />}
             ></ContextMenuAction>
 
             <ContextMenuAction
-              caption="My Collections"
+              caption={t('navbar.library.collections')}
               action={() => console.log("My Collections")}
               icon={<SVGFolder className="stroke-black fill-black" />}
             ></ContextMenuAction>
 
             <ContextMenuAction
-              caption="Recent Viewed"
+              caption={t('navbar.library.recentViewed')}
               action={() => console.log("Recent Viewed")}
               icon={<SVGEye className="stroke-black " />}
             ></ContextMenuAction>
@@ -105,21 +108,21 @@ const Header = () => {
           {/* Dropdown Menu About - start - */}
           <ContextMenu
             emphasis="high"
-            button="About"
+            button={t('navbar.about.navTitle')}
             className="border-none uppercase"
           >
             <ContextMenuAction
-              caption="About Freeland"
+              caption={t('navbar.about.aboutProject')}
               action={() => console.log("About Freeland")}
             ></ContextMenuAction>
 
             <ContextMenuAction
-              caption="Contact Us"
+              caption={t('navbar.about.contacts')}
               action={() => console.log("Contact Us")}
             ></ContextMenuAction>
 
             <ContextMenuAction
-              caption="Help"
+              caption={t('navbar.about.help')}
               action={() => console.log("Help")}
             ></ContextMenuAction>
           </ContextMenu>
@@ -137,14 +140,14 @@ const Header = () => {
               onClick={onClick}
               className="text-xs sm:px-4 sm:text-sm  "
             >
-                Sign in
+              {t('navbar.auth.signIn')}
             </Button>,
             <Button
               emphasis="medium"
               className="hidden md:flex"
               onClick={onClick}
             >
-                Sign up
+              {t('navbar.auth.signUp')}
             </Button>,
           ]
           : [

src/index.tsx

@@ -16,6 +16,7 @@ import AccountSettings from "pages/Information/AccountSettings";
 import { store } from "store/store";
 import { Provider } from "react-redux";
 import { SearchResultsPage } from "pages/SearchResultsPage";
+import AnArticle from "components/fetchAnArticle/AnArticle";
 
 const rootElement = document.getElementById("root");
 if (!rootElement) throw new Error("Failed to find the root element");
@@ -32,6 +33,7 @@ root.render(
           <Route path="/terms-of-use" element={<TermsOfUse />} />
           <Route path="/privacy-policy" element={<PrivacyPolicy />} />
           <Route path="/cookies-policy" element={<CookiesPolicy />} />
+          <Route path="/article/:id" element={<AnArticle />} />
           <Route path="/account">
             <Route path="settings" element={<AccountSettings />} />
           </Route>

src/localization/i18n.ts

@@ -18,11 +18,11 @@ export const languages: Record<Langs, Lang> = {
   },
 };
 export const popularLangKeys = ["ru", "en"];
-const fallbackLng: Langs = "en";
+const fallbackLng: Langs = "ru";
 
 i18n
   .use(Backend)
-  .use(LanguageDetector)
+  // .use(LanguageDetector)
   .use(initReactI18next)
   .init({
     debug: process.env.NODE_ENV === "development" ? true : false,