From 8fec4e577a60ba58a87320cef4b9a30ed2596e52 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 20 Jul 2024 13:03:26 +0200
Subject: [PATCH] Create Header component

---
 .../Dashboard/components/Header/Header.jsx    | 53 +++++++++++++++++++
 .../Dashboard/components/Header/index.js      |  1 +
 2 files changed, 54 insertions(+)
 create mode 100644 dashboard/src/states/Dashboard/components/Header/Header.jsx
 create mode 100644 dashboard/src/states/Dashboard/components/Header/index.js

diff --git a/dashboard/src/states/Dashboard/components/Header/Header.jsx b/dashboard/src/states/Dashboard/components/Header/Header.jsx
new file mode 100644
index 0000000..dce5977
--- /dev/null
+++ b/dashboard/src/states/Dashboard/components/Header/Header.jsx
@@ -0,0 +1,53 @@
+import {AppBar, Avatar, IconButton, Stack, Toolbar, Typography} from "@mui/material";
+import {Menu} from "@mui/icons-material";
+import {useContext, useEffect, useState} from "react";
+import {projectSidebar, sidebar} from "@/common/routes/index.jsx";
+import {useLocation} from "react-router-dom";
+import {ProjectContext} from "@/states/Dashboard/contexts/Project";
+import {UserContext} from "@contexts/User";
+import AccountMenu from "@/states/Dashboard/components/Header/components/AccountMenu";
+
+const drawerWidth = 260;
+
+export const Header = ({toggleOpen}) => {
+    const location = useLocation();
+    const {currentProject} = useContext(ProjectContext);
+    const {user} = useContext(UserContext);
+
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    useEffect(() => {
+        document.title = "LicenseAPI - " + getTitleByPath();
+    }, [location]);
+
+    const getTitleByPath = () => {
+        const route = [...sidebar, ...projectSidebar].find((route) => location.pathname
+            .replace(currentProject?.id, ":projectId").startsWith(route.path) && route.path !== "/");
+        if (route) return route.name;
+        return "Start";
+    }
+
+    return (
+        <>
+            <AccountMenu open={menuOpen} setOpen={setMenuOpen}/>
+            <AppBar position="fixed" sx={{width: {sm: `calc(100% - ${drawerWidth}px)`}, ml: {sm: `${drawerWidth}px`}}}
+                    color="inherit">
+                <Toolbar>
+                    <IconButton color="inherit" aria-label="open drawer" edge="start" onClick={toggleOpen}
+                                sx={{mr: 2, display: {sm: 'none'}}}>
+                        <Menu/>
+                    </IconButton>
+                    <Typography variant="h6" fontWeight={700}>{getTitleByPath()}</Typography>
+
+                    <Stack direction="row" spacing={2} sx={{ml: "auto"}} alignItems="center">
+                        <Stack sx={{background: "linear-gradient(90deg, #FF0401 0%, #FE6E27 100%)", padding: "3px",
+                            borderRadius: "50%", cursor: "pointer"}} onClick={() => setMenuOpen(true)} id="menu"
+                               alignItems="center" direction="row" spacing={1}>
+                            <Avatar src={user.avatar} alt={user.username}/>
+                        </Stack>
+                    </Stack>
+                </Toolbar>
+            </AppBar>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/dashboard/src/states/Dashboard/components/Header/index.js b/dashboard/src/states/Dashboard/components/Header/index.js
new file mode 100644
index 0000000..eb54ef6
--- /dev/null
+++ b/dashboard/src/states/Dashboard/components/Header/index.js
@@ -0,0 +1 @@
+export {Header as default} from "./Header.jsx";
\ No newline at end of file