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

Integrated the ColorDialog into the Header.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-06-02 20:20:47 +02:00
parent 83a639840d
commit 917dec35d0
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,18 +3,23 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBars, faGear} from "@fortawesome/free-solid-svg-icons"; import {faBars, faGear} 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 ColorDialog from "@/common/components/Header/components/ColorDialog/index.js";
export const Header = ({open, setOpen}) => { 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);
return ( return (
<div className="header"> <div className="header">
{dialogOpen && <ColorDialog onClose={() => setDialogOpen(false)} color={color} setColor={setColor}/>}
<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} /> <FontAwesomeIcon icon={faGear} onClick={() => setDialogOpen(true)} />
</div> </div>
); );
} }