change about us to about, use useNavigate instead of component/to, intitialize List items as Objects

code/frontend/src/App.tsx

@@ -11,27 +11,27 @@ import { Auth } from "./api/Auth";
 
 
 function App() {
-  return (
-    <Auth>
-      <Router>
-        <div className="App">
-          <Header />
-          <Routes>
-            <Route
-              path="/login"
-              element={<LoginAndSignUpPage signupProp={false} />}
-            ></Route>
-            <Route
-              path="/register"
-              element={<LoginAndSignUpPage signupProp={true} />}
-            ></Route>
-            <Route path="/profile" element={<Profile />}></Route>
-          </Routes>
-          <Footer />
-        </div>
-      </Router>
-    </Auth>
-  );
+	return (
+		<Auth>
+			<Router>
+				<div className="App">
+					<Header />
+					<Routes>
+						<Route
+							path="/login"
+							element={<LoginAndSignUpPage signupProp={false} />}
+						></Route>
+						<Route
+							path="/register"
+							element={<LoginAndSignUpPage signupProp={true} />}
+						></Route>
+						<Route path="/profile" element={<Profile />}></Route>
+					</Routes>
+					<Footer />
+				</div>
+			</Router>
+		</Auth>
+	);
 }
 
 export default App;

code/frontend/src/components/Header.tsx

@@ -1,12 +1,12 @@
 import "./header.css";
 import React, { useState } from "react";
 import {
-	List,
-	ListItem,
-	ListItemButton,
-	ListItemIcon,
-	ListItemText,
-	SwipeableDrawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  SwipeableDrawer,
 } from "@mui/material";
 import Box from "@mui/material/Box";
 import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
@@ -16,139 +16,126 @@ import InfoIcon from "@mui/icons-material/Info";
 import LogoutIcon from "@mui/icons-material/Logout";
 import ExitToAppIcon from "@mui/icons-material/ExitToApp";
 import FollowTheSignsIcon from "@mui/icons-material/FollowTheSigns";
