mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-09 12:08:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add login and sign up button in drawer

Browse source
This commit is contained in:
Niklas 2025-06-27 13:15:06 +02:00 • committed by BlankAccountsUsername
parent 204de235ee
commit 4f45a80d56
4 changed files with 62 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

25
code/frontend/src/components/Header.tsx
View file

@ -7,8 +7,11 @@ 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
@ -18,8 +21,8 @@ function Header() {
setIsOpen(!isOpen);
};
const { logout, user } = useAuth();
const iconList = [DynamicFeedIcon, AddAPhotoIcon, PersonIcon, InfoIcon, LogoutIcon];
const routerLinksList = ["/feed","/createpost","/profile","/about"]
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
@ -44,6 +47,22 @@ function Header() {
<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>
@ -51,7 +70,7 @@ function Header() {
return (
<>
<header className="base-header">
<header className="base-header blue-background">
<div className="header-icon"> <img className="header-icon-feather" src='/assets/icons/BirdIconO.ico' alt="featherIcon" /> </div>
<p className="header-title">
Feather Feed

13
code/frontend/src/components/header.css
View file

@ -1,9 +1,3 @@
:root {
--Rotkehlchen-gray: #e7ecf2;
--Rotkehlchen-brown1: #a28d7a;
--Rotkehlchen-orange-default: #e79a0e;
}
.base-header {
z-index: 10;
width: 100vw;
@ -12,12 +6,11 @@
justify-content: space-between;
align-items: center;
flex-shrink: 0;
background: hsla(244, 70%, 13%, 0.71);
backdrop-filter: blur(8px);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
border-radius: 0rem !important;
}
@media only screen and (min-width: 768px) {
.base-header {
@ -60,7 +53,7 @@
}
.drawer-list {
background-color: #12103d;
background-color: var(--dark-blue);
min-height: 100vh;
min-width: 13rem;
}
@ -73,5 +66,5 @@
height: 10vh;
}
.drawer-list-item-button:hover {
background-color: #232451;
background-color: var(--dark-blue-hover);
}