From da9421c6a9cbac27e17556472df9c72583aeafb7 Mon Sep 17 00:00:00 2001
From: Jonas Honecker <honeckerjonas@gmail.com>
Date: Wed, 19 Jun 2024 15:52:44 +0200
Subject: [PATCH] Add main page navbar with logout button

---
 frontend/src/components/Logo.tsx           |  7 +++-
 frontend/src/components/MainMenuButton.tsx | 18 ++++++++
 frontend/src/components/MainPage.tsx       |  1 -
 frontend/src/components/NavBar.tsx         | 10 ++++-
 frontend/src/components/UserMenuButton.tsx | 49 ++++++++++++++++++++++
 5 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/MainMenuButton.tsx
 create mode 100644 frontend/src/components/UserMenuButton.tsx

diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx
index edea9d6..1230e4d 100644
--- a/frontend/src/components/Logo.tsx
+++ b/frontend/src/components/Logo.tsx
@@ -1,5 +1,10 @@
 import TicketScoutLogo from "../assets/TicketScoutLogo.svg";
+import { styled } from "@mui/system";
+
+const StyledImage = styled("img")({
+  height: "26px",
+});
 
 export default function Logo() {
-  return <img src={TicketScoutLogo} alt="Telescope" />;
+  return <StyledImage src={TicketScoutLogo} alt="Telescope" />;
 }
diff --git a/frontend/src/components/MainMenuButton.tsx b/frontend/src/components/MainMenuButton.tsx
new file mode 100644
index 0000000..1fcbe6e
--- /dev/null
+++ b/frontend/src/components/MainMenuButton.tsx
@@ -0,0 +1,18 @@
+import MenuIcon from "@mui/icons-material/Menu";
+import { IconButton } from "@mui/material";
+
+export default function MainMenuButton() {
+  return (
+    <>
+      <IconButton
+        size="large"
+        edge="start"
+        color="inherit"
+        aria-label="menu"
+        sx={{ mr: 2 }}
+      >
+        <MenuIcon />
+      </IconButton>
+    </>
+  );
+}
diff --git a/frontend/src/components/MainPage.tsx b/frontend/src/components/MainPage.tsx
index 97fe4d9..28bb1cb 100644
--- a/frontend/src/components/MainPage.tsx
+++ b/frontend/src/components/MainPage.tsx
@@ -4,7 +4,6 @@ export default function MainPage() {
   return (
     <>
       <NavBar navbarContext={"main"} />
-      Hello World
     </>
   );
 }
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
index 83e94b9..64f6f54 100644
--- a/frontend/src/components/NavBar.tsx
+++ b/frontend/src/components/NavBar.tsx
@@ -1,6 +1,8 @@
-import { AppBar, Toolbar } from "@mui/material";
+import { AppBar, Box, Toolbar } from "@mui/material";
 import { styled } from "@mui/system";
 import Logo from "./Logo.tsx";
+import UserMenuButton from "./UserMenuButton.tsx";
+import MainMenuButton from "./MainMenuButton.tsx";
 
 type NavBarProps = {
   navbarContext: "login" | "main";
@@ -24,7 +26,11 @@ export default function NavBar(props: NavBarProps) {
     return (
       <StyledAppBar position={"sticky"}>
         <Toolbar>
-          <Logo />
+          <MainMenuButton />
+          <Box sx={{ flexGrow: 1 }}>
+            <Logo />
+          </Box>
+          <UserMenuButton />
         </Toolbar>
       </StyledAppBar>
     );
diff --git a/frontend/src/components/UserMenuButton.tsx b/frontend/src/components/UserMenuButton.tsx
new file mode 100644
index 0000000..4914caf
--- /dev/null
+++ b/frontend/src/components/UserMenuButton.tsx
@@ -0,0 +1,49 @@
+import { IconButton, Menu, MenuItem } from "@mui/material";
+import { AccountCircle } from "@mui/icons-material";
+import { MouseEvent, useState } from "react";
+
+export default function UserMenuButton() {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const handleMenu = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const logout = () => {
+    const host =
+      window.location.host === "localhost:5173"
+        ? "http://localhost:8080"
+        : window.location.origin;
+
+    window.open(host + "/logout", "_self");
+  };
+
+  return (
+    <>
+      <IconButton
+        size="large"
+        aria-label="account of current user"
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={handleMenu}
+        color="inherit"
+      >
+        <AccountCircle />
+      </IconButton>
+      <Menu
+        id="menu-appbar"
+        anchorEl={anchorEl}
+        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+        transformOrigin={{ vertical: "top", horizontal: "center" }}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={logout}>Logout</MenuItem>
+      </Menu>
+    </>
+  );
+}