[docs-infra] Revamp the product switcher design (#42603)

Co-authored-by: alexandre <alex.fauquette@gmail.com>
mui · Jun 13, 2024 · 0171518 · 0171518
1 parent 424dfff
commit 0171518
Show file tree

Hide file tree

Showing 4 changed files with 319 additions and 193 deletions.
diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
@@ -342,26 +342,18 @@ export default function HeaderNavBar() {
                   variant="outlined"
                   sx={(theme) => ({
                     mt: 1,
-                    minWidth: 498,
                     overflow: 'hidden',
                     borderColor: 'grey.200',
                     bgcolor: 'background.paper',
                     boxShadow: `0px 4px 16px ${alpha(theme.palette.grey[200], 0.8)}`,
-                    '& ul': {
-                      margin: 0,
-                      padding: 0,
-                      listStyle: 'none',
-                    },
                     ...theme.applyDarkStyles({
                       borderColor: 'primaryDark.700',
                       bgcolor: 'primaryDark.900',
                       boxShadow: `0px 4px 16px ${alpha(theme.palette.common.black, 0.8)}`,
                     }),
                   })}
                 >
-                  <ul>
-                    <MuiProductSelector />
-                  </ul>
+                  <MuiProductSelector autoFocusItem={subMenuOpen === 'docs'} />
                 </Paper>
               </Fade>
             )}

diff --git a/docs/src/icons/SvgToolpadLogo.tsx b/docs/src/icons/SvgToolpadLogo.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import RootSvg, { RootSvgProps } from 'docs/src/icons/RootSvg';
+
+export default function SvgToolpadLogo(props: RootSvgProps) {
+  return (
+    <RootSvg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="#0073E6"
+        d="M0 5a5 5 0 0 1 5-5h19v2a4 4 0 0 1-4 4H0V5ZM9 8h6v11a5 5 0 0 1-5 5H9V8Z"
+      />
+    </RootSvg>
+  );
+}
+
+export const toolpadSvgLogoString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#0073E6" d="M0 5a5 5 0 0 1 5-5h19v2a4 4 0 0 1-4 4H0V5ZM9 8h6v11a5 5 0 0 1-5 5H9V8Z"/></svg>`;
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
@@ -2,13 +2,17 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
-import { styled, ThemeProvider } from '@mui/material/styles';
+import { styled, alpha, ThemeProvider } from '@mui/material/styles';
 import List from '@mui/material/List';
 import Drawer from '@mui/material/Drawer';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Fade from '@mui/material/Fade';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Box from '@mui/material/Box';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
@@ -53,56 +57,79 @@ const customButtonStyles = (theme) => ({
 });
 
 function ProductDrawerButton(props) {
-  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
 
-  const open = Boolean(anchorEl);
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
   };
 
-  const handleEventDelegation = (event) => {
-    // Assert whether an 'a' tag resides in the parent of the clicked element through which the event bubbles out.
-    const isLinkInParentTree = Boolean(event.target.closest('a'));
-    // If the element clicked is link or just inside of a link element then close the menu.
-    if (isLinkInParentTree) {
-      handleClose();
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
     }
+    setOpen(false);
   };
 
+  function handleListKeyDown(event) {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      setOpen(false);
+    } else if (event.key === 'Escape') {
+      setOpen(false);
+    }
+  }
+
   return (
     <React.Fragment>
       <Button
         size="small"
         id="mui-product-selector"
+        ref={anchorRef}
         aria-haspopup="true"
         aria-controls={open ? 'drawer-open-button' : undefined}
         aria-expanded={open ? 'true' : undefined}
-        onClick={handleClick}
+        onClick={handleToggle}
         endIcon={<ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />}
         sx={customButtonStyles}
       >
         {props.productName}
       </Button>
-      <Menu
-        id="mui-product-menu"
-        anchorEl={anchorEl}
+      <Popper
         open={open}
-        onClose={handleClose}
-        MenuListProps={{
-          'aria-labelledby': 'mui-product-selector',
-        }}
-        PaperProps={{
-          sx: {
-            width: { xs: 340, sm: 'auto' },
-          },
-        }}
-        onClick={handleEventDelegation}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        placement="bottom-start"
+        disablePortal
+        transition
+        style={{ zIndex: 1200 }}
       >
-        <MuiProductSelector />
-      </Menu>
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={250}>
+            <Paper
+              variant="outlined"
+              sx={(theme) => ({
+                mt: 1,
+                minWidth: { xs: '100%', sm: 600 },
+                overflow: 'clip',
+                boxShadow: `0 4px 16px ${alpha(theme.palette.common.black, 0.15)}`,
+                ...theme.applyDarkStyles({
+                  bgcolor: 'primaryDark.900',
+                }),
+              })}
+            >
+              <ClickAwayListener onClickAway={handleClose}>
+                <MuiProductSelector
+                  autoFocusItem={open}
+                  id="mui-product-menu"
+                  aria-labelledby="mui-product-selector"
+                  onKeyDown={handleListKeyDown}
+                />
+              </ClickAwayListener>
+            </Paper>
+          </Fade>
+        )}
+      </Popper>
     </React.Fragment>
   );
 }