From 4bcabf751b8292fee696db5e027f38b1838b0be6 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 11 Aug 2020 21:38:47 +0300 Subject: feat: add mobile header --- src/components/Header/Header.tsx | 75 ++++++++++++++++++++++------------------ 1 file changed, 42 insertions(+), 33 deletions(-) (limited to 'src/components/Header/Header.tsx') diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index c3a678c..b314d79 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -8,20 +8,22 @@ import { Avatar, useMediaQuery } from '@material-ui/core'; +import { + AccountCircle, + Notifications, + Home, + Menu, + Search, +} from '@material-ui/icons'; import { makeStyles, useTheme } from '@material-ui/core/styles'; -import AccountCircle from '@material-ui/icons/AccountCircle'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -import HomeIcon from '@material-ui/icons/Home'; import { useAuth } from '../../hooks/useAuth'; import SearchBar from './SearchBar'; +import MobileHeader from './MobileHeader'; +import BottomBar from './BottomBar'; const useStyles = makeStyles(theme => ({ - mobile: { - top: 'auto', - bottom: 0 - }, toolbar: { display: 'flex', justifyContent: 'space-around' @@ -41,7 +43,6 @@ const useStyles = makeStyles(theme => ({ } })); - const Header: React.FC = React.memo(() => { const classes = useStyles(); const { user } = useAuth(); @@ -66,19 +67,37 @@ const Header: React.FC = React.memo(() => { history.push('/notifications'); }; - const FeedButton = ( + const feed = ( - + + + ); + + const notifications = ( + + + + ); + + const menu = ( + + ); - const NotificationsButton = ( + const search = ( - + ); - const ProfileButton = ( + const logo = ( + + Which + + ); + + const profile= ( { user?.avatarUrl @@ -91,33 +110,23 @@ const Header: React.FC = React.memo(() => { const BrowserVersion = ( - - Which - + {logo}
- {FeedButton} - {NotificationsButton} - {ProfileButton} + {feed} + {notifications} + {profile}
); - const MobileVersion = ( - - - - W - - {FeedButton} - {NotificationsButton} - {ProfileButton} - - - ); - - return isMobile ? MobileVersion : BrowserVersion; + return isMobile ? ( + <> + + + + ) : BrowserVersion; }); export default Header; -- cgit v1.2.3