Mathias/PowerTools
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The Header.jsx now supports changing the server

Browse Source
This commit is contained in:
Mathias Wagner 2023-08-05 21:53:39 +02:00
parent 3d17a0bdc4
commit 57bcb265d8
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/common/components/Header/Header.jsx
View File

@ -1,25 +1,46 @@
import "./styles.sass"; import "./styles.sass";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; 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 {getByPath} from "@/common/routes";
import {useLocation} from "react-router-dom"; import {useLocation} from "react-router-dom";
import {useState} from "react"; import {useState} from "react";
import ColorDialog from "@/common/components/Header/components/ColorDialog"; import ColorDialog from "@/common/components/Header/components/ColorDialog";
import ServerDialog from "@/common/components/Header/components/ServerDialog";
export const Header = ({open, setOpen, color, setColor}) => { export const Header = ({open, setOpen, color, setColor}) => {
const location = useLocation(); const location = useLocation();
const path = getByPath(location.pathname); 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 ( return (
<div className="header"> <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"> <div className="header-left">
{!open && <FontAwesomeIcon icon={faBars} className="open-menu" onClick={() => setOpen(true)}/>} {!open && <FontAwesomeIcon icon={faBars} className="open-menu" onClick={() => setOpen(true)}/>}
<h1>{path?.category} / <span>{path?.name}</span></h1> <h1>{path?.category} / <span>{path?.name}</span></h1>
</div> </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> </div>
); );
} }