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

use styledEngineProvider injectfirst and css classes for styling MUI elements (not finished yet)

Browse source
This commit is contained in:
Niklas 2025-06-24 21:41:46 +02:00 • committed by BlankAccountsUsername
parent d53e8d8933
commit 924c4cf3bc
2 changed files with 29 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

34
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, SwipeableDrawer, ThemeProvider } from '@mui/material'; import { createTheme, 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';
@ -28,38 +28,30 @@ function Header() {
const routerLinksList = ["/","/createpost","/profile","/about","/"] const routerLinksList = ["/","/createpost","/profile","/about","/"]
const DrawerList = ( const DrawerList = (
<Box sx={{ width: 250 }} role="presentation" onClick={() => setIsOpen(false)}> <StyledEngineProvider injectFirst>
<ThemeProvider <Box role="menu" onClick={() => setIsOpen(false)}>
theme={createTheme({ <List className="drawer-list">
palette: {
mode: 'dark',
primary: { main: '#FFFF' },
background: { paper: 'rgb(5, 30, 52)' },
},
})}
>
<List sx={{height:'100vh', bgcolor: 'background.paper'}}>
{["Feed", "Create Post", "Profile", "About Us"].map((text, index) => ( {["Feed", "Create Post", "Profile", "About Us"].map((text, index) => (
<ListItem sx={{height: '10vh'}} key={text} disablePadding> <ListItem className="drawer-list-item" key={text} disablePadding>
<ListItemButton sx={{height: '10vh'}} component={Link} to={routerLinksList[index]} > <ListItemButton className="drawer-list-item-button" component={Link} to={routerLinksList[index]} >
<ListItemIcon> <ListItemIcon className="drawer-list-item">
{React.createElement(iconList[index])} {React.createElement(iconList[index])}
</ListItemIcon> </ListItemIcon>
<ListItemText primary={text} slotProps={{primary: {color: 'primary'}}}/> <ListItemText className="drawer-list-item" primary={text}/>
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
))} ))}
<ListItem sx={{height: '10vh'}} key={"Log Out"} disablePadding> <ListItem className="drawer-list-item-button" key={"Log Out"} disablePadding>
<ListItemButton sx={{height: '10vh'}} onClick={logOut}> <ListItemButton className="drawer-list-item-button" onClick={logOut}>
<ListItemIcon> <ListItemIcon className="drawer-list-item">
{React.createElement(iconList[4])} {React.createElement(iconList[4])}
</ListItemIcon> </ListItemIcon>
<ListItemText primary={"Log Out"} slotProps={{primary: {color: 'primary'}}}/> <ListItemText className="drawer-list-item" primary={"Log Out"}/>
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
</List> </List>
</ThemeProvider>
</Box> </Box>
</StyledEngineProvider>
); );
return ( return (

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

@ -57,3 +57,19 @@
.drawer-list-item-button:hover { .drawer-list-item-button:hover {
background-color: var(--dark-blue-hover); background-color: var(--dark-blue-hover);
} }
.drawer-list {
background-color: #2f325e;
min-height: 100vh;
}
.drawer-list-item {
color: white;
}
.drawer-list-item-button {
height: 10vh;
}
.drawer-list-item-button:hover {
background-color: #555b90;
}