| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const isOpen = !!drawerVal; |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <Drawer |
|---|
| | | variant="persistent" |
|---|
| | | open={!!drawerVal} |
|---|
| | | open={isOpen} |
|---|
| | | anchor="right" |
|---|
| | | onClose={handleClose} |
|---|
| | | sx={{ |
|---|
| | | zIndex: 100, |
|---|
| | | '& .MuiDrawer-paper': { |
|---|
| | | top: '86px', // AppBar(50px) + TabsBar(36px) |
|---|
| | | top: '86px', // AppBar(50px) + TabsBar(36px) |
|---|
| | | // 当关闭时，确保内容不可聚焦 |
|---|
| | | ...(isOpen ? {} : { |
|---|
| | | pointerEvents: 'none', |
|---|
| | | visibility: 'hidden', |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }} |
|---|
| | | // 对于 persistent Drawer，使用 PaperProps 来控制可访问性 |
|---|
| | | PaperProps={{ |
|---|
| | | 'aria-hidden': !isOpen, |
|---|
| | | tabIndex: isOpen ? 0 : -1, |
|---|
| | | }} |
|---|
| | | > |
|---|
| | | {!!drawerVal && ( |
|---|
| | | <Box pt={2} width={{ xs: '100vW', sm: width }} mt={{ xs: 2, sm: 1 }}> |
|---|
| | | {isOpen && ( |
|---|
| | | <Box |
|---|
| | | pt={2} |
|---|
| | | width={{ xs: '100vW', sm: width }} |
|---|
| | | mt={{ xs: 2, sm: 1 }} |
|---|
| | | > |
|---|
| | | <Stack direction="row" p={2}> |
|---|
| | | <Typography variant="h6" flex="1"> |
|---|
| | | {title} |
|---|
| | | </Typography> |
|---|
| | | <IconButton onClick={handleClose} size="small"> |
|---|
| | | <IconButton |
|---|
| | | onClick={handleClose} |
|---|
| | | size="small" |
|---|
| | | aria-label="关闭" |
|---|
| | | > |
|---|
| | | <CloseIcon /> |
|---|
| | | </IconButton> |
|---|
| | | </Stack> |
|---|
