blob: a208e70e919d92d82a6954a7f8e214a3ce5a6e18 (
plain) (
blame)
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
|
import styles from 'styles/Main.module.scss'
import React, {useState} from 'react'
import Link from 'next/link'
import useUser from 'lib/useUser'
import fetchJson from 'lib/fetchJson'
import {toggleMin} from 'helpers/windowActions'
import {useRouter} from 'next/router'
const Header = ({apps, setApps}) => {
const [userMenu, setUserMenu] = useState(false);
const {user, mutateUser} = useUser()
const router = useRouter()
const handleLogout = async (e) => {
e.preventDefault()
mutateUser(
await fetchJson('/api/logout', {method: 'POST'}),
false
)
router.push('/login')
}
return (
<header className={styles.header}>
<nav>
<ul>
{
apps && apps.map(app => (
<li
key={app.name}
style={app.min ? {fontWeight: 600} : {}}
onClick={() => toggleMin(app.name, apps, setApps)}
>
<span>{app.name}</span>
</li>
))
}
</ul>
<ul>
{!user?.isLoggedIn && (
<li>
<Link href="/register">
<a>Register</a>
</Link>
</li>
)}
{!user?.isLoggedIn && (
<li>
<Link href="/login">
<a>Login</a>
</Link>
</li>
)}
{user?.isLoggedIn && (
<li>
<p
className={styles.user}
onClick={() => setUserMenu(!userMenu)}
>{user?.email}</p>
{
userMenu && (
<>
<div className={styles.headerOverlay} onClick={() => setUserMenu(false)} />
<ul className={styles.submenu}>
<li>
<span onClick={() => {}}>
Settings
</span>
</li>
<li>
<a href="/api/logout" onClick={handleLogout}>
Logout
</a>
</li>
</ul>
</>
)
}
</li>
)}
</ul>
</nav>
</header>
)
}
export default Header
|
