Side panel rework

8 files changed, 77 insertions, 10 deletions

diff --git a/front/src/Emelents/ClassList.tsx b/front/src/Emelents/ClassList.tsx
index f0f6fcc..042ddb1 100644
--- a/front/src/Emelents/ClassList.tsx
+++ b/front/src/Emelents/ClassList.tsx
@@ -1,6 +1,12 @@
+import { useContext } from "react";
+import { LanguageContext } from "../Locales/Context";
+import { GetLocalizedString } from "../Locales/Locales";
+
 function ClassesList() {
+    var lang = useContext(LanguageContext);
+
     return (
-        <h1> Classes list </h1>
+        <h1> {GetLocalizedString("Classes list", lang)} </h1>
     );
 }
 
diff --git a/front/src/Emelents/Elements.css b/front/src/Emelents/Elements.css
index eb3c558..0b67108 100644
--- a/front/src/Emelents/Elements.css
+++ b/front/src/Emelents/Elements.css
@@ -48,10 +48,36 @@
     background-color: var(--colorscheme-white);
     color: var(--colorscheme-gray);
     margin: 20px;
-    text-transform: uppercase;
 }
 
 .SidebarContents > h1 {
     color: var(--colorscheme-gray);
     text-align: center;
+    text-transform: uppercase;
+}
+
+.ContentsList {
+    padding-left: 20px;
+    color: var(--colorscheme-gray);
+}
+
+.ContentsList > li > span {
+    display: flex;
+}
+
+.ContentsList > li > span > span {
+    flex-grow: 1;
+    font-family: "Rubik Dirt", system-ui;
+    color: var(--colorscheme-gray);
+    font-style: italic;
+    overflow: hidden;
+}
+
+.ContentsList > li::marker {
+    color: var(--colorscheme-gray);
+}
+
+.ContentsList > li > span > a {
+    font-style: italic;
+    color: var(--colorscheme-gray);
 }
diff --git a/front/src/Emelents/IndexElement.tsx b/front/src/Emelents/IndexElement.tsx
index 2209fe1..b8d71d5 100644
--- a/front/src/Emelents/IndexElement.tsx
+++ b/front/src/Emelents/IndexElement.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext } from "react";
 import { LanguageContext } from "../Locales/Context";
 import { GetLocalizedString } from "../Locales/Locales";
 
diff --git a/front/src/Emelents/Sidebar.tsx b/front/src/Emelents/Sidebar.tsx
index d94cef8..649f2fc 100644
--- a/front/src/Emelents/Sidebar.tsx
+++ b/front/src/Emelents/Sidebar.tsx
@@ -2,19 +2,23 @@ import { useContext } from 'react';
 import { AllowedLanguages, LanguageContext } from '../Locales/Context';
 import { GetLocalizedString } from '../Locales/Locales';
 import './Elements.css';
+import SidebarListElement from './SidebarElement';
 
 type SidebarProps = {
     setLang: (newLang: AllowedLanguages) => void;
 };
 
 function Sidebar({setLang}: SidebarProps) {
-    var language = useContext(LanguageContext);
+    var lang = useContext(LanguageContext);
 
     return (
         <nav className='Sidebar'>
             <div className='SidebarContents'>
-                <h1> {GetLocalizedString("contents", language)} </h1>
-                <ul>
+                <h1> {GetLocalizedString("contents", lang)} </h1>
+                <ul className='ContentsList'>
+                    <SidebarListElement Href='/' Text='Home' />
+                    <SidebarListElement Href='/classes' Text='Classes' />
+                    <SidebarListElement Href='/weapons' Text='Weapons' />
                 </ul>
                 <button onClick={() => setLang("ru")}> ru </button>
                 <button onClick={() => setLang("en")}> en </button>
diff --git a/front/src/Emelents/SidebarElement.tsx b/front/src/Emelents/SidebarElement.tsx
new file mode 100644
index 0000000..b7994e5
--- /dev/null
+++ b/front/src/Emelents/SidebarElement.tsx
@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import { LanguageContext } from '../Locales/Context';
+import { GetLocalizedString } from '../Locales/Locales';
+
+type ElementProps = {
+    Href: string;
+    Text: string;
+};
+
+function SidebarListElement({Href, Text}: ElementProps) {
+    var lang = useContext(LanguageContext);
+    return (
+        <li> 
+            <span>
+                <a href={Href}> {GetLocalizedString(Text, lang)} </a> 
+                <span> ....................................................... </span>
+            </span>
+        </li>
+    );
+}
+
+export default SidebarListElement;
diff --git a/front/src/Fonts.css b/front/src/Fonts.css
index 59716aa..c3b986b 100644
--- a/front/src/Fonts.css
+++ b/front/src/Fonts.css
@@ -5,3 +5,7 @@ h1, h2 {
     font-weight: 400;
     font-style: normal;
 }
+
+a {
+    font-family: "Rubik Dirt", system-ui;
+}
diff --git a/front/src/Locales/en_US.ts b/front/src/Locales/en_US.ts
index f99d324..b67eb65 100644
--- a/front/src/Locales/en_US.ts
+++ b/front/src/Locales/en_US.ts
@@ -3,8 +3,10 @@ import Language from "./Language";
 const lang = new Language();
 lang.LocalizedStrings = new Map<string, string>([
     ["index", "index"],
-    ["classes", "classes"],
+    ["classes", "Classes"],
     ["contents", "contents"],
+    ["home", "Home"],
+    ["weapons", "Weapons"],
 ]);
 
 export default lang;
diff --git a/front/src/Locales/ru_RU.ts b/front/src/Locales/ru_RU.ts
index fe1df70..a0592be 100644
--- a/front/src/Locales/ru_RU.ts
+++ b/front/src/Locales/ru_RU.ts
@@ -2,9 +2,12 @@ import Language from "./Language";
 
 const lang = new Language();
 lang.LocalizedStrings = new Map<string, string>([
-    ["index", "главная"],
-    ["classes", "классы"],
-    ["contents", "содержание"],
+    ["index", "Главная"],
+    ["classes", "Классы"],
+    ["home", "Главная"],
+    ["contents", "Содержание"],
+    ["classes list", "Список классов"],
+    ["weapons", "Оружие"],
 ]);
 
 export default lang;