milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update responsive drawer breakpoint

Browse source
This commit is contained in:
Bill Thornton 2024-01-07 02:48:29 -05:00
parent 81192057e6
commit 09b80ba151
4 changed files with 11 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/apps/dashboard/AppLayout.tsx
View file

@ -26,7 +26,7 @@ const AppLayout: FC<AppLayoutProps> = ({
const location = useLocation(); const location = useLocation();
const { user } = useApi(); const { user } = useApi();
const isSmallScreen = useMediaQuery((t: Theme) => t.breakpoints.up('sm')); const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md'));
const isDrawerAvailable = Boolean(user) const isDrawerAvailable = Boolean(user)
&& !drawerlessPaths.some(path => location.pathname.startsWith(`/${path}`)); && !drawerlessPaths.some(path => location.pathname.startsWith(`/${path}`));
const isDrawerOpen = isDrawerActive && isDrawerAvailable; const isDrawerOpen = isDrawerActive && isDrawerAvailable;
@ -43,16 +43,16 @@ const AppLayout: FC<AppLayoutProps> = ({
sx={{ sx={{
width: { width: {
xs: '100%', xs: '100%',
sm: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%' md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
}, },
ml: { ml: {
xs: 0, xs: 0,
sm: isDrawerAvailable ? DRAWER_WIDTH : 0 md: isDrawerAvailable ? DRAWER_WIDTH : 0
} }
}} }}
> >
<AppToolbar <AppToolbar
isDrawerAvailable={!isSmallScreen && isDrawerAvailable} isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
isDrawerOpen={isDrawerOpen} isDrawerOpen={isDrawerOpen}
onDrawerButtonClick={onToggleDrawer} onDrawerButtonClick={onToggleDrawer}
/> />

8
src/apps/experimental/AppLayout.tsx
View file

@ -20,7 +20,7 @@ const AppLayout = () => {
const { user } = useApi(); const { user } = useApi();
const location = useLocation(); const location = useLocation();
const isSmallScreen = useMediaQuery((t: Theme) => t.breakpoints.up('sm')); const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md'));
const isDrawerAvailable = isDrawerPath(location.pathname) && Boolean(user); const isDrawerAvailable = isDrawerPath(location.pathname) && Boolean(user);
const isDrawerOpen = isDrawerActive && isDrawerAvailable; const isDrawerOpen = isDrawerActive && isDrawerAvailable;
@ -36,16 +36,16 @@ const AppLayout = () => {
sx={{ sx={{
width: { width: {
xs: '100%', xs: '100%',
sm: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%' md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
}, },
ml: { ml: {
xs: 0, xs: 0,
sm: isDrawerAvailable ? DRAWER_WIDTH : 0 md: isDrawerAvailable ? DRAWER_WIDTH : 0
} }
}} }}
> >
<AppToolbar <AppToolbar
isDrawerAvailable={!isSmallScreen && isDrawerAvailable} isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
isDrawerOpen={isDrawerOpen} isDrawerOpen={isDrawerOpen}
onDrawerButtonClick={onToggleDrawer} onDrawerButtonClick={onToggleDrawer}
/> />

2
src/components/Backdrop.tsx
View file

@ -14,7 +14,7 @@ const Backdrop = () => {
className='backdropContainer' className='backdropContainer'
sx={{ sx={{
left: { left: {
sm: DRAWER_WIDTH md: DRAWER_WIDTH
} }
}} }}
/> />

4
src/components/ResponsiveDrawer.tsx
View file

@ -21,9 +21,9 @@ const ResponsiveDrawer: FC<ResponsiveDrawerProps> = ({
onClose, onClose,
onOpen onOpen
}) => { }) => {
const isSmallScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('sm')); const isMediumScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));
return ( isSmallScreen ? ( return ( isMediumScreen ? (
/* DESKTOP DRAWER */ /* DESKTOP DRAWER */
<Drawer <Drawer
sx={{ sx={{