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

remove menu icon change to x icon

Browse source
This commit is contained in:
Niklas 2025-06-26 17:19:32 +02:00 • committed by BlankAccountsUsername
parent bc2124638f
commit bb088fdaaa
4 changed files with 9 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

3
code/frontend/public/assets/icons/close_orange.svg
View file

@ -1,3 +0,0 @@
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.688 40.6363L10.6937 37.642L22.6707 25.665L10.6937 13.688L13.688 10.6938L25.665 22.6708L37.642 10.6938L40.6362 13.688L28.6592 25.665L40.6362 37.642L37.642 40.6363L25.665 28.6593L13.688 40.6363Z" fill="#E79A0E"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 327 B

3
code/frontend/public/assets/icons/x.svg
View file

@ -1,3 +0,0 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30 10L10 30M10 10L30 30" stroke="#1E1E1E" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 223 B

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

@ -1,6 +1,6 @@
import "./header.css"; import "./header.css";
import React, { useState, useRef } from "react"; import React, { useState, useRef } from "react";
import { createTheme, List, ListItem, ListItemButton, ListItemIcon, ListItemText, StyledEngineProvider, SwipeableDrawer, ThemeProvider } from '@mui/material'; import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, StyledEngineProvider, SwipeableDrawer, ThemeProvider } from '@mui/material';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import AddAPhotoIcon from '@mui/icons-material/AddAPhoto'; import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
import DynamicFeedIcon from '@mui/icons-material/DynamicFeed'; import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
@ -8,7 +8,7 @@ import PersonIcon from '@mui/icons-material/Person';
import InfoIcon from '@mui/icons-material/Info'; import InfoIcon from '@mui/icons-material/Info';
import LogoutIcon from '@mui/icons-material/Logout'; import LogoutIcon from '@mui/icons-material/Logout';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import axios from "axios"; import { useAuth } from "../api/Auth";
function Header() { function Header() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -16,17 +16,12 @@ function Header() {
const toggleMenu = () => { const toggleMenu = () => {
setIsOpen(!isOpen); setIsOpen(!isOpen);
}; };
// TODO const { logout } = useAuth();
const logOut = async () => {
try {
const response = await axios.delete("http://localhost:3001/api/user/logout");
} catch (err: any) {
console.error("error: ", err.response.data);
}
};
const iconList = [DynamicFeedIcon, AddAPhotoIcon, PersonIcon, InfoIcon, LogoutIcon]; const iconList = [DynamicFeedIcon, AddAPhotoIcon, PersonIcon, InfoIcon, LogoutIcon];
const routerLinksList = ["/","/createpost","/profile","/about","/"] const routerLinksList = ["/","/createpost","/profile","/about","/"]
// TODO: Logout nur anzeigen wenn user eingeloggt ist
const DrawerList = ( const DrawerList = (
<Box role="menu" onClick={() => setIsOpen(false)}> <Box role="menu" onClick={() => setIsOpen(false)}>
<List className="drawer-list"> <List className="drawer-list">
@ -41,7 +36,7 @@ function Header() {
</ListItem> </ListItem>
))} ))}
<ListItem className="drawer-list-item-button" key={"Log Out"} disablePadding> <ListItem className="drawer-list-item-button" key={"Log Out"} disablePadding>
<ListItemButton className="drawer-list-item-button" onClick={logOut}> <ListItemButton className="drawer-list-item-button" onClick={logout}>
<ListItemIcon className="drawer-list-item"> <ListItemIcon className="drawer-list-item">
{React.createElement(iconList[4])} {React.createElement(iconList[4])}
</ListItemIcon> </ListItemIcon>
@ -59,7 +54,7 @@ function Header() {
<p className="header-title"> <p className="header-title">
Feather Feed Feather Feed
</p> </p>
<div className="header-icon header-icon-menu"> {isOpen? <img src='/assets/icons/close_orange.svg' alt="close menu" ref={iconRef} onClick={toggleMenu}/> : <img src='/assets/icons/menu_orange.svg' alt="menu" onClick={toggleMenu} />} </div> <div className="header-icon header-icon-menu"> <img src='/assets/icons/menu_orange.svg' alt="menu" onClick={toggleMenu} /> </div>
</header> </header>
<SwipeableDrawer <SwipeableDrawer
anchor={"right"} anchor={"right"}