change header height, change header icon margin for mobile

code/frontend/src/components/Header.tsx

@@ -1,17 +1,23 @@
 import "./header.css";
-import React, { useState, useRef } from "react";
+import React, { useState } from "react";
-import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, StyledEngineProvider, SwipeableDrawer, ThemeProvider } from '@mui/material';
+import {
-import Box from '@mui/material/Box';
+	List,
-import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
+	ListItem,
-import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
+	ListItemButton,
-import PersonIcon from '@mui/icons-material/Person';
+	ListItemIcon,
-import InfoIcon from '@mui/icons-material/Info';
+	ListItemText,
-import LogoutIcon from '@mui/icons-material/Logout';
+	SwipeableDrawer,
-import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+} from "@mui/material";
-import FollowTheSignsIcon from '@mui/icons-material/FollowTheSigns';
+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";
 
 // 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
 
@@ -21,49 +27,97 @@ function Header() {
 		setIsOpen(!isOpen);
 	};
 	const { logout, user } = useAuth();
-  const iconList = [DynamicFeedIcon, AddAPhotoIcon, PersonIcon, InfoIcon, LogoutIcon, ExitToAppIcon, FollowTheSignsIcon];
+	const iconList = [
-  const routerLinksList = ["/feed","/createpost","/profile","/about","/login","/register"]
+		DynamicFeedIcon,
-
+		AddAPhotoIcon,
-  // TODO: Logout nur anzeigen wenn user eingeloggt ist
+		PersonIcon,
+		InfoIcon,
+		LogoutIcon,
+		ExitToAppIcon,
+		FollowTheSignsIcon,
+	];
+	const routerLinksList = [
+		"/feed",
+		"/createpost",
+		"/profile",
+		"/about",
+		"/login",
+		"/register",
+	];
 
 	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]} >
+						<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}/>
+							<ListItemText className="drawer-list-item" primary={text} />
 						</ListItemButton>
 					</ListItem>
 				))}
-        {user && <ListItem className="drawer-list-item-button" key={"Log Out"} disablePadding>
+				{user && (
-            <ListItemButton className="drawer-list-item-button" onClick={logout}>
+					<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"}/>
+							<ListItemText className="drawer-list-item" primary={"Log Out"} />
 						</ListItemButton>
-        </ListItem> }
+					</ListItem>
-        {!user && <> <ListItem className="drawer-list-item-button" key={"Login"} disablePadding>
+				)}
-            <ListItemButton className="drawer-list-item-button" component={Link} to={routerLinksList[4]}>
+				{!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"}/>
+								<ListItemText className="drawer-list-item" primary={"Login"} />
 							</ListItemButton>
 						</ListItem>
-        <ListItem className="drawer-list-item-button" key={"Sign up"} disablePadding>
+						<ListItem
-            <ListItemButton className="drawer-list-item-button" component={Link} to={routerLinksList[5]}>
+							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"}/>
+								<ListItemText
+									className="drawer-list-item"
+									primary={"Sign up"}
+								/>
 							</ListItemButton>
-        </ListItem> </> }
+						</ListItem>{" "}
-        
+					</>
+				)}
 			</List>
 		</Box>
 	);
@@ -71,11 +125,18 @@ function Header() {
 	return (
 		<>
 			<header className="base-header blue-background">
-        <div className="header-icon"> <img className="header-icon-feather" src='/assets/icons/BirdIconO.ico' alt="featherIcon" /> </div>
+				<img
-        <p className="header-title small-title">
+					className="header-icon header-icon-feather"
-          Feather Feed
+					src="/assets/icons/BirdIconO.ico"
-        </p>
+					alt="featherIcon"
-        <div className="header-icon header-icon-menu"> <img src='/assets/icons/menu_orange.svg' alt="menu" onClick={toggleMenu}  /> </div>
+				/>
+				<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"}
@@ -89,7 +150,5 @@ function Header() {
 	);
 }
 
-
-
 // EXPORT VARIABLES
 export default Header;

code/frontend/src/components/header.css

@@ -9,12 +9,11 @@
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: 1000;
 	border-radius: 0rem !important;
 }
 @media only screen and (min-width: 768px) {
 	.base-header {
-		height: var(--header-height-desktop);
+		height: var(--header-height);
 	}
 }
 
@@ -26,20 +25,20 @@
 }
 .header-icon-menu {
 	cursor: pointer;
+	height: 45px;
 }
 
 .header-icon {
-	margin: 40px;
+	margin: 20px;
 	display: flex;
-	width: 30px;
-	height: 30px;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	flex-shrink: 0;
+}
-
+@media only screen and (min-width: 768px) {
-	background-size: cover;
+	.header-icon {
-	background-repeat: no-repeat;
+		margin: 40px;
+	}
 }
 
 .drawer-list {

code/frontend/src/styles/sizes.css

@@ -1,5 +1,4 @@
 :root {
-	--header-height: 60px;
+	--header-height: 48px;
-	--header-height-desktop: 48px;
 	--border-radius: 1rem;
 }