[docs] Fix issues with DashboardLayout in Toolpad Core homepage (#3893)

mui · Aug 5, 2024 · 07781cb · 07781cb
1 parent cf06aa2
commit 07781cb
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 39 deletions.
diff --git a/docs/src/components/landing-core/ToolpadAuthDemo.tsx b/docs/src/components/landing-core/ToolpadAuthDemo.tsx
@@ -65,13 +65,13 @@ export default function ToolpadDashboardLayout() {
         <Paper
           variant="outlined"
           sx={(theme) => ({
-            p: 2,
             display: 'flex',
             alignItems: 'center',
             maxWidth: '100%',
             mx: 'auto',
             bgcolor: '#FFF',
             borderRadius: '8px',
+            overflow: 'hidden',
             ...theme.applyDarkStyles({
               bgcolor: 'primaryDark.900',
             }),

diff --git a/docs/src/components/landing-core/ToolpadDashboardLayout.tsx b/docs/src/components/landing-core/ToolpadDashboardLayout.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Paper from '@mui/material/Paper';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
-import Box from '@mui/material/Box';
 
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
@@ -63,8 +62,10 @@ const NAVIGATION: Navigation = [
   },
 ];
 
-function DashboardLayoutBasic() {
-  const [pathname, setPathname] = React.useState('/dashboard');
+function DashboardLayoutBasic(props: DemoProps) {
+  const { window } = props;
+
+  const [pathname, setPathname] = React.useState('/page');
 
   const router = React.useMemo<Router>(() => {
     return {
@@ -74,19 +75,24 @@ function DashboardLayoutBasic() {
     };
   }, [pathname]);
 
+  const demoWindow = window !== undefined ? window() : undefined;
+
   return (
-      <AppProvider navigation={NAVIGATION} router={router}>
+    <AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
       <DashboardLayout>
-        <Box
-          sx={{
-            py: 4,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-          }}
-        >
-          <Typography>Dashboard content for {pathname}</Typography>
-        </Box>
+        <PageContainer>
+          <Grid container spacing={2}>
+            <Grid size={6}>
+              <PlaceHolder height={100} />
+            </Grid>
+            <Grid size={6}>
+              <PlaceHolder height={100} />
+            </Grid>
+            <Grid size={12}>
+              <PlaceHolder height={200} />
+            </Grid>
+          </Grid>
+        </PageContainer>
       </DashboardLayout>
     </AppProvider>
   );
@@ -168,28 +174,19 @@ function DashboardLayoutBasic(props: DemoProps) {
   return (
     <AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
       <DashboardLayout>
-        <Box
-          sx={{
-            py: 4,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-          }}
-        >
-          <PageContainer>
-            <Grid container spacing={2}>
-              <Grid size={6}>
-                <PlaceHolder height={100} />
-              </Grid>
-              <Grid size={6}>
-                <PlaceHolder height={100} />
-              </Grid>
-              <Grid size={12}>
-                <PlaceHolder height={200} />
-              </Grid>
+        <PageContainer>
+          <Grid container spacing={2}>
+            <Grid size={6}>
+              <PlaceHolder height={100} />
+            </Grid>
+            <Grid size={6}>
+              <PlaceHolder height={100} />
+            </Grid>
+            <Grid size={12}>
+              <PlaceHolder height={200} />
             </Grid>
-          </PageContainer>
-        </Box>
+          </Grid>
+        </PageContainer>
       </DashboardLayout>
     </AppProvider>
   );
@@ -202,13 +199,13 @@ export default function ToolpadDashboardLayout() {
         <Paper
           variant="outlined"
           sx={(theme) => ({
-            p: 2,
             display: 'flex',
             alignItems: 'center',
             maxWidth: '100%',
             mx: 'auto',
             bgcolor: '#FFF',
             borderRadius: '8px',
+            overflow: 'hidden',
             ...theme.applyDarkStyles({
               bgcolor: 'primaryDark.900',
             }),

diff --git a/docs/src/components/landing-core/ToolpadPageContainerDemo.tsx b/docs/src/components/landing-core/ToolpadPageContainerDemo.tsx
@@ -66,13 +66,13 @@ export default function ToolpadPageContainerDemo() {
         <Paper
           variant="outlined"
           sx={(theme) => ({
-            p: 2,
             display: 'flex',
             alignItems: 'center',
             maxWidth: '100%',
             mx: 'auto',
             bgcolor: '#FFF',
             borderRadius: '8px',
+            overflow: 'hidden',
             ...theme.applyDarkStyles({
               bgcolor: 'primaryDark.900',
             }),

diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
@@ -52,6 +52,7 @@ const AppBar = styled(MuiAppBar)(({ theme }) => ({
   borderStyle: 'solid',
   borderColor: (theme.vars ?? theme).palette.divider,
   boxShadow: 'none',
+  left: 0,
   zIndex: theme.zIndex.drawer + 1,
 }));
 
@@ -381,7 +382,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
   return (
     <Box sx={{ display: 'flex' }}>
       <AppBar color="inherit" position="fixed">
-        <Toolbar sx={{ backgroundColor: 'inherit' }}>
+        <Toolbar sx={{ backgroundColor: 'inherit', width: '100vw' }}>
           <Box sx={{ display: { xs: 'block', md: 'none' } }}>
             <Tooltip
               title={`${isMobileNavigationOpen ? 'Close' : 'Open'} menu`}