Need help with the layout problem. the content of the main section is going below the sidebar.

Hello guys I am creating a admin dashboard with react and material ui, and for sidebar I used material ui drawer component and which is fixed. and top bar is transparent, but the main section is displaying stuff weirdly. I have three card which i kept in grid, the card is coming from left side so that first card is hiding behind the sidebar. How to fix this issue.
import React, { useState } from 'react'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import SideNav from './components/nav/SideNav'
import TopNav from './components/nav/TopNav'
import Dashboard from './pages/dashboard/Dashboard'
const App = () => {
const [open, setOpen] = useState(false)
return (
<>
<BrowserRouter>
<TopNav open={open} setOpen={setOpen}/>
<SideNav open={open} setOpen={setOpen}/>
<Routes>
<Route path='/' exact element={<Dashboard/>}/>
</Routes>
</BrowserRouter>
</>
)
}

export default App
import React, { useState } from 'react'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import SideNav from './components/nav/SideNav'
import TopNav from './components/nav/TopNav'
import Dashboard from './pages/dashboard/Dashboard'
const App = () => {
const [open, setOpen] = useState(false)
return (
<>
<BrowserRouter>
<TopNav open={open} setOpen={setOpen}/>
<SideNav open={open} setOpen={setOpen}/>
<Routes>
<Route path='/' exact element={<Dashboard/>}/>
</Routes>
</BrowserRouter>
</>
)
}

export default App
`
2 Replies
Jochem
Jochem17mo ago
without seeing the code, that's going to be hard to answer
nehatkhan
nehatkhan17mo ago
sorry sir, I forgot to paste that. just now I did that This is the code of my app.js file file, where I put the sidebar and topbar so that It can be accessed on every page.
import { Box, Container, Grid, Typography } from "@mui/material";
import React from "react";
import SideNav from "../../components/nav/SideNav";
import TopNav from "../../components/nav/TopNav";
import { OverViewCard } from "../../components/overview/OverViewCard";

const Dashboard = () => {
return (
<>
<Box sx={{display:'flex'}}>
<Box component="main" sx={{py: 8, flexGrow:1 }}>
<Container maxWidth='lg'>
<Grid container spacing={3} sx={{justifyContent:'center', flex:1}}>
<Grid item sm={12} md={6} lg={4}>
<OverViewCard />
</Grid>

<Grid item sm={12} md={6} lg={4}>
<OverViewCard />
</Grid>

<Grid item sm={12} md={6} lg={4}>
<OverViewCard />
</Grid>
</Grid>
</Container>
</Box>
</Box>
</>
);
};

export default Dashboard;
import { Box, Container, Grid, Typography } from "@mui/material";
import React from "react";
import SideNav from "../../components/nav/SideNav";
import TopNav from "../../components/nav/TopNav";
import { OverViewCard } from "../../components/overview/OverViewCard";

const Dashboard = () => {
return (
<>
<Box sx={{display:'flex'}}>
<Box component="main" sx={{py: 8, flexGrow:1 }}>
<Container maxWidth='lg'>
<Grid container spacing={3} sx={{justifyContent:'center', flex:1}}>
<Grid item sm={12} md={6} lg={4}>
<OverViewCard />
</Grid>

<Grid item sm={12} md={6} lg={4}>
<OverViewCard />
</Grid>

<Grid item sm={12} md={6} lg={4}>
<OverViewCard />
</Grid>
</Grid>
</Container>
</Box>
</Box>
</>
);
};

export default Dashboard;
` This is the code of dashboard where I am displaying the cards.
Want results from more Discord servers?
Add your server