Merge pull request #60 from SELab-2/settings-screen

Settings screen

frontend/src/assets/styles/mainpage.css

@@ -34,9 +34,4 @@
 
 .icon {
     height: 50%;
-}
-
-img {
-    max-width: 100%;
-    height: auto;
 }

frontend/src/assets/styles/small_components.css

@@ -0,0 +1,6 @@
+.popup {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}

frontend/src/components/Settings.tsx

@@ -0,0 +1,26 @@
+import { BiLogOut } from "react-icons/bi";
+import '../assets/styles/small_components.css'
+import {JSX} from "react";
+
+
+export default function Settings(): JSX.Element  {
+    return (
+        <>
+            <div className={"popup px-5 py-5 card"}>
+                <p className={"title is-flex is-justify-content-center"}>Settings</p>
+                <img src={"/delphi_full.png"} alt={"image"}/>
+                <div className={"is-flex px-5 py-1 is-align-items-center"}>
+                    <p>Logout: </p>
+                    <a className={"button mx-5 px-2"}><BiLogOut size={25}></BiLogOut></a>
+                </div>
+                <div>
+                    <p className={"py-2"}>Select workstation: </p>
+                    <div className={"is-flex is-justify-content-space-evenly"}>
+                        <button className={"button is-success"}>teacher</button>
+                        <button className={"button is-danger"}>admin</button>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

frontend/src/components/Sidebar.tsx

@@ -1,16 +1,27 @@
-import {JSX} from "react";
+import {JSX, useState} from "react";
 import { IoHomeSharp } from "react-icons/io5";
 import { PiProjectorScreen, PiFolder } from "react-icons/pi";
+import { IoMdSettings } from "react-icons/io";
+import Settings from "./Settings.tsx";
 
 export function Sidebar(): JSX.Element {
+    const [isOpen, setIsOpen] = useState(false);
+
     return (
-        <aside className={"menu"}>
-            <ul className={"menu-list"}>
-                <li><a className={"is-transparent"}><IoHomeSharp size={30}/></a></li>
-                <li><a className={"is-transparent"}><PiProjectorScreen size={30}/></a></li>
-                <li><a className={"is-transparent"}><PiFolder size={30}/></a></li>
-            </ul>
-        </aside>
+        <>
+            <aside className={"menu is-flex is-flex-direction-column is-justify-content-space-between"}>
+                <ul className={"menu-list"}>
+                    <li><a><IoHomeSharp size={30}/></a></li>
+                    <li><a><PiProjectorScreen size={30}/></a></li>
+                    <li><a><PiFolder size={30}/></a></li>
+                </ul>
+                <ul className={"menu-list"}>
+                    <li><a className={"is-transparent"} onClick={() => setIsOpen(!isOpen)}><IoMdSettings size={30}/></a>
+                    </li>
+                </ul>
+            </aside>
+                {isOpen && <Settings/>}
+        </>
     )
 }
 

frontend/src/pages/student/HomeStudent.tsx

@@ -9,7 +9,7 @@ export default function HomeStudent(): JSX.Element {
                 <Header/>
             </div>
             <div className={"main-content is-flex is-flex-direction-row"}>
-                <div className={"side-bar"}>
+                <div className={"side-bar is-flex is-justify-content-center"}>
                     <Sidebar/>
                 </div>
                 <div>