We Keep Coding

The split method is not working - want to split the date

I'm trying to split the date on both release_date and first_air_date however the split() method isn't working for me. What am I doing wrong - please explain! I'm a beginner. Many thanks in advance!
Below is my code:
import { Typography } from "#mui/material";
import { Box } from "#mui/system";
import React from "react";
function Card({ daily }) {
let text = daily.release_date;
let airDate = daily.first_air_date;
const myArray = text.split("-");
const splitDate = airDate.split("-");
const word = myArray[0];
const date = splitDate[0];
console.log(word);
console.log(date);
return (
<Box
sx={{
width: "25%",
height: "550px",
backgroundColor: "#144272",
alignSelf: "flex-start",
borderRadius: "10px",
}}
>
<Box
sx={{
width: "100%",
height: "85%",
backgroundColor: "red",
borderRadius: "20px",
}}
>
<img
className="img-src"
src={`https://image.tmdb.org/t/p/w500/${daily.poster_path}`}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "20px",
}}
/>
</Box>
<Box
sx={{
display: "flex",
align: "center",
fontFamily: "Open Sans, sans-serif",
fontWeight: "normal",
fontSize: "20px",
color: "#fff",
margin: "5px 10px",
flexDirection: "column",
}}
>
{daily.original_title ? (
<Typography sx={{}}>{daily.original_title}</Typography>
) : (
<Typography sx={{}}>{daily.name}</Typography>
)}
<Typography
sx={{
fontFamily: "Open Sans, sans-serif",
fontWeight: "lighter",
fontSize: "15px",
color: "#fff",
margin: "5px 10px",
}}
>
{/*word*/}
</Typography>
{daily.release_date ? (
<Typography sx={{}}>{text}</Typography>
) : (
<Typography sx={{}}>{/*airDate*/}</Typography>
)}
</Box>
</Box>
);
}
export default Card;
I used the split() method in another component, here is the code for that one and it worked fine:
import React from "react";
function Card({ recomendations }) {
let text = recomendations.release_date;
const myArray = text.split("-");
let word = myArray[0];
console.log(word);
return (
<Box
sx={{
width: "25%",
height: "550px",
backgroundColor: "#144272",
alignSelf: "flex-start",
borderRadius: "10px",
}}
>
<Box
sx={{
width: "100%",
height: "85%",
backgroundColor: "red",
borderRadius: "20px",
}}
>
<img
className="img-src"
src={`https://image.tmdb.org/t/p/w500/${recomendations.poster_path}`}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "20px",
}}
/>
</Box>
<Box
sx={{
display: "flex",
align: "center",
fontFamily: "Open Sans, sans-serif",
fontWeight: "normal",
fontSize: "20px",
color: "#fff",
margin: "5px 10px",
flexDirection: "column",
}}
>
<Typography sx={{}}>{recomendations.original_title}</Typography>
<Typography
sx={{
fontFamily: "Open Sans, sans-serif",
fontWeight: "lighter",
fontSize: "15px",
color: "#fff",
margin: "5px 10px",
}}
>
{word}
</Typography>
</Box>
</Box>
);
}
export default Card;

Extra white space above Grid component from Material UI

