design & shits

frontend/app/src/components/HeaderComponent.tsx

@@ -11,13 +11,16 @@ import "./styles.css";
 import { StorePrototype, logOut, store } from "../config/store";
 import { useSelector } from "react-redux";
 import tr from "../config/translation";
-import { Link } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import logo from "../../static/android-chrome-192x192.png";
 
 const { Header } = Layout;
 
 type NullableUser = { name: string | null; username: string } | null;
 
 const HeaderComponent = () => {
+  const navigate = useNavigate();
+
   const [authModalOpen, setAuthModalOpen] = useState(false);
   const [userMenuOpen, setUserMenuOpen] = useState(false);
 
@@ -41,6 +44,15 @@ const HeaderComponent = () => {
   ];
 
   const items: MenuProps["items"] = [
+    {
+      label: (
+        <div className="header-logo">
+          <img className="logo" src={logo} alt="logo" />
+        </div>
+      ),
+      key: "logo",
+      onClick: () => navigate("/"),
+    },
     {
       label: <Link to={user ? "/dashboard" : "#"}>{tr("Dashboard")}</Link>,
       key: "dashboard",
@@ -69,15 +81,14 @@ const HeaderComponent = () => {
   return (
     <>
       <AuthModal open={authModalOpen} setOpen={setAuthModalOpen} />
-      <Header>
-        <div className="demo-logo" />
+      <Header className="header">
         <Menu
           theme="dark"
           mode="horizontal"
           items={items}
           style={{ flex: 1, minWidth: 0 }}
           selectedKeys={[]}
-          className="menubar"
+          className="header-container"
         />
       </Header>
     </>