mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 15:18: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 82ca946e89
commit cc9fe432c0
5 changed files with 57 additions and 71 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

9
code/frontend/public/assets/icons/three_menu_stripes_black.svg
View file

@ -1,9 +0,0 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_76_392" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
<rect width="40" height="40" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_76_392)">
<path d="M5 30V26.6667H35V30H5ZM5 21.6667V18.3333H35V21.6667H5ZM5 13.3333V10H35V13.3333H5Z" fill="#1C1B1F"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 417 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 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 AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
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 LogoutIcon from '@mui/icons-material/Logout';
import { Link } from "react-router-dom";
import axios from "axios";
import { useAuth } from "../api/Auth";
// 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
@ -19,17 +19,12 @@ function Header() {
const toggleMenu = () => {
setIsOpen(!isOpen);
};
// TODO
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 { logout } = useAuth();
const iconList = [DynamicFeedIcon, AddAPhotoIcon, PersonIcon, InfoIcon, LogoutIcon];
const routerLinksList = ["/","/createpost","/profile","/about","/"]
// TODO: Logout nur anzeigen wenn user eingeloggt ist
const DrawerList = (
<Box role="menu" onClick={() => setIsOpen(false)}>
<List className="drawer-list">
@ -44,7 +39,7 @@ function Header() {
</ListItem>
))}
<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">
{React.createElement(iconList[4])}
</ListItemIcon>
@ -62,7 +57,7 @@ function Header() {
<p className="header-title">
Feather Feed
</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>
<SwipeableDrawer
anchor={"right"}

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

@ -1,3 +1,9 @@
:root {
--Rotkehlchen-gray: #e7ecf2;
--Rotkehlchen-brown1: #a28d7a;
--Rotkehlchen-orange-default: #e79a0e;
}
.base-header {
z-index: 10;
width: 100vw;
@ -6,8 +12,8 @@
justify-content: space-between;
align-items: center;
flex-shrink: 0;
border-bottom: 3px solid var(--Rotkehlchen-brown-light);
background: var(--Rotkehlchen-gray);
background: hsla(244, 70%, 13%, 0.71);
backdrop-filter: blur(8px);
position: fixed;
top: 0;
left: 0;
@ -54,7 +60,7 @@
}
.drawer-list {
background-color: #2f325e;
background-color: #12103d;
min-height: 100vh;
min-width: 13rem;
}
@ -67,5 +73,5 @@
height: 10vh;
}
.drawer-list-item-button:hover {
background-color: #555b90;
background-color: #232451;
}