[core] Make DashboardLayout navigation responsive (mui#3750)

Janpot · Jul 19, 2024 · aef3803 · aef3803
1 parent 98b87ad
commit aef3803
Show file tree

Hide file tree

Showing 23 changed files with 389 additions and 66 deletions.
diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import { extendTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import { AppProvider } from '@toolpad/core/AppProvider';
@@ -24,6 +25,18 @@ const NAVIGATION = [
   },
 ];
 
+const demoTheme = extendTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
 function DemoPageContent({ pathname }) {
   return (
     <Box
@@ -62,7 +75,12 @@ function AppProviderBasic(props) {
 
   return (
     // preview-start
-    <AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
+    <AppProvider
+      navigation={NAVIGATION}
+      router={router}
+      theme={demoTheme}
+      window={demoWindow}
+    >
       <DashboardLayout>
         <DemoPageContent pathname={pathname} />
       </DashboardLayout>

diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import { extendTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import { AppProvider } from '@toolpad/core/AppProvider';
@@ -24,6 +25,18 @@ const NAVIGATION: Navigation = [
   },
 ];
 
+const demoTheme = extendTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
 function DemoPageContent({ pathname }: { pathname: string }) {
   return (
     <Box
@@ -66,7 +79,12 @@ export default function AppProviderBasic(props: DemoProps) {
 
   return (
     // preview-start
-    <AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
+    <AppProvider
+      navigation={NAVIGATION}
+      router={router}
+      theme={demoTheme}
+      window={demoWindow}
+    >
       <DashboardLayout>
         <DemoPageContent pathname={pathname} />
       </DashboardLayout>

diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview b/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview
@@ -1,4 +1,9 @@
-<AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
+<AppProvider
+  navigation={NAVIGATION}
+  router={router}
+  theme={demoTheme}
+  window={demoWindow}
+>
   <DashboardLayout>
     <DemoPageContent pathname={pathname} />
   </DashboardLayout>

diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js
@@ -44,6 +44,15 @@ const customTheme = extendTheme({
       },
     },
   },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
 });
 
 function DemoPageContent({ pathname }) {

diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx b/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx
@@ -44,6 +44,15 @@ const customTheme = extendTheme({
       },
     },
   },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
 });
 
 function DemoPageContent({ pathname }: { pathname: string }) {

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import { extendTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import BarChartIcon from '@mui/icons-material/BarChart';
@@ -56,6 +57,18 @@ const NAVIGATION = [
   },
 ];
 
+const demoTheme = extendTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
 function DemoPageContent({ pathname }) {
   return (
     <Box
@@ -94,7 +107,12 @@ function DashboardLayoutBasic(props) {
 
   return (
     // preview-start
-    <AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
+    <AppProvider
+      navigation={NAVIGATION}
+      router={router}
+      theme={demoTheme}
+      window={demoWindow}
+    >
       <DashboardLayout>
         <DemoPageContent pathname={pathname} />
       </DashboardLayout>

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import { extendTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import BarChartIcon from '@mui/icons-material/BarChart';
@@ -56,6 +57,18 @@ const NAVIGATION: Navigation = [
   },
 ];
 
+const demoTheme = extendTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
 function DemoPageContent({ pathname }: { pathname: string }) {
   return (
     <Box
@@ -98,7 +111,12 @@ export default function DashboardLayoutBasic(props: DemoProps) {
 
   return (
     // preview-start
-    <AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
+    <AppProvider
+      navigation={NAVIGATION}
+      router={router}
+      theme={demoTheme}
+      window={demoWindow}
+    >
       <DashboardLayout>
         <DemoPageContent pathname={pathname} />
       </DashboardLayout>

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.tsx.preview
@@ -1,4 +1,9 @@
-<AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
+<AppProvider
+  navigation={NAVIGATION}
+  router={router}
+  theme={demoTheme}
+  window={demoWindow}
+>
   <DashboardLayout>
     <DemoPageContent pathname={pathname} />
   </DashboardLayout>

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import { extendTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { AppProvider } from '@toolpad/core/AppProvider';
@@ -20,6 +21,18 @@ const NAVIGATION = [
   },
 ];
 
+const demoTheme = extendTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
 function DemoPageContent({ pathname }) {
   return (
     <Box
@@ -65,6 +78,7 @@ function DashboardLayoutBranding(props) {
         title: 'MUI',
       }}
       router={router}
+      theme={demoTheme}
       window={demoWindow}
     >
       <DashboardLayout>

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import { extendTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { AppProvider, Router } from '@toolpad/core/AppProvider';
@@ -20,6 +21,18 @@ const NAVIGATION: Navigation = [
   },
 ];
 
+const demoTheme = extendTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
 function DemoPageContent({ pathname }: { pathname: string }) {
   return (
     <Box
@@ -69,6 +82,7 @@ export default function DashboardLayoutBranding(props: DemoProps) {
         title: 'MUI',
       }}
       router={router}
+      theme={demoTheme}
       window={demoWindow}
     >
       <DashboardLayout>

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx.preview
@@ -5,6 +5,7 @@
     title: 'MUI',
   }}
   router={router}
+  theme={demoTheme}
   window={demoWindow}
 >
   <DashboardLayout>

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js
@@ -2,11 +2,24 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import { extendTheme } from '@mui/material/styles';
 import DescriptionIcon from '@mui/icons-material/Description';
 import FolderIcon from '@mui/icons-material/Folder';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 
+const demoTheme = extendTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
 function DemoPageContent({ pathname }) {
   return (
     <Box
@@ -187,6 +200,7 @@ function DashboardLayoutNavigation(props) {
         },
       ]}
       router={router}
+      theme={demoTheme}
       window={demoWindow}
     >
       <DashboardLayout>

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx
@@ -1,11 +1,24 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import { extendTheme } from '@mui/material/styles';
 import DescriptionIcon from '@mui/icons-material/Description';
 import FolderIcon from '@mui/icons-material/Folder';
 import { AppProvider, Router } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 
+const demoTheme = extendTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
 function DemoPageContent({ pathname }: { pathname: string }) {
   return (
     <Box
@@ -190,6 +203,7 @@ export default function DashboardLayoutNavigation(props: DemoProps) {
         },
       ]}
       router={router}
+      theme={demoTheme}
       window={demoWindow}
     >
       <DashboardLayout>

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.tsx.preview
@@ -140,6 +140,7 @@
     },
   ]}
   router={router}
+  theme={demoTheme}
   window={demoWindow}
 >
   <DashboardLayout>