diff --git a/src/components/molecules/Toolbar/index.tsx b/src/components/molecules/Toolbar/index.tsx index d7954b1..13be7a6 100644 --- a/src/components/molecules/Toolbar/index.tsx +++ b/src/components/molecules/Toolbar/index.tsx @@ -17,6 +17,7 @@ import { Typography, styled, useScrollTrigger, + useTheme, } from '@mui/material' import MenuIcon from '@mui/icons-material/Menu' @@ -43,6 +44,7 @@ interface CustomToolbarProps extends AppBarProps { } const CustomToolbar: React.FC = ({ drawerWidth = 240, window, ...props }) => { const [mobileOpen, setMobileOpen] = React.useState(false) + const theme = useTheme() const trigger = useScrollTrigger({ disableHysteresis: true, @@ -66,11 +68,6 @@ const CustomToolbar: React.FC = ({ drawerWidth = 240, window - {/* - - Home - - */} @@ -96,10 +93,15 @@ const CustomToolbar: React.FC = ({ drawerWidth = 240, window elevation={0} {...props} sx={{ - backgroundColor: trigger ? theme => (theme.palette.mode === 'dark' ? 'background.paper' : undefined) : 'transparent', + backgroundColor: trigger ? (theme.palette.mode === 'dark' ? 'background.paper' : undefined) : 'transparent', ...props.sx, }}> - + = ({ drawerWidth = 240, window sx={{ mr: 2, display: { md: 'none' }, position: 'absolute', backgroundColor: 'primary' }}> - - Michele Tartari - + ({ + [theme.breakpoints.down('md')]: { + mx: 'auto', + }, + [theme.breakpoints.up('md')]: { + mr: 'auto', + }, + })}> + Michele Tartari + Home diff --git a/src/components/templates/Page/Page.tsx b/src/components/templates/Page/Page.tsx index 1793612..c2538ae 100644 --- a/src/components/templates/Page/Page.tsx +++ b/src/components/templates/Page/Page.tsx @@ -52,7 +52,7 @@ const Page: React.FC = ({ title, children, ...props }) => { minHeight: '80vh', mx: 'auto', maxWidth: { xs: '100%', md: 'calc(100% - 4em)' }, - width: '70em', + width: '80em', ...props.sx, }}> {children}