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

do headerHeight in variable, change drawer items, modify drawer design, add menu button cursor pointer

Browse source
This commit is contained in:
Niklas 2025-06-20 14:55:26 +02:00 • committed by BlankAccountsUsername
parent f763dd16c9
commit 43b7b1958e
1 changed files with 27 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,12 @@
import "./header.css"; import "./header.css";
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useRef } from "react";
import { Divider, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, SwipeableDrawer } from '@mui/material'; import { colors, createTheme, List, ListItem, ListItemButton, ListItemIcon, ListItemText, SwipeableDrawer, ThemeProvider } from '@mui/material';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import InboxIcon from "@mui/icons-material/Inbox"; import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
import MailIcon from '@mui/icons-material/Mail'; import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
import MenuIcon from '@mui/icons-material/Menu'; import PersonIcon from '@mui/icons-material/Person';
import { Height } from "@mui/icons-material"; import InfoIcon from '@mui/icons-material/Info';
import LogoutIcon from '@mui/icons-material/Logout';
function Header() { function Header() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -13,46 +14,44 @@ function Header() {
const toggleMenu = () => { const toggleMenu = () => {
setIsOpen(!isOpen); setIsOpen(!isOpen);
}; };
const iconList = [InboxIcon, MailIcon, InboxIcon, MailIcon, InboxIcon, MailIcon]; const iconList = [DynamicFeedIcon, AddAPhotoIcon, PersonIcon, InfoIcon, LogoutIcon];
const routerLinksList = ["/feed","/app","/app","/app","/app"]
const DrawerList = ( const DrawerList = (
<Box sx={{ width: 250 }} role="presentation" onClick={() => setIsOpen(false)}> <Box sx={{ width: 250 }} role="presentation" onClick={() => setIsOpen(false)}>
<List> <ThemeProvider
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( theme={createTheme({
<ListItem key={text} disablePadding> palette: {
<ListItemButton> mode: 'dark',
primary: { main: '#FFFF' },
background: { paper: 'rgb(5, 30, 52)' },
},
})}
>
<List sx={{height:'100vh', bgcolor: 'background.paper'}}>
{["Feed", "Create Post", "Profile", "About Us", "Log Out"].map((text, index) => (
<ListItem sx={{height: '10vh'}} key={text} disablePadding>
<ListItemButton sx={{height: '10vh'}} /*component={RouterLink} to={routerLinksList[index]}*/>
<ListItemIcon> <ListItemIcon>
{React.createElement(iconList[index])} {React.createElement(iconList[index])}
</ListItemIcon> </ListItemIcon>
<ListItemText primary={text} /> <ListItemText primary={text} slotProps={{primary: {color: 'primary'}}}/>
</ListItemButton>
</ListItem>
))}
</List>
<Divider />
<List>
{["All mail", "Trash", "Spam"].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
))} ))}
</List> </List>
</ThemeProvider>
</Box> </Box>
); );
return ( return (
<div className="outest-container" > <div className="outest-container" >
<header className="base-header"> <header className="base-header">
<div className="header-icon"> <img src='/assets/icons/feather_orange.svg' alt="featherIcon" /> </div> <div className="header-icon"> <img className="header-icon-feather" src='/assets/icons/BirdIconO.ico' alt="featherIcon" /> </div>
<p className="header-title"> <p className="header-title">
FeatherFeed Feather Feed
</p> </p>
<div className="header-icon"> {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"> {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>
</header> </header>
<SwipeableDrawer <SwipeableDrawer
anchor={"right"} anchor={"right"}