Skip to content

Commit a32add2

Browse files
zanivanzanivan
authored
[material-ui][docs] Add TemplateFrame to templates (#43406)
1 parent a879a93 commit a32add2

35 files changed

+1221
-1105
lines changed

‎docs/data/material/getting-started/templates/blog/Blog.js‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import AppAppBar from './components/AppAppBar';
66
import MainContent from './components/MainContent';
77
import Latest from './components/Latest';
88
import Footer from './components/Footer';
9-
import NavBar from './NavBar';
9+
import TemplateFrame from './TemplateFrame';
1010

1111
import getBlogTheme from './theme/getBlogTheme';
1212

@@ -41,25 +41,25 @@ export default function Blog() {
4141
};
4242

4343
return (
44-
<ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
45-
<CssBaseline />
46-
{/* you can delete this NavBar component since it's just no navigate to other pages */}
47-
<NavBar
48-
toggleCustomTheme={toggleCustomTheme}
49-
showCustomTheme={showCustomTheme}
50-
mode={mode}
51-
toggleColorMode={toggleColorMode}
52-
/>
53-
<AppAppBar />
54-
<Container
55-
maxWidth="lg"
56-
component="main"
57-
sx={{ display: 'flex', flexDirection: 'column', mt: 24, mb: 16, gap: 4 }}
58-
>
59-
<MainContent />
60-
<Latest />
61-
</Container>
62-
<Footer />
63-
</ThemeProvider>
44+
<TemplateFrame
45+
toggleCustomTheme={toggleCustomTheme}
46+
showCustomTheme={showCustomTheme}
47+
mode={mode}
48+
toggleColorMode={toggleColorMode}
49+
>
50+
<ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
51+
<CssBaseline />
52+
<AppAppBar />
53+
<Container
54+
maxWidth="lg"
55+
component="main"
56+
sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
57+
>
58+
<MainContent />
59+
<Latest />
60+
</Container>
61+
<Footer />
62+
</ThemeProvider>
63+
</TemplateFrame>
6464
);
6565
}

‎docs/data/material/getting-started/templates/blog/Blog.tsx‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import AppAppBar from './components/AppAppBar';
66
import MainContent from './components/MainContent';
77
import Latest from './components/Latest';
88
import Footer from './components/Footer';
9-
import NavBar from './NavBar';
9+
import TemplateFrame from './TemplateFrame';
1010

1111
import getBlogTheme from './theme/getBlogTheme';
1212

@@ -41,25 +41,26 @@ export default function Blog() {
4141
};
4242

4343
return (
44-
<ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
45-
<CssBaseline />
46-
{/* you can delete this NavBar component since it's just no navigate to other pages */}
47-
<NavBar
48-
toggleCustomTheme={toggleCustomTheme}
49-
showCustomTheme={showCustomTheme}
50-
mode={mode}
51-
toggleColorMode={toggleColorMode}
52-
/>
53-
<AppAppBar />
54-
<Container
55-
maxWidth="lg"
56-
component="main"
57-
sx={{ display: 'flex', flexDirection: 'column', mt: 24, mb: 16, gap: 4 }}
58-
>
59-
<MainContent />
60-
<Latest />
61-
</Container>
62-
<Footer />
63-
</ThemeProvider>
44+
<TemplateFrame
45+
toggleCustomTheme={toggleCustomTheme}
46+
showCustomTheme={showCustomTheme}
47+
mode={mode}
48+
toggleColorMode={toggleColorMode}
49+
>
50+
<ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
51+
<CssBaseline />
52+
53+
<AppAppBar />
54+
<Container
55+
maxWidth="lg"
56+
component="main"
57+
sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
58+
>
59+
<MainContent />
60+
<Latest />
61+
</Container>
62+
<Footer />
63+
</ThemeProvider>
64+
</TemplateFrame>
6465
);
6566
}

‎docs/data/material/getting-started/templates/blog/NavBar.js‎ renamed to ‎docs/data/material/getting-started/templates/blog/TemplateFrame.js‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,12 @@ import IconButton from '@mui/material/IconButton';
99
import Box from '@mui/material/Box';
1010
import AppBar from '@mui/material/AppBar';
1111
import Toolbar from '@mui/material/Toolbar';
12-
import Container from '@mui/material/Container';
1312
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
1413
import ToggleColorMode from './components/ToggleColorMode';
1514
import getBlogTheme from './theme/getBlogTheme';
1615

1716
const StyledAppBar = styled(AppBar)(({ theme }) => ({
18-
position: 'fixed',
17+
position: 'relative',
1918
display: 'flex',
2019
alignItems: 'center',
2120
justifyContent: 'space-between',
@@ -25,23 +24,35 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
2524
backgroundColor: theme.palette.background.paper,
2625
boxShadow: theme.shadows[1],
2726
backgroundImage: 'none',
28-
padding: 4,
27+
zIndex: theme.zIndex.drawer + 1,
28+
flex: '0 0 auto',
2929
}));
3030

31-
function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
31+
function TemplateFrame({
32+
showCustomTheme,
33+
toggleCustomTheme,
34+
mode,
35+
toggleColorMode,
36+
children,
37+
}) {
3238
const handleChange = (event) => {
3339
toggleCustomTheme(event.target.value === 'custom');
3440
};
3541
const blogTheme = createTheme(getBlogTheme(mode));
3642

3743
return (
3844
<ThemeProvider theme={blogTheme}>
39-
<StyledAppBar>
40-
<Container maxWidth="lg">
45+
<Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
46+
<StyledAppBar>
4147
<Toolbar
4248
variant="dense"
4349
disableGutters
44-
sx={{ display: 'flex', justifyContent: 'space-between' }}
50+
sx={{
51+
display: 'flex',
52+
justifyContent: 'space-between',
53+
width: '100%',
54+
p: '8px 12px',
55+
}}
4556
>
4657
<Button
4758
variant="text"
@@ -84,17 +95,19 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
8495
/>
8596
</Box>
8697
</Toolbar>
87-
</Container>
88-
</StyledAppBar>
98+
</StyledAppBar>
99+
<Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
100+
</Box>
89101
</ThemeProvider>
90102
);
91103
}
92104

