Add navigation bar

Author: NorbertLoh

frontend/peerprep/app/components/header/header.module.css

@@ -0,0 +1,40 @@
+.logo {
+    height: 30px;
+    cursor: pointer;
+}
+
+.header {
+  height: 56px;
+  margin-bottom: 20px;
+  background-color: var(--mantine-color-body);
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  padding: 0 16px;
+}
+
+.inner {
+  height: 56px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0;
+}
+
+.link {
+  display: block;
+  line-height: 1;
+  padding: 8px 12px;
+  border-radius: var(--mantine-radius-sm);
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+
+  [data-mantine-color-scheme] &[data-active] {
+    background-color: var(--mantine-color-blue-filled);
+    color: var(--mantine-color-white);
+  }
+}

frontend/peerprep/app/components/header/header.tsx

@@ -0,0 +1,33 @@
+// With reference from official Mantine documentation
+// https://ui.mantine.dev/category/headers/
+
+import { Burger, Container, Group, Text } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { useNavigate } from "react-router";
+import classes from "./header.module.css";
+import logo from "../../assets/images/logo.svg";
+
+const links = [{ link: "/user", label: "Home" }];
+
+export default function Header() {
+  const [opened, { toggle }] = useDisclosure(false);
+  const navigate = useNavigate();
+
+  return (
+    <header className={classes.header}>
+      <Container size={"md"} className={classes.inner}>
+        <Group>
+          <img
+            src={logo}
+            alt="PeerPrep Logo"
+            className={classes.logo}
+            onClick={() => navigate("/")}
+          />
+        </Group>
+        <Group gap={5}>
+          <Text>NorbertLoh</Text>
+        </Group>
+      </Container>
+    </header>
+  );
+}