simple-picture-gallery/picture-gallery-client/src/MuiLayout/AppBar.tsx

27 lines
827 B
TypeScript

import { styled } from "@mui/material/styles";
import MuiAppBar from "@mui/material/AppBar";
import env from "../env";
const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== "open",
})<{
open?: boolean;
drawerwidth: number;
}>(({ theme, open, drawerwidth }) => ({
backgroundColor: env.REACT_APP_APPBAR_COLOR ?? "#1976D2",
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
width: `calc(100% - ${drawerwidth}px)`,
marginLeft: `${drawerwidth}px`,
transition: theme.transitions.create(["margin", "width"], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));
export default AppBar;