When applying Grid to my post layout on my social media website, for some reason I am left with extra white space above the Grid element or GIF in this case. How do I remove this extra white space? Here is an image of the whitespace:
Here is an image of what logged for the whitespace via inspect:
Here is the code in question:
import { useEffect, useState, useMemo, useRef } from "react";
import userInformation from "../../services/userInformation";
import { Link, useNavigate } from "react-router-dom";
import ReactPlayer from 'react-player'
import VectorIllustration from "./VectorIllustration";
import AvatarPicture from '../../images/AvatarPicture.png'
import HomeTwoToneIcon from '#mui/icons-material/HomeTwoTone';
import { Avatar } from "#nextui-org/react";
import PageviewTwoToneIcon from '#mui/icons-material/PageviewTwoTone';
import GroupsTwoToneIcon from '#mui/icons-material/GroupsTwoTone';
import EmailTwoToneIcon from '#mui/icons-material/EmailTwoTone';
import SettingsApplicationsTwoToneIcon from '#mui/icons-material/SettingsApplicationsTwoTone';
import { Dialog, Button, IconButton, ImageList, ImageListItem, InputAdornment, DialogTitle } from "#mui/material";
import { TextField, Grid } from "#mui/material";
import { useDispatch, useSelector } from "react-redux";
import { storeUserInformation } from "../../reducers/storeInformationReducer";
import { Loading } from '#nextui-org/react'
import '../../style-sheets/Home.css'
import FavoriteBorderTwoToneIcon from '#mui/icons-material/FavoriteBorderTwoTone';
import FavoriteIcon from '#mui/icons-material/Favorite';
import HeartBrokenIcon from '#mui/icons-material/HeartBroken';
import MessageIcon from '#mui/icons-material/Message';
import IosShareOutlinedIcon from '#mui/icons-material/IosShareOutlined';
import MessageOutlinedIcon from '#mui/icons-material/MessageOutlined';
import InfiniteScroll from 'react-infinite-scroll-component'
import ViewProfileBox from "./ViewProfileBox";
const Home = () => {
const state = useSelector(state => state)
const [savedUser, setSavedUser] = useState()
const [like, setLike] = useState([])
const [mouseOver, setMouseOver] = useState(false)
const [replies, setReplies] = useState([])
const [numberOfPosts, setNumberOfPosts] = useState(Array.from({ length: 5}))
const [hasMore, setHasMore] = useState(true)
const [open, setOpen] = useState(false)
const [imageToView, setImageToView] = useState('')
const dispatch = useDispatch();
const navigate = useNavigate();
useEffect(() => {
const initializer = async () => {
const user = await JSON.parse(window.localStorage.getItem('loggedAppUser'))
setSavedUser(user)
userInformation.setToken(user.token)
const response = await userInformation.findUser(user.user.email)
const arrayOfKeys = Object.keys(response.data.user)
const arrayOfValues = Object.values(response.data.user)
let i = 0
arrayOfKeys.forEach(element => {
dispatch(storeUserInformation(arrayOfValues[i], element))
i++
});
}
initializer()
}, [])
useEffect(() => {
setLike(numberOfPosts.map((post, i) => (like[i] === undefined ? false : like[i])))
setReplies(numberOfPosts.map((post, i) => (replies[i] === undefined ? false : replies[i])))
}, [numberOfPosts])
const handleLike = (index) => {
setLike(like.map((val, i) => index === i ? !val : val));
}
const handleReplies = (index) => {
setReplies(replies.map((val, i) => index === i ? !val : val));
}
const handleOpen = (e) => {
setOpen(true)
setImageToView(e)
}
const handleClose = () => setOpen(false)
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
};
const fetchMoreData = () => {
console.log(state.posts)
console.log(numberOfPosts.length)
if ((Object.entries(state.posts)).length - numberOfPosts.length < 5) {
setTimeout(() => {
setNumberOfPosts(numberOfPosts.concat(Array.from({length: ((Object.entries(state.posts)).length - numberOfPosts)})))
}, 1500)
setHasMore(false)
return;
} else {
setTimeout(() => {
setNumberOfPosts(numberOfPosts.concat(Array.from({length: 5})))
}, 1500)
}
}
return (
<>
<div style={{
position: 'relative',
width: '1920px',
height: '1080px',
background: '#F7F9FE'}}>
<VectorIllustration />
<h1 style={{position: 'absolute', width: '30%', height: '5%', left: '20%', top: '4%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '32px', lineHeight: '40px', color: '#000000'}}>Welcome {state.storage.name}!</h1>
<Link to='/home' style={{position: 'absolute', width: '10%', height: '6.5%', left: '2%', top: '20%', background: 'linear-gradient(90deg, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0) 93.56%)', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Home</Link>
<HomeTwoToneIcon style={{position: 'absolute', left: "3%", top: '21.5%', fontSize: '225%'}} color='primary' />
<Avatar src={state.storage.profileImageURL ? state.storage.profileImageURL : AvatarPicture} style={{position: 'absolute', left: '83.5%', top: '11%', height: '132px', width: '132px'}}></Avatar>
<Link to='/findasponsor' style={{position: 'absolute', width: '10%', height: '6.5%', left: '3.5%', top: '29%', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Find A Sponsor</Link>
<PageviewTwoToneIcon style={{position: 'absolute', left: "3%", top: '30.5%', fontSize: '225%', opacity: '0.7'}} />
<Link to='/Groups' style={{position: 'absolute', width: '10%', height: '6.5%', left: '3.5%', top: '37%', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Groups</Link>
<GroupsTwoToneIcon style={{position: 'absolute', left: "3%", top: '38.6%', fontSize: '225%', opacity: '0.75'}} />
<Link to='/Messsages' style={{position: 'absolute', width: '10%', height: '6.5%', left: '3.5%', top: '45%', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Messages</Link>
<EmailTwoToneIcon style={{position: 'absolute', left: "3%", top: '46.5%', fontSize: '225%', opacity: '0.75'}} />
<Link to='/Settings' style={{position: 'absolute', width: '10%', height: '6.5%', left: '3.5%', top: '54%', textDecoration: 'none', color: '#FFFFFF', display: 'flex', textAlign: 'center', justifyContent: 'center', flexDirection: 'column'}}>Settings</Link>
<SettingsApplicationsTwoToneIcon style={{position: 'absolute', left: "3%", top: '55.5%', fontSize: '225%', opacity: '0.75'}} />
<h1 style={{position: 'absolute', width: '201px', height: '76px', left: '4%', top: '68%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '26px', lineHeight: '38px', textAlign: 'center', color: '#1B1C1F', textDecoration: 'underline'}}>Go Local</h1>
<p style={{position: 'absolute', width: '201px', height: '76px', left: '4%', top: '73%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '15px', textAlign: 'center', color: 'black'}}>Currently, you are viewing sponsors/ sponsees globally. Would you like to view only sponsors/sponsees in your country?</p>
<Button style={{position: 'absolute', left: '4.5%', top: '85%', background: '#FFFFFF', borderRadius: '16px'}}>No</Button>
<Button style={{position: 'absolute', left: '10.5%', top: '85%', background: '#FFFFFF', borderRadius: '16px'}} onClick={(e) => navigate('./Settings')}>Yes</Button>
<h1 style={{position: 'absolute', top: '70%', left: '78%'}}>Trending Users</h1>
<Link to='/home/:id' style={{position: 'absolute', top: '73.25%', left: '94%'}}>View all</Link>
<p style={{position: 'absolute', top: '20%', left: '79%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '600', fontSize: '20px', lineHeight: '25px', textAlign: 'center'}}>{state.storage.followers}</p>
<p style={{position: 'absolute', top: '23%', left: '77.5%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '300', fontSize: '16px', lineHeight: '20px', textAlign: 'center', color: '#A2ADBC'}}>Followers</p>
<p style={{position: 'absolute', top: '20%', left: '94.5%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '600', fontSize: '20px', lineHeight: '25px', textAlign: 'center'}}>{state.storage.following}</p>
<p style={{position: 'absolute', top: '23%', left: '93%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '300', fontSize: '16px', lineHeight: '20px', textAlign: 'center', color: '#A2ADBC'}}>Following</p>
<h1 style={{position: 'absolute', top: '28%', left: '83.6%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '20px', lineHeight: '25px', textAlign: 'center'}}>{state.storage.name}</h1>
<p style={{position: 'absolute', width: '360px', height: '54px', left: '77.6%', top: '33%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '300', fontSize: '14px', lineHeight: '18px', textAlign: 'center', color: '#6D7683'}}>{state.storage.biography}</p>
<ViewProfileBox savedUser={savedUser}/>
{(Object.values(state.posts)).length !== 0 ?
<InfiniteScroll height='100%' dataLength={numberOfPosts.length} next={fetchMoreData} hasMore={hasMore} loader={<Loading style={{position: 'absolute', left: '50%'}}/>}
id='all-post-container' scrollThreshold={0.5} endMessage={<p style={{ textAlign: "center" }}>
<b>That's all folks!</b>
</p>}
style={{position: 'absolute', top: '25%', left: '20%', backgroundColor: '#F7F9FE', height: '72%', width: "54%", borderRadius: '30px'}}>
<Grid
container
direction="column"
justifyContent="center"
alignItems="center"
spacing={15}
>
{numberOfPosts.map((key, i) => {
return (
<Grid container item>
<Grid item xs={12} container style={{backgroundColor: 'white', paddingTop: '20px'}}>
{/* avatar, username, etc */}
<Grid item xs={1} container style={{ justifyContent: "center" }}>
<Avatar src={AvatarPicture} />
</Grid>
<Grid item container xs={11} style={{ gap: "10px" }}>
<Grid item xs={11}>
#{state.posts[i]?.username}
</Grid>
<Grid item xs={11}>
{state.posts[i]?.location} {state.posts[i]?.date}
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post text */}
<p
className="Post"
style={{
padding: "1em",
backgroundColor: "#FFFBEE",
borderRadius: "20px",
margin: '1%'
}}
>
{state.posts[i]?.text}
</p>
</Grid>
{state.posts[i]?.video && (
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post video */}
<ReactPlayer url={state.posts[i].video} controls width='100%'/>
</Grid>
)}
<Grid container wrap="nowrap">
{state.posts[i]?.images && (
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post image */}
<ImageList sx={{overflowX: 'auto' }} rowHeight={200}>
<ImageListItem sx={{display: 'flex', flexDirection: 'row'}}>
{state.posts[i].images.map(image => {
return (
<img
src={image}
alt='title'
loading='lazy'
style={{paddingRight: '1em', objectFit: 'contain'}}
onClick={(e) => handleOpen(e.target.src)}
/>
)
})}
<Dialog
open={open}
onClose={handleClose}
style={{ maxWidth: "100%", maxHeight: "100%" }}
BackdropProps={{invisible: true}}
>
<img
style={{ width: 'auto', height: '100%' }}
src={imageToView}
alt="image"
/>
</Dialog>
</ImageListItem>
</ImageList>
</Grid>
)}
</Grid>
<Grid container wrap="nowrap">
{state.posts[i]?.gif && (
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post gif */}
<img src={state.posts[i].gif} style={{objectFit: 'contain'}} />
</Grid>
)}
</Grid>
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* icon bar */}
<Grid container style={{ padding: 12, gap: 20 }}>
<Grid item>
<IconButton
onClick={() => handleLike(i)}
onMouseLeave={() => setMouseOver(false)}
onMouseOver={() => setMouseOver(true)}
>
{like[i]&& mouseOver ? (
<HeartBrokenIcon style={{ color: "red" }} />
) : like[i] ? (
<FavoriteIcon style={{ color: "red" }} />
) : (
<FavoriteBorderTwoToneIcon />
)}
</IconButton>{" "}
{state.posts[i]?.likes}
</Grid>
<Grid item>
<IconButton onClick={() => handleReplies(i)}>
{replies[i] ? (
<MessageIcon color="primary" />
) : (
<MessageOutlinedIcon />
)}
</IconButton>{" "}
{state.posts[i]?.comments}
</Grid>
<Grid item>
<IconButton>
<IosShareOutlinedIcon />
</IconButton>{" "}
{state.posts[i]?.shares}
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white', borderRadius: '16px'}}>
{/* comment */}
<TextField
InputProps={{
startAdornment: (
<InputAdornment>
<Avatar src={state.storage.profileImageURL} style={{ marginRight: 12 }} />
</InputAdornment>
),
classes: {
notchedOutline: "notched-outline-border-radius"
},
maxLength: 500
}}
maxRows={10}
multiline
placeholder="Write your comment"
style={{ width: "100%" }}
/>
</Grid>
</Grid>
)})}
</Grid>
</InfiniteScroll> : <div id='content-loader' style={{position: 'absolute', top: '25%', left: '20%', backgroundColor: '#F7F9FE', height: '72%', width: "54%", borderRadius: '30px'}}><Loading size='lg' style={{position: 'absolute', left: '50%', top: '50%'}}/></div>}
</div>
</>
)
}
export default Home;
Here is the code that deals specifically with the posting of a gif:
<Grid container wrap="nowrap">
{state.posts[i]?.gif && (
<Grid item xs={12} className="indent2" style={{backgroundColor: 'white'}}>
{/* post gif */}
<img src={state.posts[i].gif} style={{objectFit: 'contain'}} />
</Grid>
)}
</Grid>

I found the solution. The whitespace had the same measurements for the Grid of the post for images. For some reason, even though a post only had a GIF, it was acting as if it also had an image because images is set with an empty array, so to avoid the Grid for images to be rendered i placed a state.posts[i].images.length > 0 ultimatum so there has to be at least 1 image for the image Grid to execute...

Portion of MUI Accordion hidden behind browser bookmark bar when expanded

I am using an MUI accordion in an appBar. When I expand the accordion, it moves up a little bit causing the heading of the accordion to be hidden behind the browsers bookmark bar. Is there some method to prevent this from happening?
const useStyles = makeStyles((theme)) => {
appBar: {
borderBottom: "2px solid #D2D2D2",
backgroundColor: "#fff",
marginTop: "0px",
height: "2.8vw",
},
appBarAcc: {
// display: "flex", // Causes the accordion to expand horizontally
flexDirection: "column",
width: "auto",
// padding: "0.8vw 0.4vw",
"&:hover": {
backgroundColor: "#B6B6B6",
},
},
}
...
<AppBar position="static" className={classes.appBar} elevation={0}>
<Toolbar variant="dense">
<Accordion className={classes.appBarAcc} elevation={0} TransitionProps={{ unmountOnExit: true }}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<NotificationsNoneIcon
style={{ color: "#636363", marginRight: "0.4vw", fontSize: "large", justifyContent: "center" }}
/>
<Typography>Notifications</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>No notifications</Typography>
</AccordionDetails>
</Accordion>
</Toolbar>
</AppBar>

It moves up because it's a child of Toolbar element that is a flex with align-items: center.So You should change Toolbar's style to align-items: flex-start;
const useStyles = makeStyles((theme)) => {
...styles,
toolbar: {
alignItems: "flex-start"
}
}
<Toolbar variant="dense" className={classes.toolbar}>
{children}
</Toolbar>

How to overlay the expand of accordion?

I would like to overlay the expand of the accordion but I don't know whoch part should I do. in the first picture show that output I want it overlay the other textfield when clicking the dropdown icon, as for the second picture show my current output which every time I click the dropdown it does not overlay rather it adjust the textfield. any advice?
What I want:
My current output:
my code:
<Accordion expanded={isExpanded} onClick={() => setExpanded(!isExpanded)}>
<AccordionSummary
expandIcon={<Icon icon={IMAGE.DropIcon} classStyle={classes.icon} />}>
{changeType}
</AccordionSummary>
<AccordionDetails>
<Button
className={classes.button}
onClick={() => onChangeType('GOLD')}>
GOLD
</Button>
<Button
className={classes.button}
onClick={() => onChangeType('GEMS')}>
GEMS
</Button>
<Button
className={classes.button}
onClick={() => onChangeType('COINS')}>
COINS
</Button>
</AccordionDetails>
</Accordion>
my styles:
const Accordion = withStyles({
root: {
padding: 0,
marginBottom:'1rem',
borderRadius: '8px',
boxShadow: 'none',
minHeight: '2em',
width: '15vw',
fontSize: '1.5em',
fontWeight: 600,
'&:not(:last-child)': {
borderBottom: 0,
},
'&:before': {
display: 'none',
},
'&$expanded': {
minHeight: '2em',
padding: 0,
marginTop: 2,
marginBottom: 2,
},
},
expanded: {},
})(MuiAccordion);
const AccordionSummary = withStyles({
root: {
margin: 0,
padding: '0 0 0 1em',
display: 'flex',
flexDirection: 'row',
borderRadius: '8px',
border: '1px solid',
minHeight: '2em',
width: '13.7vw',
'&$expanded': {
minHeight: '2em',
},
'& .MuiAccordionSummary-expandIcon.Mui-expanded': {
transform: 'none',
},
'& .MuiAccordionSummary-expandIcon': {
transform: 'none',
transition: 'none',
},
'& .MuiIconButton-edgeEnd': {
margin: 0,
padding: 0,
},
},
content: {
margin: 0,
'&$expanded': {
margin: 0,
},
},
expanded: {},
})(MuiAccordionSummary);
const AccordionDetails = withStyles(() => ({
root: {
padding: '0',
display: 'flex',
flexDirection: 'column',
width: '100%',
},
}))(MuiAccordionDetails);

You can add overlay by adding z-index to the AccordionDetails.
<Accordion >
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>Accordion 1</Typography>
</AccordionSummary>
<div style={{zIndex:1 ,position:'absolute' ,width:'100%'}}>
<Card >
<AccordionDetails>
<Button>GOLD</Button>
<Button>GEMS</Button>
<Button>COINS</Button>
</AccordionDetails>
</Card>
</div>
</Accordion>
{/* Other contents of the page */}

hey I was looking to Accadian docs https://mui.com/components/accordion/
and all you need to do is just add some for AccordionDetails like background color , and to match the image some padding at the bottom, border and border radius and I tried this for demonstrate this here https://stackblitz.com/edit/react-k3tktv?file=demo.js

Can't get NAV buttons to move to the right in react

Here is my current Mobile Header view:
I want to set it something like this,
I've only been able to achevie so by setting specific left margins, which doesn't make it responsive. Both the profile avator and the menu icon are wrapped in the same <div>, yet I cant for the life of me figure out how to push the div to the RIGHT on my header.
<Toolbar>
<div className={classes.toolbarTitle}>
{Logo}
</div>
<div style={{ float: 'right', display: "flex", alignItems: "right"}}>
{getUserAccount()}
<IconButton
{...{
edge: "start",
color: "inherit",
"aria-label": "menu",
"aria-haspopup": "true",
onClick: handleDrawerOpen,
}}
>
<MenuIcon/>
</IconButton>
</div>
<Drawer
{...{
anchor: "right",
open: drawerOpen,
onClose: handleDrawerClose,
}}
>
<div className={classes.drawerContainer}>{getDrawerChoices()}</div>
<div className={classes.drawerContainer}>
<Switch
checked={isDarkMode}
onChange={toggleDarkMode}
/>
</div>
</Drawer>
</Toolbar>
);
};
Specifically here is the wrapped container for the two elements. I've tried float and a bunch of other CSS but I cannot get it working, the div seems to just stick to the left of the screen!
<div style={{ float: 'right', display: "flex", alignItems: "right"}}>
{getUserAccount()}
<IconButton
{...{
edge: "start",
color: "inherit",
"aria-label": "menu",
"aria-haspopup": "true",
onClick: handleDrawerOpen,
}}
>
<MenuIcon/>
</IconButton>
</div>
Here are some styles I use:
const useStyles = makeStyles((theme) => ({
appBar: {
borderBottom: `1px solid ${ theme.palette.divider }`,
flexGrow: 1,
"#media (max-width: 950px)": {
paddingLeft: 0,
}
},
link: {
margin: theme.spacing(1, 1.5),
display: 'block',
},
toolBar: {
display: "flex",
justifyContent: "space-between",
},
toolbarTitle: {
flexGrow: 1,
fontFamily: 'Track',
textAlign: "left",
float: "left"
},
navLinks: {
fontWeight: 700,
size: "18px",
marginLeft: "38px",
padding: "0 1rem",
float: "center"
},
drawerContainer: {
padding: "20px 30px",
},
profileAvatar: {
display: "flex",
float: 'right',
alignItems: "center",
},
}));
Please let me know how I can solve this.
edit:
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div className={classes.toolbarTitle}>
{Logo}
</div>
<div style={{ float: 'right', display: "flex", alignItems: "right"}}>
{getUserAccount()}
<IconButton
{...{
edge: "start",
color: "inherit",
"aria-label": "menu",
"aria-haspopup": "true",
onClick: handleDrawerOpen,
}}
>
<MenuIcon/>
</IconButton>
</div>
</div>

Wrap the logo in a div and then wrap the menu icon and icon button in another div, which you already have so you can style them independently
Wrap both those divs in a separate .container div and set the css to
.contianer {
display: flex;
justify-content: space-between;
}
You can then move them slightly from the edges of the screen with a little margin if you wish.