diff --git a/apps/playnite-web/src/components/FilterDrawer.tsx b/apps/playnite-web/src/components/FilterDrawer.tsx index 64da8adc1..08bb6c00c 100644 --- a/apps/playnite-web/src/components/FilterDrawer.tsx +++ b/apps/playnite-web/src/components/FilterDrawer.tsx @@ -91,6 +91,7 @@ const DrawerHeader = styled('div', { })<{ open: boolean }>(({ open, theme }) => ({ position: 'absolute', right: `24px`, + top: '13px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', @@ -100,6 +101,9 @@ const DrawerHeader = styled('div', { ...(!open && { display: 'none', }), + [theme.breakpoints.down('lg')]: { + top: '0', + }, })) const DrawerBody = styled('div', { @@ -111,8 +115,7 @@ const DrawerBody = styled('div', { position: 'relative', flexDirection: 'column', overflowY: 'hidden', - paddingTop: `56px`, - padding: `${theme.spacing(2.5)}`, + padding: `56px ${theme.spacing(2.5)} ${theme.spacing(2.5)}`, backgroundColor: theme.palette.background.paper, '> *': { @@ -168,7 +171,6 @@ const FilterDrawer: FC<{ anchor="right" open={open} onClose={handleClose} - // ModalProps={{ keepMounted: true }} > ({ display: 'flex', flexDirection: 'row', - justifyContent: 'space-between', width: '100%', + [theme.breakpoints.up('lg')]: { + justifyContent: 'center', + '> button': { + margin: `0 ${theme.spacing(2)}`, + }, + }, + [theme.breakpoints.down('lg')]: { + justifyContent: 'space-between', + '> button': { + flex: 1, + }, + }, })} > - - - + + + ) diff --git a/apps/playnite-web/src/components/Navigation/Drawer.tsx b/apps/playnite-web/src/components/Navigation/Drawer.tsx index f817e8b19..0631fd1d5 100644 --- a/apps/playnite-web/src/components/Navigation/Drawer.tsx +++ b/apps/playnite-web/src/components/Navigation/Drawer.tsx @@ -2,15 +2,24 @@ import { Box, useMediaQuery, useTheme } from '@mui/material' import { FC, PropsWithChildren, ReactNode } from 'react' import MobileDrawerNavigation from './MobileDrawerNavigation' -const Drawer: FC> = ({ - children, - title, -}) => { +const Drawer: FC< + PropsWithChildren<{ + title?: ReactNode | undefined + secondaryMenu?: ReactNode | undefined + }> +> = ({ children, secondaryMenu, title }) => { const theme = useTheme() const shouldUseMobileDrawer = useMediaQuery(theme.breakpoints.down('lg')) return shouldUseMobileDrawer ? ( - + + {title} + {secondaryMenu} + + } + > ({ @@ -65,6 +74,17 @@ const Drawer: FC> = ({ }, })} > + + {secondaryMenu} + {children} ) diff --git a/apps/playnite-web/src/routes/browse.tsx b/apps/playnite-web/src/routes/browse.tsx index 0a1c9e420..7faceb25a 100644 --- a/apps/playnite-web/src/routes/browse.tsx +++ b/apps/playnite-web/src/routes/browse.tsx @@ -1,5 +1,5 @@ import { FilterAlt } from '@mui/icons-material' -import { Box, Button, styled } from '@mui/material' +import { Button, styled } from '@mui/material' import type { LoaderFunctionArgs } from '@remix-run/node' import { json } from '@remix-run/node' import { useLoaderData } from '@remix-run/react' @@ -72,20 +72,16 @@ function Browse() { return ( - - <Button variant="text" onClick={handleScrollTop}> - My Games - </Button> - - setOpen(true)} - name="open-filter-drawer" - sx={{ alignSelf: 'flex-end' }} - > - - - + + <Button variant="text" onClick={handleScrollTop}> + My Games + </Button> + + } + secondaryMenu={ + setOpen(true)} name="open-filter-drawer"> + + } >