1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
import React from 'react';
import {
AppBar,
Toolbar,
IconButton,
Typography,
Avatar,
useMediaQuery
} from '@material-ui/core';
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 { useNavigate } from '../../hooks/useNavigate';
import SearchBar from './SearchBar';
const useStyles = makeStyles(theme => ({
mobile: {
top: 'auto',
bottom: 0
},
toolbar: {
display: 'flex',
justifyContent: 'space-around'
},
browserToolbar: {
width: '60%',
margin: 'auto'
},
logo: {
fontWeight: 'bold',
cursor: 'pointer',
color: 'white'
},
round: {
width: theme.spacing(3),
height: theme.spacing(3)
}
}));
const Header: React.FC = () => {
const classes = useStyles();
const { user } = useAuth();
const { navigate } = useNavigate();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const handleHome = (): void => {
navigate('home');
};
const handleFeed = (): void => {
navigate('feed');
};
const handleProfile = (): void => {
if (user) navigate('profile');
else navigate('auth');
};
const handleNotifications = (): void => {
navigate('notifications');
};
const FeedButton = (
<IconButton onClick={handleFeed}>
<HomeIcon />
</IconButton>
);
const NotificationsButton = (
<IconButton onClick={handleNotifications}>
<NotificationsIcon />
</IconButton>
);
const ProfileButton = (
<IconButton onClick={handleProfile}>
{
user?.avatarUrl
? <Avatar className={classes.round} src={user?.avatarUrl} />
: <AccountCircle />
}
</IconButton>
);
const BrowserVersion = (
<AppBar position="fixed">
<Toolbar className={`${classes.toolbar} ${classes.browserToolbar}`}>
<Typography variant="h5" className={classes.logo} onClick={handleHome}>
Which
</Typography>
<SearchBar />
<div>
{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} ${classes.round}`}>W</Typography>
</IconButton>
{FeedButton}
{NotificationsButton}
{ProfileButton}
</Toolbar>
</AppBar>
);
return isMobile ? MobileVersion : BrowserVersion;
};
export default Header;
|
