[material-ui][docs] Refine templates theme selector (#43396)

mui · Aug 22, 2024 · af6a748 · af6a748
1 parent 55bea65
commit af6a748
Show file tree

Hide file tree

Showing 64 changed files with 1,700 additions and 1,099 deletions.
diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js
@@ -1,65 +1,15 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import CssBaseline from '@mui/material/CssBaseline';
-import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-
 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 getBlogTheme from './theme/getBlogTheme';
 
-function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
-
-ToggleCustomTheme.propTypes = {
-  showCustomTheme: PropTypes.shape({
-    valueOf: PropTypes.func.isRequired,
-  }).isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
-
 export default function Blog() {
   const [mode, setMode] = React.useState('light');
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
@@ -85,27 +35,31 @@ export default function Blog() {
     setMode(newMode);
     localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
   };
+
   const toggleCustomTheme = () => {
     setShowCustomTheme((prev) => !prev);
   };
 
   return (
     <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
       <CssBaseline />
-      <AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
+      {/* 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', my: 16, gap: 4 }}
+        sx={{ display: 'flex', flexDirection: 'column', mt: 24, mb: 16, gap: 4 }}
       >
         <MainContent />
         <Latest />
       </Container>
       <Footer />
-      <ToggleCustomTheme
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-      />
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/blog/Blog.tsx b/docs/data/material/getting-started/templates/blog/Blog.tsx
@@ -1,65 +1,15 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
-import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles';
-
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-
 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 getBlogTheme from './theme/getBlogTheme';
 
-interface ToggleCustomThemeProps {
-  showCustomTheme: Boolean;
-  toggleCustomTheme: () => void;
-}
-
-function ToggleCustomTheme({
-  showCustomTheme,
-  toggleCustomTheme,
-}: ToggleCustomThemeProps) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
-
 export default function Blog() {
   const [mode, setMode] = React.useState<PaletteMode>('light');
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
@@ -85,27 +35,31 @@ export default function Blog() {
     setMode(newMode);
     localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
   };
+
   const toggleCustomTheme = () => {
     setShowCustomTheme((prev) => !prev);
   };
 
   return (
     <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
       <CssBaseline />
-      <AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
+      {/* 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', my: 16, gap: 4 }}
+        sx={{ display: 'flex', flexDirection: 'column', mt: 24, mb: 16, gap: 4 }}
       >
         <MainContent />
         <Latest />
       </Container>
       <Footer />
-      <ToggleCustomTheme
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-      />
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/blog/NavBar.js b/docs/data/material/getting-started/templates/blog/NavBar.js
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+  const handleChange = (event) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const blogTheme = createTheme(getBlogTheme(mode));
+
+  return (
+    <ThemeProvider theme={blogTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
+
+NavBar.propTypes = {
+  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
+  showCustomTheme: PropTypes.bool.isRequired,
+  toggleColorMode: PropTypes.func.isRequired,
+  toggleCustomTheme: PropTypes.func.isRequired,
+};
+
+export default NavBar;