005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
89 lines
2.3 KiB
JavaScript
89 lines
2.3 KiB
JavaScript
import { styled, alpha } from '@mui/material/styles';
|
|
import AppBar from '@mui/material/AppBar';
|
|
import Box from '@mui/material/Box';
|
|
import Toolbar from '@mui/material/Toolbar';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Typography from '@mui/material/Typography';
|
|
import InputBase from '@mui/material/InputBase';
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
import SearchIcon from '@mui/icons-material/Search';
|
|
|
|
const Search = styled('div')(({ theme }) => ({
|
|
position: 'relative',
|
|
borderRadius: theme.shape.borderRadius,
|
|
backgroundColor: alpha(theme.palette.common.white, 0.15),
|
|
'&:hover': {
|
|
backgroundColor: alpha(theme.palette.common.white, 0.25),
|
|
},
|
|
marginLeft: 0,
|
|
width: '100%',
|
|
[theme.breakpoints.up('sm')]: {
|
|
marginLeft: theme.spacing(1),
|
|
width: 'auto',
|
|
},
|
|
}));
|
|
|
|
const SearchIconWrapper = styled('div')(({ theme }) => ({
|
|
padding: theme.spacing(0, 2),
|
|
height: '100%',
|
|
position: 'absolute',
|
|
pointerEvents: 'none',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}));
|
|
|
|
const StyledInputBase = styled(InputBase)(({ theme }) => ({
|
|
color: 'inherit',
|
|
width: '100%',
|
|
'& .MuiInputBase-input': {
|
|
padding: theme.spacing(1, 1, 1, 0),
|
|
// vertical padding + font size from searchIcon
|
|
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
|
|
transition: theme.transitions.create('width'),
|
|
[theme.breakpoints.up('sm')]: {
|
|
width: '12ch',
|
|
'&:focus': {
|
|
width: '20ch',
|
|
},
|
|
},
|
|
},
|
|
}));
|
|
|
|
export default function SearchAppBar() {
|
|
return (
|
|
<Box sx={{ flexGrow: 1 }}>
|
|
<AppBar position="static">
|
|
<Toolbar>
|
|
<IconButton
|
|
size="large"
|
|
edge="start"
|
|
color="inherit"
|
|
aria-label="open drawer"
|
|
sx={{ mr: 2 }}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Typography
|
|
variant="h6"
|
|
noWrap
|
|
component="div"
|
|
sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
|
|
>
|
|
MUI
|
|
</Typography>
|
|
<Search>
|
|
<SearchIconWrapper>
|
|
<SearchIcon />
|
|
</SearchIconWrapper>
|
|
<StyledInputBase
|
|
placeholder="Search…"
|
|
inputProps={{ 'aria-label': 'search' }}
|
|
/>
|
|
</Search>
|
|
</Toolbar>
|
|
</AppBar>
|
|
</Box>
|
|
);
|
|
}
|