-import { Link } from "react-router-dom";
+import { useNavigate, replace } from "react-router-dom";
 import { useAuth } from "../api/Auth";
 
 // TODO: Dinge so umstrukturieren, dass der State für das offene menü in Header ist und das Menü auch in Header, sodass es mit width 100% die volle breite einnehmen kann
 
 function Header() {
-	const [isOpen, setIsOpen] = useState(false);
-	const toggleMenu = () => {
-		setIsOpen(!isOpen);
-	};
-	const { logout, user } = useAuth();
-	const iconList = [
-		DynamicFeedIcon,
-		AddAPhotoIcon,
-		PersonIcon,
-		InfoIcon,
-		LogoutIcon,
-		ExitToAppIcon,
-		FollowTheSignsIcon,
-	];
-	const routerLinksList = [
-		"/feed",
-		"/createpost",
-		"/profile",
-		"/about",
-		"/login",
-		"/register",
-	];
+  interface ListItemAttributes {
+    text: string;
+    icon: React.ElementType;
+    onClick: () => void;
+    onlyShowWhen: "loggedIn" | "loggedOut" | "always";
+  }
+  const navigate = useNavigate();
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+  const { logout, user } = useAuth();
+  const ListItems: ListItemAttributes[] = [
+    {
+      text: "Feed",
+      icon: DynamicFeedIcon,
+      onClick: () => navigate("/feed", { replace: true }),
+      onlyShowWhen: "always",
+    },
+    {
+      text: "Create Post",
+      icon: AddAPhotoIcon,
+      onClick: () => navigate("/createpost", { replace: true }),
+      onlyShowWhen: "loggedIn",
+    },
+    {
+      text: "Profile",
+      icon: PersonIcon,
+      onClick: () => navigate("/profile", { replace: true }),
+      onlyShowWhen: "loggedIn",
+    },
+    {
+      text: "About",
+      icon: InfoIcon,
+      onClick: () => navigate("/about", { replace: true }),
+      onlyShowWhen: "always",
+    },
+    {
+      text: "Log Out",
+      icon: LogoutIcon,
+      onClick: logout,
+      onlyShowWhen: "loggedIn",
+    },
+    {
+      text: "Log In",
+      icon: ExitToAppIcon,
+      onClick: () => navigate("/login", { replace: true }),
+      onlyShowWhen: "loggedOut",
+    },
+    {
+      text: "Sign Up",
+      icon: FollowTheSignsIcon,
+      onClick: () => navigate("/register", { replace: true }),
+      onlyShowWhen: "loggedOut",
+    },
+  ];
 
-	const DrawerList = (
-		<Box role="menu" onClick={() => setIsOpen(false)}>
-			<List className="drawer-list">
-				{["Feed", "Create Post", "Profile", "About Us"].map((text, index) => (
-					<ListItem className="drawer-list-item" key={text} disablePadding>
-						<ListItemButton
-							className="drawer-list-item-button"
-							component={Link}
-							to={routerLinksList[index]}
-						>
-							<ListItemIcon className="drawer-list-item">
-								{React.createElement(iconList[index])}
-							</ListItemIcon>
-							<ListItemText className="drawer-list-item" primary={text} />
-						</ListItemButton>
-					</ListItem>
-				))}
-				{user && (
-					<ListItem
-						className="drawer-list-item-button"
-						key={"Log Out"}
-						disablePadding
-					>
-						<ListItemButton
-							className="drawer-list-item-button"
-							onClick={logout}
-						>
-							<ListItemIcon className="drawer-list-item">
-								{React.createElement(iconList[4])}
-							</ListItemIcon>
-							<ListItemText className="drawer-list-item" primary={"Log Out"} />
-						</ListItemButton>
-					</ListItem>
-				)}
-				{!user && (
-					<>
-						<ListItem
-							className="drawer-list-item-button"
-							key={"Login"}
-							disablePadding
-						>
-							<ListItemButton
-								className="drawer-list-item-button"
-								component={Link}
-								to={routerLinksList[4]}
-							>
-								<ListItemIcon className="drawer-list-item">
-									{React.createElement(iconList[5])}
-								</ListItemIcon>
-								<ListItemText className="drawer-list-item" primary={"Login"} />
-							</ListItemButton>
-						</ListItem>
-						<ListItem
-							className="drawer-list-item-button"
-							key={"Sign up"}
-							disablePadding
-						>
-							<ListItemButton
-								className="drawer-list-item-button"
-								component={Link}
-								to={routerLinksList[5]}
-							>
-								<ListItemIcon className="drawer-list-item">
-									{React.createElement(iconList[6])}
-								</ListItemIcon>
-								<ListItemText
-									className="drawer-list-item"
-									primary={"Sign up"}
-								/>
-							</ListItemButton>
-						</ListItem>{" "}
-					</>
-				)}
-			</List>
-		</Box>
-	);
+  const DrawerList = (
+    <Box role="menu" onClick={() => setIsOpen(false)}>
+      <List className="drawer-list">
+        {ListItems.map((ListItemObject, index) =>
+          ListItemObject.onlyShowWhen == "always" ||
+          (ListItemObject.onlyShowWhen == "loggedIn" && user) ||
+          (ListItemObject.onlyShowWhen == "loggedOut" && !user) ? (
+            <ListItem
+              className="drawer-list-item"
+              key={ListItemObject.text}
+              disablePadding
+            >
+              <ListItemButton
+                className="drawer-list-item-button"
+                onClick={ListItemObject.onClick}
+              >
+                <ListItemIcon className="drawer-list-item">
+                  {React.createElement(ListItemObject.icon)}
+                </ListItemIcon>
+                <ListItemText
+                  className="drawer-list-item"
+                  primary={ListItemObject.text}
+                />
+              </ListItemButton>
+            </ListItem>
+          ) : null
+        )}
+      </List>
+    </Box>
+  );
 
-	return (
-		<>
-			<header className="base-header blue-background">
-				<img
-					className="header-icon header-icon-feather"
-					src="/assets/icons/BirdIconO.ico"
-					alt="featherIcon"
-				/>
-				<p className="header-title small-title">Feather Feed</p>
-				<img
-					className="header-icon header-icon-menu"
-					src="/assets/icons/menu_orange.svg"
-					alt="menu"
-					onClick={toggleMenu}
-				/>
-			</header>
-			<SwipeableDrawer
-				anchor={"right"}
-				open={isOpen}
-				onClose={() => setIsOpen(false)}
-				onOpen={() => setIsOpen(true)}
-			>
-				{DrawerList}
-			</SwipeableDrawer>
-		</>
-	);
+  return (
+    <>
+      <header className="base-header blue-background">
+        <img
+          className="header-icon header-icon-feather"
+          src="/assets/icons/BirdIconO.ico"
+          alt="featherIcon"
+        />
+        <p className="header-title small-title">Feather Feed</p>
+        <img
+          className="header-icon header-icon-menu"
+          src="/assets/icons/menu_orange.svg"
+          alt="menu"
+          onClick={toggleMenu}
+        />
+      </header>
+      <SwipeableDrawer
+        anchor={"right"}
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        onOpen={() => setIsOpen(true)}
+      >
+        {DrawerList}
+      </SwipeableDrawer>
+    </>
+  );
 }
 
-// EXPORT VARIABLES
 export default Header;

code/frontend/src/components/header.css

@@ -6,7 +6,7 @@
 	justify-content: space-between;
 	align-items: center;
 	flex-shrink: 0;
-	position: fixed;
+	position: sticky;
 	top: 0;
 	left: 0;
 	border-radius: 0rem !important;