forked from neptune-mutual-blue/nft-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Header.jsx
58 lines (48 loc) · 1.78 KB
/
Header.jsx
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
import { useContext } from 'react'
import HamburgerButton from '@/components/Header/HamburgerButton'
import Navigation from '@/components/Header/Navigation'
import SubMenu from '@/components/Header/SubMenu'
import { ThemeSelector } from '@/components/Header/ThemeSelector'
import VideoModal from '@/components/VideoModal'
import { AppConstants } from '@/constants/AppConstants'
import { ThemeContext } from '@/contexts/ThemeContext'
import { data } from '@/utils/nav'
import NpmDarkLogo from '../../elements/npm/npm-logo-dark-mode.svg'
import NpmLightLogo from '../../elements/npm/npm-logo-light-mode.svg'
const Header = ({ headerStyle, videos }) => {
const updatedVideos = videos && videos.map((video) => ({
...video,
thumbnail: { ...video.thumbnail, url: '' }
}))
const { dark } = useContext(ThemeContext)
return (
<>
<VideoModal />
<header data-style={headerStyle}>
<div className='inner container'>
<div className='logo and rest'>
<a className='logo' href={AppConstants.neptunemutualOrigin + '/?theme=' + (dark ? 'dark' : 'light')}>
<span className='sr-only'>Neptune Mutual</span>
<span className='light only'><NpmLightLogo /></span>
<span className='dark only'><NpmDarkLogo /></span>
</a>
<div
className='nav with language and theme'
data-open='false'
id='MobileMenu'
>
<Navigation data={data} />
<div className='language and theme only'>
<ThemeSelector />
</div>
<SubMenu data={data} videos={updatedVideos} />
</div>
</div>
<HamburgerButton />
</div>
</header>
<hr />
</>
)
}
export default Header