Files
react-test/docs/data/material/components/app-bar/ProminentAppBar.js
how2ice 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
init project
2025-12-12 14:26:25 +09:00

59 lines
1.6 KiB
JavaScript

import { styled } 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 MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import MoreIcon from '@mui/icons-material/MoreVert';
const StyledToolbar = styled(Toolbar)(({ theme }) => ({
alignItems: 'flex-start',
paddingTop: theme.spacing(1),
paddingBottom: theme.spacing(2),
// Override media queries injected by theme.mixins.toolbar
'@media all': {
minHeight: 128,
},
}));
export default function ProminentAppBar() {
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<StyledToolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="open drawer"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography
variant="h5"
noWrap
component="div"
sx={{ flexGrow: 1, alignSelf: 'flex-end' }}
>
MUI
</Typography>
<IconButton size="large" aria-label="search" color="inherit">
<SearchIcon />
</IconButton>
<IconButton
size="large"
aria-label="display more actions"
edge="end"
color="inherit"
>
<MoreIcon />
</IconButton>
</StyledToolbar>
</AppBar>
</Box>
);
}