93-
NavBar.propTypes = {
105+
TemplateFrame.propTypes = {
106+
children: PropTypes.node,
94107
mode: PropTypes.oneOf(['dark', 'light']).isRequired,
95108
showCustomTheme: PropTypes.bool.isRequired,
96109
toggleColorMode: PropTypes.func.isRequired,
97110
toggleCustomTheme: PropTypes.func.isRequired,
98111
};
99112

100-
export default NavBar;
113+
export default TemplateFrame;

‎docs/data/material/getting-started/templates/blog/NavBar.tsx‎ renamed to ‎docs/data/material/getting-started/templates/blog/TemplateFrame.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,12 @@ import IconButton from '@mui/material/IconButton';
1313
import Box from '@mui/material/Box';
1414
import AppBar from '@mui/material/AppBar';
1515
import Toolbar from '@mui/material/Toolbar';
16-
import Container from '@mui/material/Container';
1716
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
1817
import ToggleColorMode from './components/ToggleColorMode';
1918
import getBlogTheme from './theme/getBlogTheme';
2019

2120
const StyledAppBar = styled(AppBar)(({ theme }) => ({
22-
position: 'fixed',
21+
position: 'relative',
2322
display: 'flex',
2423
alignItems: 'center',
2524
justifyContent: 'space-between',
@@ -29,35 +28,43 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
2928
backgroundColor: theme.palette.background.paper,
3029
boxShadow: theme.shadows[1],
3130
backgroundImage: 'none',
32-
padding: 4,
31+
zIndex: theme.zIndex.drawer + 1,
32+
flex: '0 0 auto',
3333
}));
3434

35-
interface NavBarProps {
35+
interface TemplateFrameProps {
3636
showCustomTheme: boolean;
3737
toggleCustomTheme: (theme: boolean) => void;
3838
mode: PaletteMode;
3939
toggleColorMode: () => void;
40+
children: React.ReactNode;
4041
}
4142

42-
export default function NavBar({
43+
export default function TemplateFrame({
4344
showCustomTheme,
4445
toggleCustomTheme,
4546
mode,
4647
toggleColorMode,
47-
}: NavBarProps) {
48+
children,
49+
}: TemplateFrameProps) {
4850
const handleChange = (event: SelectChangeEvent) => {
4951
toggleCustomTheme(event.target.value === 'custom');
5052
};
5153
const blogTheme = createTheme(getBlogTheme(mode));
5254

5355
return (
5456
<ThemeProvider theme={blogTheme}>
55-
<StyledAppBar>
56-
<Container maxWidth="lg">
57+
<Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
58+
<StyledAppBar>
5759
<Toolbar
5860
variant="dense"
5961
disableGutters
60-
sx={{ display: 'flex', justifyContent: 'space-between' }}
62+
sx={{
63+
display: 'flex',
64+
justifyContent: 'space-between',
65+
width: '100%',
66+
p: '8px 12px',
67+
}}
6168
>
6269
<Button
6370
variant="text"
@@ -100,8 +107,9 @@ export default function NavBar({
100107
/>
101108
</Box>
102109
</Toolbar>
103-
</Container>
104-
</StyledAppBar>
110+
</StyledAppBar>
111+
<Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
112+
</Box>
105113
</ThemeProvider>
106114
);
107115
}

‎docs/data/material/getting-started/templates/blog/components/Footer.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import Link from '@mui/material/Link';
99
import Stack from '@mui/material/Stack';
1010
import TextField from '@mui/material/TextField';
1111
import Typography from '@mui/material/Typography';
12-
import { visuallyHidden } from '@mui/utils';
1312
import FacebookIcon from '@mui/icons-material/GitHub';
1413
import LinkedInIcon from '@mui/icons-material/LinkedIn';
1514
import TwitterIcon from '@mui/icons-material/X';
@@ -70,10 +69,8 @@ export default function Footer() {
7069
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
7170
Subscribe for weekly updates. No spams ever!
7271
</Typography>
72+
<InputLabel htmlFor="email-newsletter">Email</InputLabel>
7373
<Stack direction="row" spacing={1} useFlexGap>
74-
<InputLabel htmlFor="email-newsletter" sx={visuallyHidden}>
75-
Email
76-
</InputLabel>
7774
<TextField
7875
id="email-newsletter"
7976
hiddenLabel

‎docs/data/material/getting-started/templates/blog/components/Footer.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import Link from '@mui/material/Link';
99
import Stack from '@mui/material/Stack';
1010
import TextField from '@mui/material/TextField';
1111
import Typography from '@mui/material/Typography';
12-
import { visuallyHidden } from '@mui/utils';
1312
import FacebookIcon from '@mui/icons-material/GitHub';
1413
import LinkedInIcon from '@mui/icons-material/LinkedIn';
1514
import TwitterIcon from '@mui/icons-material/X';
@@ -70,10 +69,8 @@ export default function Footer() {
7069
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
7170
Subscribe for weekly updates. No spams ever!
7271
</Typography>
72+
<InputLabel htmlFor="email-newsletter">Email</InputLabel>
7373
<Stack direction="row" spacing={1} useFlexGap>
74-
<InputLabel htmlFor="email-newsletter" sx={visuallyHidden}>
75-
Email
76-
</InputLabel>
7774
<TextField
7875
id="email-newsletter"
7976
hiddenLabel

0 commit comments

Comments
 (0)