diff options
Diffstat (limited to 'src/components/Header')
| -rw-r--r-- | src/components/Header/Header.tsx | 13 |
1 files changed, 10 insertions, 3 deletions
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 461a1f2..224f6b0 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import { IconButton, @@ -9,7 +9,7 @@ import { AccountCircle, Notifications, Home, - Menu, + Menu } from '@material-ui/icons'; import { makeStyles, useTheme } from '@material-ui/core/styles'; @@ -18,6 +18,7 @@ import MobileHeader from './MobileHeader'; import BottomBar from './BottomBar'; import BrowserHeader from './BrowserHeader'; import Avatar from '../Avatar/Avatar'; +import Drawer from '../Drawer/Drawer'; const useStyles = makeStyles(theme => ({ @@ -38,6 +39,7 @@ const Header: React.FC = React.memo(() => { const theme = useTheme(); const history = useHistory(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false); const handleHome = (): void => { history.push('/'); @@ -56,6 +58,10 @@ const Header: React.FC = React.memo(() => { history.push('/notifications'); }; + const handleMenu = (): void => { + setIsDrawerOpen(true); + }; + const feed = ( <IconButton onClick={handleFeed}> <Home /> @@ -69,7 +75,7 @@ const Header: React.FC = React.memo(() => { ); const menu = ( - <IconButton> + <IconButton onClick={handleMenu}> <Menu /> </IconButton> ); @@ -94,6 +100,7 @@ const Header: React.FC = React.memo(() => { <> <MobileHeader logo={logo} menu={menu} /> <BottomBar feed={feed} profile={profile} notifications={notifications} /> + <Drawer isOpen={isDrawerOpen} setIsOpen={setIsDrawerOpen} /> </> ) : ( <BrowserHeader logo={logo} profile={profile} notifications={notifications} feed={feed} /> |