From 3cd9081939d2f22221065018cb501441528257fc Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 3 Jul 2020 22:09:22 +0300
Subject: feat: adapt header for mobile devices
---
src/components/Header/Header.tsx | 78 ++++++++++++++++++++++++++++------------
1 file changed, 56 insertions(+), 22 deletions(-)
(limited to 'src/components/Header/Header.tsx')
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 294c250..c6c1608 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -11,25 +11,33 @@ import NotificationsIcon from '@material-ui/icons/Notifications';
import HomeIcon from '@material-ui/icons/Home';
import { useAuth } from '../../hooks/useAuth';
import { useNavigate } from '../../hooks/useNavigate';
+import { isMobile } from 'react-device-detect';
import SearchBar from './SearchBar';
-const useStyles = makeStyles({
- root: {
+const useStyles = makeStyles(theme => ({
+ mobile: {
+ top: 'auto',
+ bottom: 0
+ },
+ toolbar: {
display: 'flex',
- justifyContent: 'space-around',
+ justifyContent: 'space-around'
+ },
+ browserToolbar: {
width: '60%',
margin: 'auto'
},
logo: {
fontWeight: 'bold',
- cursor: 'pointer'
+ cursor: 'pointer',
+ color: 'white'
},
avatar: {
- width: 24,
- height: 24
+ width: theme.spacing(3),
+ height: theme.spacing(3)
}
-});
+}));
const Header: React.FC = () => {
const classes = useStyles();
@@ -53,31 +61,57 @@ const Header: React.FC = () => {
navigate('notifications');
};
- return (
+ const FeedButton = (
+ <IconButton onClick={handleFeed}>
+ <HomeIcon />
+ </IconButton>
+ );
+
+ const NotificationsButton = (
+ <IconButton onClick={handleNotifications}>
+ <NotificationsIcon />
+ </IconButton>
+ );
+
+ const ProfileButton = (
+ <IconButton onClick={handleProfile}>
+ { user?.avatarUrl
+ ? <Avatar className={classes.avatar} src={user?.avatarUrl} />
+ : <AccountCircle />
+ }
+ </IconButton>
+ );
+
+ const BrowserVersion = (
<AppBar position="fixed">
- <Toolbar className={classes.root}>
+ <Toolbar className={`${classes.toolbar} ${classes.browserToolbar}`}>
<Typography variant="h5" className={classes.logo} onClick={handleHome}>
Which
</Typography>
<SearchBar />
<div>
- <IconButton onClick={handleFeed}>
- <HomeIcon />
- </IconButton>
- <IconButton onClick={handleNotifications}>
- <NotificationsIcon />
- </IconButton>
- <IconButton onClick={handleProfile}>
- {
- user?.avatarUrl
- ? <Avatar className={classes.avatar} src={user?.avatarUrl} />
- : <AccountCircle />
- }
- </IconButton>
+ {FeedButton}
+ {NotificationsButton}
+ {ProfileButton}
</div>
</Toolbar>
</AppBar>
);
+
+ const MobileVersion = (
+ <AppBar position="fixed" className={classes.mobile}>
+ <Toolbar className={classes.toolbar}>
+ <IconButton onClick={handleHome}>
+ <Typography className={classes.logo}>W</Typography>
+ </IconButton>
+ {FeedButton}
+ {NotificationsButton}
+ {ProfileButton}
+ </Toolbar>
+ </AppBar>
+ );
+
+ return isMobile ? MobileVersion : BrowserVersion;
};
export default Header;
--
cgit v1.2.3