11 files changed, 130 insertions, 11 deletions
diff --git a/front/src/App.css b/front/src/App.css
index a971f8e..5cbbeb8 100644
--- a/front/src/App.css
+++ b/front/src/App.css
@@ -8,3 +8,14 @@
 .App > div {
     padding: 10px;
 }
+
+.AppContents > div {
+    padding-left: 10px;
+}
+
+.AppContents > div > h1 {
+    background-color: var(--colorscheme-black);
+    color: var(--colorscheme-white);
+    padding-left: 10px;
+    padding-right: 10px;
+}
diff --git a/front/src/App.tsx b/front/src/App.tsx
index 0759d38..a685379 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -5,6 +5,8 @@ import { createBrowserRouter, RouterProvider } from 'react-router';
 import IndexElement from './Emelents/IndexElement';
 import ClassesList from './Emelents/ClassList';
 import Topbar from './Emelents/Topbar';
+import { AllowedLanguages, LanguageContext } from './Locales/Context';
+import { useState } from 'react';
 
 const router = createBrowserRouter([
     {
@@ -18,14 +20,25 @@ const router = createBrowserRouter([
 ]);
 
 function App() {
+    const [lang, setLang] = useState<AllowedLanguages>("en");
+
+    function SetLanguage(newLang: AllowedLanguages) {
+        console.log(`Setting a new language ${newLang}...`);
+        setLang(newLang);
+    }
+
     return (
-        <div className='App'>
-            <Topbar />
-            <div className='AppContents'>
-                <Sidebar />
-                <RouterProvider router={router} />
+        <LanguageContext.Provider value={lang}>
+            <div className='App'>
+                <Topbar />
+                <div className='AppContents'>
+                    <Sidebar 
+                        setLang={SetLanguage}
+                        />
+                    <RouterProvider router={router} />
+                </div>
             </div>
-        </div>
+        </LanguageContext.Provider>
     );
 }
 
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;
diff --git a/front/src/Locales/Context.tsx b/front/src/Locales/Context.tsx
new file mode 100644
index 0000000..a15d57d
--- /dev/null
+++ b/front/src/Locales/Context.tsx
@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+export type AllowedLanguages = "en" | "ru";
+
+export const LanguageContext = createContext<AllowedLanguages>("en");
diff --git a/front/src/Locales/Language.ts b/front/src/Locales/Language.ts
new file mode 100644
index 0000000..a96ee9f
--- /dev/null
+++ b/front/src/Locales/Language.ts
@@ -0,0 +1,5 @@
+class Language {
+    LocalizedStrings: Map<string, string>;
+}
+
+export default Language;
diff --git a/front/src/Locales/Locales.ts b/front/src/Locales/Locales.ts
new file mode 100644
index 0000000..af76045
--- /dev/null
+++ b/front/src/Locales/Locales.ts
@@ -0,0 +1,30 @@
+import { createContext } from 'vm';
+import { LanguageContext } from './Context';
+import en_us from './en_US';
+import Language from './Language';
+import ru_ru from './ru_RU';
+
+
+const defaultLocale: Language = en_us;
+
+const nameToLocale = new Map<string, Language>([
+    ['en', en_us],
+    ['ru', ru_ru],
+]);
+
+function getCurrentLocale(lang: string): Language {
+    const outp = nameToLocale.get(lang);
+    if (outp == undefined) return defaultLocale;
+    return outp;
+}
+
+export function GetString(query: string, lang: string): string {
+    const locale = getCurrentLocale(lang);
+    const found = locale.LocalizedStrings.get(query);
+    if (found == undefined) return defaultLocale.LocalizedStrings.get(query) || query;
+    return found;
+}
+
+export function SetLocale(locale: string, setLang: (x: string) => void) {
+    if (nameToLocale.has(locale)) setLang(locale);
+}
diff --git a/front/src/Locales/en_US.ts b/front/src/Locales/en_US.ts
new file mode 100644
index 0000000..f99d324
--- /dev/null
+++ b/front/src/Locales/en_US.ts
@@ -0,0 +1,10 @@
+import Language from "./Language";
+
+const lang = new Language();
+lang.LocalizedStrings = new Map<string, string>([
+    ["index", "index"],
+    ["classes", "classes"],
+    ["contents", "contents"],
+]);
+
+export default lang;
diff --git a/front/src/Locales/ru_RU.ts b/front/src/Locales/ru_RU.ts
new file mode 100644
index 0000000..fe1df70
--- /dev/null
+++ b/front/src/Locales/ru_RU.ts
@@ -0,0 +1,10 @@
+import Language from "./Language";
+
+const lang = new Language();
+lang.LocalizedStrings = new Map<string, string>([
+    ["index", "главная"],
+    ["classes", "классы"],
+    ["contents", "содержание"],
+]);
+
+export default lang;