Initial commit

src/Components/Layout/Header/Header.css

@@ -0,0 +1,23 @@
+.logo {
+  height: 80%;
+}
+
+.headerLogo {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  font-family: "Quicking";
+  letter-spacing: 1px;
+  cursor: pointer;
+}
+
+.header {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 5px;
+}

src/Components/Layout/Header/Header.tsx

@@ -0,0 +1,33 @@
+import { Burger, Image, Text } from "@mantine/core";
+import "./Header.css";
+import { useLayoutStore } from "Stores/LayoutStore";
+import { Link } from "react-router";
+import { baseUrl } from "GlobalVars";
+import { routes } from "Routes/Routes";
+
+function Header() {
+  const { is_navbar_open, set_navbar_open } = useLayoutStore();
+  return (
+    <div className="header">
+      <Link className="headerLogo invisible_link" to={routes.MainPage.path}>
+        <Image
+          className="logo"
+          w="auto"
+          fit="contain"
+          src={baseUrl + "/bitmap.png"}
+          alt="image"
+        />
+        <Text size="xl">QMolSim</Text>
+      </Link>
+      <Burger
+        aria-label="sidebar toggle"
+        opened={is_navbar_open}
+        onClick={() => {
+          set_navbar_open(!is_navbar_open);
+        }}
+      />
+    </div>
+  );
+}
+
+export default Header;