Merge pull request #95 from SELab-2/language-settings

Language settings

frontend/src/assets/styles/small_components.css

@@ -4,4 +4,8 @@
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 9999; /* to get over bulma's cards index */
+}
+
+.dropdown-content {
+    width: fit-content;
 }

frontend/src/components/Header.tsx

@@ -4,7 +4,7 @@ import {RiAccountPinBoxLine} from "react-icons/ri";
 export function Header(): JSX.Element {
     return (
         <nav className={"main-nav is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center"}>
-            <img src={"/delphi_favicon_circle.png"} alt={"image"}/>
+            <img src={"/logo.png"} alt={"image"}/>
             <p className={"is-align-self-center"}><p>Home</p></p>
             <button className={"button mx-2 is-transparent"}>
                 <div className={"icon-text"}>

frontend/src/components/Settings.tsx

@@ -1,13 +1,69 @@
+import {JSX, useState} from "react";
 import {BiLogOut} from "react-icons/bi";
 import '../assets/styles/small_components.css'
-import {JSX} from "react";
 import {Link} from "react-router-dom";
+import {IoMdClose} from "react-icons/io";
+import {MdLanguage, MdOutlineKeyboardArrowDown} from "react-icons/md";
 
+export type Language = "NL" | "EN";
+
+function DropdownLanguage(props: { language: Language, changeLanguage: (language: Language) => void }): JSX.Element {
+
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const toggle = (): void => {
+        setIsOpen(!isOpen);
+    }
 
-export default function Settings(): JSX.Element {
     return (
-        <>
-            <div className={"card popup px-5 py-5"}>
+        <div className={`dropdown ${isOpen ? 'is-active' : ''}`}>
+            <div className="dropdown-trigger">
+                <button className="button" aria-haspopup="true" aria-controls="dropdown-menu" onClick={toggle}>
+                    <span className={"is-flex is-align-items-center px"}>
+                        <MdLanguage className={"mr-2"}/><p>{props.language}</p>
+                    </span>
+                    <span className="icon is-small">
+                        <MdOutlineKeyboardArrowDown/>
+                    </span>
+                </button>
+            </div>
+            <div className={"dropdown-menu"}>
+                <div className="dropdown-content">
+                    <a href="#" className="dropdown-item" onClick={() => {props.changeLanguage("EN"); toggle()}}>
+                        English
+                    </a>
+                    <a className="dropdown-item" onClick={() => {props.changeLanguage("NL"); toggle()}}>
+                        Nederlands
+                    </a>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+
+function Settings(props: { closeSettings: () => void }): JSX.Element {
+
+    // TODO: get current language from user
+    const currLang: Language = "NL";
+    const [language, setLanguage] = useState<Language>(currLang);
+
+    const changeLanguage = (newLang: Language): void => {
+        if (language !== newLang) {
+            // TODO: send it to the database
+            setLanguage(newLang);
+        }
+    }
+
+    return (
+        <div className={"card popup"}>
+            <div className={"is-flex is-align-items-center is-justify-content-right"}>
+                <span className={"py-2"}>
+                    <DropdownLanguage language={language} changeLanguage={changeLanguage}/>
+                </span>
+                <button className={"button mx-2 my-1"} onClick={props.closeSettings}><IoMdClose/></button>
+            </div>
+            <div className={"px-5 pb-5"}>
                 <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"}>
@@ -26,6 +82,8 @@ export default function Settings(): JSX.Element {
                     </div>
                 </div>
             </div>
-        </>
+        </div>
     )
-}
+}
+
+export default Settings;

frontend/src/components/Sidebar.tsx

@@ -7,6 +7,10 @@ import Settings from "./Settings.tsx";
 export function Sidebar(): JSX.Element {
     const [isOpen, setIsOpen] = useState(false);
 
+    const handleSettings: () => void = () => {
+        setIsOpen(!isOpen)
+    }
+
     return (
         <>
             <aside className={"menu is-flex is-flex-direction-column is-justify-content-space-between"}>
@@ -16,11 +20,11 @@ export function Sidebar(): JSX.Element {
                     <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><a className={"is-transparent"} onClick={handleSettings}><IoMdSettings size={30}/></a>
                     </li>
                 </ul>
             </aside>
-                {isOpen && <Settings/>}
+            {isOpen && <Settings closeSettings={handleSettings}/>}
         </>
     )
 }