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 ( - <> -
-
featherIcon
-

- Feather Feed -

-
menu
-
- setIsOpen(false)} - onOpen={() => setIsOpen(true)} - > - {DrawerList} - - - ); + return ( + <> +
+ featherIcon +

Feather Feed

+ menu +
+ setIsOpen(false)} + onOpen={() => setIsOpen(true)} + > + {DrawerList} + + + ); } - - // EXPORT VARIABLES -export default Header; \ No newline at end of file +export default Header;