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

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

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

@ -74,3 +74,19 @@
.drawer-list-item-button:hover {
background-color: #555b90;
}
.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;
}