Side panel rework

5 files changed, 64 insertions, 6 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;