Language toggle

4 files changed, 40 insertions, 5 deletions

diff --git a/front/src/Emelents/Elements.css b/front/src/Emelents/Elements.css
index 8a50296..eb3c558 100644
--- a/front/src/Emelents/Elements.css
+++ b/front/src/Emelents/Elements.css
@@ -35,7 +35,7 @@
     max-width: var(--width);
     min-height: 30px;
     padding: 5px;
-    margin-top: 0px;
+    margin: 0px;
     background-color: var(--colorscheme-black);
     color: var(--colorscheme-white);
     text-align: center;
@@ -48,6 +48,7 @@
     background-color: var(--colorscheme-white);
     color: var(--colorscheme-gray);
     margin: 20px;
+    text-transform: uppercase;
 }
 
 .SidebarContents > h1 {
diff --git a/front/src/Emelents/IndexElement.tsx b/front/src/Emelents/IndexElement.tsx
index 4eda815..9914e89 100644
--- a/front/src/Emelents/IndexElement.tsx
+++ b/front/src/Emelents/IndexElement.tsx
@@ -1,7 +1,11 @@
+import { useState } from "react";
+import { GetString } from "../Locales/Locales";
+
 function IndexElement() {
+    const [lang, setLang] = useState('en');
     return (
         <div>
-            <h1> Index element </h1>
+            <h1> {GetString("index", lang)} </h1>
         </div>
     );
 }
diff --git a/front/src/Emelents/Sidebar.tsx b/front/src/Emelents/Sidebar.tsx
index b138de6..4802e76 100644
--- a/front/src/Emelents/Sidebar.tsx
+++ b/front/src/Emelents/Sidebar.tsx
@@ -1,10 +1,21 @@
+import { useContext } from 'react';
+import { AllowedLanguages, LanguageContext } from '../Locales/Context';
+import { GetString } from '../Locales/Locales';
 import './Elements.css';
 
-function Sidebar() {
+type SidebarProps = {
+    setLang: (newLang: AllowedLanguages) => void;
+};
+
+function Sidebar({setLang}: SidebarProps) {
+    var language = useContext(LanguageContext);
+
     return (
         <nav className='Sidebar'>
             <div className='SidebarContents'>
-                <h1> Contents </h1>
+                <button onClick={() => setLang("ru")}> ru </button>
+                <button onClick={() => setLang("en")}> en </button>
+                <h1> {GetString("contents", language)} </h1>
                 <ul>
                 </ul>
             </div>
diff --git a/front/src/Emelents/Topbar.tsx b/front/src/Emelents/Topbar.tsx
index 6c4ef74..667b42f 100644
--- a/front/src/Emelents/Topbar.tsx
+++ b/front/src/Emelents/Topbar.tsx
@@ -1,12 +1,31 @@
+import { useContext } from "react";
+import { LanguageContext } from "../Locales/Context";
+import { GetString } from "../Locales/Locales";
+
+const defaultPathName = 'index';
+
 function Topbar() {
+    var language = useContext(LanguageContext);
+    let path =  getTopbarElement(window.location.pathname);
+
     return (
         <div className="Topbar">
             <h1> View from the edge </h1>
             <div className="TopbarContents">
-                <h2> Lifepath </h2>
+                <h2> {GetString(path, language)} </h2>
             </div>
         </div>
     );
 }
 
+// Extracts the black part thing from the path
+function getTopbarElement(fullPath: string): string {
+    let path = fullPath.replace('/', '');
+    if (path.length === 0) {
+        path = defaultPathName;
+    }
+    
+    return path.split('/')[0];
+}
+
 export default Topbar;