[material-ui][docs] Add TemplateFrame to templates (#43406)

mui · Aug 27, 2024 · a32add2 · a32add2
1 parent a879a93
commit a32add2
Show file tree

Hide file tree

Showing 35 changed files with 1,221 additions and 1,105 deletions.
diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js
@@ -6,7 +6,7 @@ import AppAppBar from './components/AppAppBar';
 import MainContent from './components/MainContent';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 import getBlogTheme from './theme/getBlogTheme';
 
@@ -41,25 +41,25 @@ export default function Blog() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <AppAppBar />
-      <Container
-        maxWidth="lg"
-        component="main"
-        sx={{ display: 'flex', flexDirection: 'column', mt: 24, mb: 16, gap: 4 }}
-      >
-        <MainContent />
-        <Latest />
-      </Container>
-      <Footer />
-    </ThemeProvider>
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
+        <CssBaseline />
+        <AppAppBar />
+        <Container
+          maxWidth="lg"
+          component="main"
+          sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
+        >
+          <MainContent />
+          <Latest />
+        </Container>
+        <Footer />
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/blog/Blog.tsx b/docs/data/material/getting-started/templates/blog/Blog.tsx
@@ -6,7 +6,7 @@ import AppAppBar from './components/AppAppBar';
 import MainContent from './components/MainContent';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 import getBlogTheme from './theme/getBlogTheme';
 
@@ -41,25 +41,26 @@ export default function Blog() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <AppAppBar />
-      <Container
-        maxWidth="lg"
-        component="main"
-        sx={{ display: 'flex', flexDirection: 'column', mt: 24, mb: 16, gap: 4 }}
-      >
-        <MainContent />
-        <Latest />
-      </Container>
-      <Footer />
-    </ThemeProvider>
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
+        <CssBaseline />
+
+        <AppAppBar />
+        <Container
+          maxWidth="lg"
+          component="main"
+          sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
+        >
+          <MainContent />
+          <Latest />
+        </Container>
+        <Footer />
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/.../getting-started/templates/blog/NavBar.js → ...g-started/templates/blog/TemplateFrame.js b/.../getting-started/templates/blog/NavBar.js → ...g-started/templates/blog/TemplateFrame.js
@@ -9,13 +9,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './components/ToggleColorMode';
 import getBlogTheme from './theme/getBlogTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -25,23 +24,35 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+function TemplateFrame({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+  children,
+}) {
   const handleChange = (event) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
   const blogTheme = createTheme(getBlogTheme(mode));
 
   return (
     <ThemeProvider theme={blogTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -84,17 +95,19 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
 
-NavBar.propTypes = {
+TemplateFrame.propTypes = {
+  children: PropTypes.node,
   mode: PropTypes.oneOf(['dark', 'light']).isRequired,
   showCustomTheme: PropTypes.bool.isRequired,
   toggleColorMode: PropTypes.func.isRequired,
   toggleCustomTheme: PropTypes.func.isRequired,
 };
 
-export default NavBar;
+export default TemplateFrame;
diff --git a/...getting-started/templates/blog/NavBar.tsx → ...-started/templates/blog/TemplateFrame.tsx b/...getting-started/templates/blog/NavBar.tsx → ...-started/templates/blog/TemplateFrame.tsx
@@ -13,13 +13,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './components/ToggleColorMode';
 import getBlogTheme from './theme/getBlogTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -29,35 +28,43 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-interface NavBarProps {
+interface TemplateFrameProps {
   showCustomTheme: boolean;
   toggleCustomTheme: (theme: boolean) => void;
   mode: PaletteMode;
   toggleColorMode: () => void;
+  children: React.ReactNode;
 }
 
-export default function NavBar({
+export default function TemplateFrame({
   showCustomTheme,
   toggleCustomTheme,
   mode,
   toggleColorMode,
-}: NavBarProps) {
+  children,
+}: TemplateFrameProps) {
   const handleChange = (event: SelectChangeEvent) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
   const blogTheme = createTheme(getBlogTheme(mode));
 
   return (
     <ThemeProvider theme={blogTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -100,8 +107,9 @@ export default function NavBar({
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/blog/components/Footer.js b/docs/data/material/getting-started/templates/blog/components/Footer.js
@@ -9,7 +9,6 @@ import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import { visuallyHidden } from '@mui/utils';
 import FacebookIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import TwitterIcon from '@mui/icons-material/X';
@@ -70,10 +69,8 @@ export default function Footer() {
               <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
                 Subscribe for weekly updates. No spams ever!
               </Typography>
+              <InputLabel htmlFor="email-newsletter">Email</InputLabel>
               <Stack direction="row" spacing={1} useFlexGap>
-                <InputLabel htmlFor="email-newsletter" sx={visuallyHidden}>
-                  Email
-                </InputLabel>
                 <TextField
                   id="email-newsletter"
                   hiddenLabel

diff --git a/docs/data/material/getting-started/templates/blog/components/Footer.tsx b/docs/data/material/getting-started/templates/blog/components/Footer.tsx
@@ -9,7 +9,6 @@ import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import { visuallyHidden } from '@mui/utils';
 import FacebookIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import TwitterIcon from '@mui/icons-material/X';
@@ -70,10 +69,8 @@ export default function Footer() {
               <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
                 Subscribe for weekly updates. No spams ever!
               </Typography>
+              <InputLabel htmlFor="email-newsletter">Email</InputLabel>
               <Stack direction="row" spacing={1} useFlexGap>
-                <InputLabel htmlFor="email-newsletter" sx={visuallyHidden}>
-                  Email
-                </InputLabel>
                 <TextField
                   id="email-newsletter"
                   hiddenLabel