forked from nullstack/nullstack.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHeader.njs
More file actions
58 lines (51 loc) · 1.81 KB
/
Header.njs
File metadata and controls
58 lines (51 loc) · 1.81 KB
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 Logo from 'nullstack/logo';
import Bars from 'poisonicon/bars/stroke';
import Ex from 'poisonicon/ex/stroke';
import Translatable from './Translatable';
class Header extends Translatable {
expanded = false;
renderLink({title, href, target, onclick}) {
return (
<element tag={href ? 'a' : 'button'}
href={href}
target={target}
onclick={onclick || (target ? false : {expanded: false})}
rel={target ? 'noopener' : false}
class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"
> {title} </element>
)
}
toggleMode(context) {
const nextOppositeMode = context.mode;
context.mode = context.oppositeMode;
context.oppositeMode = nextOppositeMode;
window.localStorage.setItem('mode', context.mode);
}
render({mode, oppositeMode}) {
if(!this.i18n) return false;
return (
<header class="x12 pftl bgm1 bs2">
<div class="x xsb yy p5y">
<div class="sm-x12 sm-xsb sm-p4x yy">
<a {...this.i18n.home}>
<Logo height="30" light={mode === 'dark'} />
</a>
<span onclick={{expanded: !this.expanded}} class="yy md+off">
<element tag={this.expanded ? Ex : Bars} height={20} class="cm3" />
</span>
</div>
<nav class={`menu-links yy sm-p4 ${!this.expanded && 'sm-off'}`}>
{this.i18n.links.map((link) => <Link {...link} />)}
<Link title={this.i18n.mode[oppositeMode]} onclick={this.toggleMode} />
</nav>
<div class={`sm-x12 sm-p4x ${!this.expanded && 'sm-off'}`}>
<a href={this.i18n.action.href} onclick={{expanded: false}} class="xx sm-x12 bci1 bgi1 bgm1:h cm1 ci1:h p4x p2y">
{this.i18n.action.title}
</a>
</div>
</div>
</header>
)
}
}
export default Header;