NavBar as frame

aarongarciah · Aug 22, 2024 · 905d8b7 · 905d8b7
1 parent 835773a
commit 905d8b7
Show file tree

Hide file tree

Showing 6 changed files with 280 additions and 271 deletions.
diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.js b/docs/data/material/getting-started/templates/dashboard/Dashboard.js
@@ -8,7 +8,7 @@ import AppNavbar from './components/AppNavbar';
 import Header from './components/Header';
 import MainGrid from './components/MainGrid';
 import SideMenu from './components/SideMenu';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 export default function Dashboard() {
   const [mode, setMode] = React.useState('light');
@@ -43,42 +43,38 @@ export default function Dashboard() {
   return (
     <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
       <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
+      {/* you can delete this TemplateFrame component since it's just no navigate to other pages */}
+      <TemplateFrame
         toggleCustomTheme={toggleCustomTheme}
         showCustomTheme={showCustomTheme}
         mode={mode}
         toggleColorMode={toggleColorMode}
-      />
-      <Box sx={{ display: 'flex' }}>
-        <SideMenu />
-        <AppNavbar />
-        {/* Main content */}
-        <Box
-          component="main"
-          sx={(theme) => ({
-            position: { sm: 'relative', md: '' },
-            top: { sm: '48px', md: '60px' },
-            height: { sm: 'calc(100vh - 48px)', md: '100vh' },
-            flexGrow: 1,
-            backgroundColor: alpha(theme.palette.background.default, 1),
-            overflow: 'auto',
-          })}
-        >
-          <Stack
-            spacing={2}
-            sx={{
-              alignItems: 'center',
-              mx: 3,
-              pb: 10,
-              mt: { xs: 16, sm: 10, md: 0 },
-            }}
+      >
+        <Box sx={{ display: 'flex' }}>
+          <SideMenu />
+          <AppNavbar />
+          {/* Main content */}
+          <Box
+            component="main"
+            sx={(theme) => ({
+              flexGrow: 1,
+              backgroundColor: alpha(theme.palette.background.default, 1),
+            })}
           >
-            <Header />
-            <MainGrid />
-          </Stack>
+            <Stack
+              spacing={2}
+              sx={{
+                alignItems: 'center',
+                mx: 3,
+                mt: { xs: 16, sm: 10, md: 0 },
+              }}
+            >
+              <Header />
+              <MainGrid />
+            </Stack>
+          </Box>
         </Box>
-      </Box>
+      </TemplateFrame>
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
@@ -13,7 +13,7 @@ import AppNavbar from './components/AppNavbar';
 import Header from './components/Header';
 import MainGrid from './components/MainGrid';
 import SideMenu from './components/SideMenu';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 export default function Dashboard() {
   const [mode, setMode] = React.useState<PaletteMode>('light');
@@ -48,42 +48,38 @@ export default function Dashboard() {
   return (
     <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
       <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
+      {/* you can delete this TemplateFrame component since it's just no navigate to other pages */}
+      <TemplateFrame
         toggleCustomTheme={toggleCustomTheme}
         showCustomTheme={showCustomTheme}
         mode={mode}
         toggleColorMode={toggleColorMode}
-      />
-      <Box sx={{ display: 'flex' }}>
-        <SideMenu />
-        <AppNavbar />
-        {/* Main content */}
-        <Box
-          component="main"
-          sx={(theme) => ({
-            position: { sm: 'relative', md: '' },
-            top: { sm: '48px', md: '60px' },
-            height: { sm: 'calc(100vh - 48px)', md: '100vh' },
-            flexGrow: 1,
-            backgroundColor: alpha(theme.palette.background.default, 1),
-            overflow: 'auto',
-          })}
-        >
-          <Stack
-            spacing={2}
-            sx={{
-              alignItems: 'center',
-              mx: 3,
-              pb: 10,
-              mt: { xs: 16, sm: 10, md: 0 },
-            }}
+      >
+        <Box sx={{ display: 'flex' }}>
+          <SideMenu />
+          <AppNavbar />
+          {/* Main content */}
+          <Box
+            component="main"
+            sx={(theme) => ({
+              flexGrow: 1,
+              backgroundColor: alpha(theme.palette.background.default, 1),
+            })}
           >
-            <Header />
-            <MainGrid />
-          </Stack>
+            <Stack
+              spacing={2}
+              sx={{
+                alignItems: 'center',
+                mx: 3,
+                mt: { xs: 16, sm: 10, md: 0 },
+              }}
+            >
+              <Header />
+              <MainGrid />
+            </Stack>
+          </Box>
         </Box>
-      </Box>
+      </TemplateFrame>
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/dashboard/NavBar.js b/docs/data/material/getting-started/templates/dashboard/NavBar.js
diff --git a/docs/data/material/getting-started/templates/dashboard/NavBar.tsx b/docs/data/material/getting-started/templates/dashboard/NavBar.tsx