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
123
124
125
126
127
128
|
import styles from 'styles/Main.module.scss'
import React, { useState } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import useUser from 'hooks/useUser'
import { focus, toggleMin, open, close } from 'helpers/windowActions'
import appList from 'configs/appList'
import useSettings from 'hooks/useSettings'
import useApps from 'hooks/useApps'
import handleLogout from 'helpers/logout'
import { faArrowUp, faTimes } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const Header = () => {
const [userMenu, setUserMenu] = useState(false)
const [showApps, setShowApps] = useState(false)
const { user, mutateUser } = useUser()
const { apps, setApps } = useApps()
const { t } = useSettings()
const router = useRouter()
const handleClick = (app, setApps) => {
if (app.min) {
toggleMin(app.name, apps, setApps)
}
focus(app.name, setApps)
}
return (
<header className={styles.header}>
<nav>
<div>
<span onClick={() => setShowApps(s => !s)} className='mobile-only'>
{apps && apps.length > 0 && apps[apps.length - 1]?.name}
{apps && apps.length > 1 ? (' (' + (apps.length) + ')') : ''}
</span>
<ul className={showApps ? styles.showMobileAppList : 'desktop-only'}>
<li className='mobile-only'>{t('open_apps')}</li>
{
apps && [...apps].sort((a, b) => a.name > b.name ? 1 : -1).map(app => {
if (!app) return null
return (
<li
key={app.name}
onClick={() => handleClick(app, setApps)}
>
<span
className={
apps.findIndex(a => a && a.name === app.name) === apps.length - 1 ? 'active' : ''
}
style={{
...app.min ? { color: '#888' } : {}
}}
>
<span>{t(app.name)}</span>
<span className='mobile-only' onClick={e => { e.stopPropagation(); toggleMin(app.name, apps, setApps) }}>
<FontAwesomeIcon icon={faArrowUp} />
</span>
<span className='mobile-only' onClick={e => { e.stopPropagation(); close(app.name, setApps) }}>
<FontAwesomeIcon icon={faTimes} />
</span>
</span>
</li>
)
})
}
<li className='mobile-only'>
<div onClick={() => setShowApps(false)} className='window__button'>{t('close')}</div>
</li>
</ul>
</div>
<ul>
{!user?.isLoggedIn && (
<li>
<Link href='/register'>
<a>{t('register')}</a>
</Link>
</li>
)}
{!user?.isLoggedIn && (
<li>
<Link href='/login'>
<a>{t('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}>
{user.isVerified && (
<li>
<span onClick={() => {
open({ appName: 'Settings', ...appList.Settings }, setApps)
setUserMenu()
}}
>
{t('Settings')}
</span>
</li>
)}
<li>
<span onClick={e => handleLogout(e, router, mutateUser)}>
{t('logout')}
</span>
</li>
</ul>
</>
)
}
</li>
)}
</ul>
</nav>
</header>
)
}
export default Header
|
