diff options
Diffstat (limited to 'src/pages/Page.tsx')
| -rw-r--r-- | src/pages/Page.tsx | 16 |
1 files changed, 13 insertions, 3 deletions
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 24487f3..56d7372 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -1,6 +1,8 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; +import { useMediaQuery } from '@material-ui/core'; import { SnackbarProvider } from 'notistack'; + import ProfilePage from './ProfilePage/ProfilePage'; import FeedPage from './FeedPage/FeedPage'; import AuthPage from './AuthPage/AuthPage'; @@ -8,21 +10,29 @@ import HomePage from './HomePage/HomePage'; import NotificationsPage from './NotificationsPage/NotificationsPage'; import { useNavigate } from '../hooks/useNavigate'; + const useStyles = makeStyles(theme => ({ root: { - margin: theme.spacing(15, 5, 5, 8) + [theme.breakpoints.down('sm')]: { + margin: theme.spacing(2, 0, 12, 0) + }, + [theme.breakpoints.up('md')]: { + margin: theme.spacing(15, 5, 8, 5) + } } })); const Page: React.FC = () => { const { page } = useNavigate(); const classes = useStyles(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); return ( <SnackbarProvider maxSnack={3} anchorOrigin={{ - vertical: 'bottom', + vertical: isMobile ? 'top' : 'bottom', horizontal: 'right' }} > |