From 57bcb265d84cf86e804aad2cf1927e0dae351942 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 5 Aug 2023 21:53:39 +0200
Subject: [PATCH] The Header.jsx now supports changing the server

---
 .../src/common/components/Header/Header.jsx   | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/client/src/common/components/Header/Header.jsx b/client/src/common/components/Header/Header.jsx
index b0fd8eb..3f4c5b7 100644
--- a/client/src/common/components/Header/Header.jsx
+++ b/client/src/common/components/Header/Header.jsx
@@ -1,25 +1,46 @@
 import "./styles.sass";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faBars, faGear} from "@fortawesome/free-solid-svg-icons";
+import {faBars, faGear, faPalette, faServer, faXmark} from "@fortawesome/free-solid-svg-icons";
 import {getByPath} from "@/common/routes";
 import {useLocation} from "react-router-dom";
 import {useState} from "react";
 import ColorDialog from "@/common/components/Header/components/ColorDialog";
+import ServerDialog from "@/common/components/Header/components/ServerDialog";
 
 export const Header = ({open, setOpen, color, setColor}) => {
     const location = useLocation();
     const path = getByPath(location.pathname);
 
-    const [dialogOpen, setDialogOpen] = useState(false);
+    const [colorOpen, setColorOpen] = useState(false);
+    const [serverOpen, setServerOpen] = useState(false);
+    const [settingsOpen, setSettingsOpen] = useState(false);
+
+    const openColorDialog = () => {
+        setColorOpen(true);
+        setSettingsOpen(false);
+    }
+
+    const openServerDialog = () => {
+        setServerOpen(true);
+        setSettingsOpen(false);
+    }
 
     return (
         <div className="header">
-            {dialogOpen && <ColorDialog onClose={() => setDialogOpen(false)} color={color} setColor={setColor}/>}
+            {colorOpen && <ColorDialog onClose={() => setColorOpen(false)} color={color} setColor={setColor}/>}
+            {serverOpen && <ServerDialog onClose={() => setServerOpen(false)} />}
             <div className="header-left">
                 {!open && <FontAwesomeIcon icon={faBars} className="open-menu" onClick={() => setOpen(true)}/>}
                 <h1>{path?.category} / <span>{path?.name}</span></h1>
             </div>
-            <FontAwesomeIcon icon={faGear} onClick={() => setDialogOpen(true)} />
+            {!settingsOpen && <FontAwesomeIcon icon={faGear} onClick={() => setSettingsOpen(true)}
+                                    title="Einstellungen" className="icon-hover" />}
+            {settingsOpen && <div className="settings-menu">
+                <FontAwesomeIcon icon={faPalette} onClick={openColorDialog} title="Farbe ändern" className="icon-hover" />
+                <FontAwesomeIcon icon={faServer} onClick={openServerDialog} title="Server wechseln" className="icon-hover"/>
+                <FontAwesomeIcon icon={faXmark} onClick={() => setSettingsOpen(false)} className="icon-hover"
+                                    title="Schließen" />
+            </div>}
         </div>
     );
 }
\ No newline at end of file