Updated the Header.jsx

src/states/Manage/components/Header/Header.jsx

@@ -1,9 +1,9 @@
 import "./styles.sass";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faPowerOff} from "@fortawesome/free-solid-svg-icons";
+import {faBars, faPowerOff} from "@fortawesome/free-solid-svg-icons";
 import {UserContext} from "@/states/Manage/contexts/UserProvider";
 import {useContext} from "react";
-import {useNavigate} from "react-router-dom";
+import {useLocation, useNavigate} from "react-router-dom";
 
 export const getAvatar = (user) => {
     let avatar = "https://cdn.discordapp.com/";
@@ -17,9 +17,11 @@ export const getAvatar = (user) => {
     return avatar;
 }
 
-export const Header = ({title, coins}) => {
+export const Header = ({title, coins, open, setOpen}) => {
     const user = useContext(UserContext);
 
+    const location = useLocation();
+
     const navigate = useNavigate();
 
     if (!user) return null;
@@ -31,7 +33,11 @@ export const Header = ({title, coins}) => {
 
     return (
         <header>
-            <h2>{title}</h2>
+            <div className="title-area">
+                {!open && location.pathname !== "/" &&
+                    <FontAwesomeIcon icon={faBars} onClick={() => setOpen(true)} />}
+                <h2>{title}</h2>
+            </div>
 
             <div className="action-area">
                 <div className="user-card">
@@ -40,7 +46,7 @@ export const Header = ({title, coins}) => {
                 </div>
 
                 <button className="logout-btn" onClick={logout}>
-                    <FontAwesomeIcon icon={faPowerOff} />
+                    <FontAwesomeIcon icon={faPowerOff}/>
                 </button>
             </div>
         </header>