I am struggling to get the Logo to print followed by all buttons lined up side-by-side. I have experimented with different display properties within the first <div> tag such as block, inline-block, and even removing the display property altogether. I also attempted removing the Box mui tag, but nothing seems to be working. It's possible that I am making a simple mistake due to my lack of experience in CSS.
This is part of a Next.js project.
import {makeStyles} from '@material-ui/core/styles';
import DashboardIcon from '@material-ui/icons/DashboardOutlined';
import ListingsIcon from '@material-ui/icons/Reorder';
import ScheduleIcon from '@material-ui/icons/EventNote';
import ProfileIcon from '@material-ui/icons/AccountCircleOutlined';
import SalesIcon from '@material-ui/icons/TrendingUp';
import BookingsIcon from '../../public/images/bookingsIcon.svg';
import Logo from '../mainLogo';
import Box from '@material-ui/core/Box';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
},
},
}));
export default function SideNav() {
const classes = useStyles();
return (
<Box>
<Logo />
<div display="block">
<Button
variant="contained"
color="primary"
className={classes.root}
startIcon={<DashboardIcon />}
>
Dashboard
</Button>
<Button
variant="contained"
color="primary"
className={classes.root}
startIcon={<ListingsIcon />}
>
Listings
</Button>
<Button
variant="contained"
color="primary"
className={classes.root}
startIcon={<ScheduleIcon />}
>
Schedule
</Button>
<Button
variant="contained"
color="primary"
className={classes.root}
startIcon={<BookingsIcon />}
>
Bookings
</Button>
<Button
variant="contained"
color="primary"
className={classes.root}
startIcon={<SalesIcon />}
>
Sales & Analytics
</Button>
<Button
variant="contained"
color="primary"
className={classes.root}
startIcon={<ProfileIcon />}
>
Profile
</Button>
</div>
</Box>
);
};