Kevin Powell - Community•2y ago

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•2y ago

without seeing the code, that's going to be hard to answer

nehatkhanOP•2y 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.

Gaming

Programming

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