Add main page navbar with logout button

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" />;
 }

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>
+    </>
+  );
+}

frontend/src/components/MainPage.tsx

@@ -4,7 +4,6 @@ export default function MainPage() {
   return (
     <>
       <NavBar navbarContext={"main"} />
-      Hello World
     </>
   );
 }

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>
     );

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>
+    </>
+  );
+}