diff --git a/code/frontend/src/components/Header.tsx b/code/frontend/src/components/Header.tsx
index b32db2b..78f7736 100644
--- a/code/frontend/src/components/Header.tsx
+++ b/code/frontend/src/components/Header.tsx
@@ -1,93 +1,152 @@
import "./header.css";
-import React, { useState, useRef } from "react";
-import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, StyledEngineProvider, SwipeableDrawer, ThemeProvider } from '@mui/material';
-import Box from '@mui/material/Box';
-import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
-import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
-import PersonIcon from '@mui/icons-material/Person';
-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 React, { useState } from "react";
+import {
+ List,
+ ListItem,
+ ListItemButton,
+ ListItemIcon,
+ ListItemText,
+ SwipeableDrawer,
+} from "@mui/material";
+import Box from "@mui/material/Box";
+import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
+import DynamicFeedIcon from "@mui/icons-material/DynamicFeed";
+import PersonIcon from "@mui/icons-material/Person";
+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 { useAuth } from "../api/Auth";
-import { ExitToApp } from "@mui/icons-material";
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"]
+ 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",
+ ];
- // TODO: Logout nur anzeigen wenn user eingeloggt ist
+ const DrawerList = (
+ setIsOpen(false)}>
+
+ {["Feed", "Create Post", "Profile", "About Us"].map((text, index) => (
+
+
+
+ {React.createElement(iconList[index])}
+
+
+
+
+ ))}
+ {user && (
+
+
+
+ {React.createElement(iconList[4])}
+
+
+
+
+ )}
+ {!user && (
+ <>
+
+
+
+ {React.createElement(iconList[5])}
+
+
+
+
+
+
+
+ {React.createElement(iconList[6])}
+
+
+
+ {" "}
+ >
+ )}
+
+
+ );
- const DrawerList = (
- setIsOpen(false)}>
-
- {["Feed", "Create Post", "Profile", "About Us"].map((text, index) => (
-
-
-
- {React.createElement(iconList[index])}
-
-
-
-
- ))}
- {user &&
-
-
- {React.createElement(iconList[4])}
-
-
-
- }
- {!user && <>
-
-
- {React.createElement(iconList[5])}
-
-
-
-
-
-
-
- {React.createElement(iconList[6])}
-
-
-
- > }
-
-
-
- );
-
- return (
- <>
-
- setIsOpen(false)}
- onOpen={() => setIsOpen(true)}
- >
- {DrawerList}
-
- >
- );
+ return (
+ <>
+
+
+ Feather Feed
+
+
+ setIsOpen(false)}
+ onOpen={() => setIsOpen(true)}
+ >
+ {DrawerList}
+
+ >
+ );
}
-
-
// EXPORT VARIABLES
-export default Header;
\ No newline at end of file
+export default Header;