/
Header.tsx
49 lines (43 loc) · 1.41 KB
/
Header.tsx
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
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import ILink from '../model/ILink';
require ('./HeaderFooter.scss');
export interface IHeaderProps {
links: ILink[];
}
export class Header extends React.Component<IHeaderProps, {}> {
constructor(props: IHeaderProps) {
super(props);
}
public render(): JSX.Element {
return (
<div className="topNav">
{/* Render hamburger menu */}
<label htmlFor="show-menu" className="show-menu">
<div className="show-menu"><div className="hamburger">
<div></div><div></div><div></div>
</div></div>
</label>
<input type="checkbox" id="show-menu" role="button" />
{/* Render the main menu */}
<ul>
{this.props.links.map(l => (
<li>
<a href={l.url}>{l.name}</a>
{/* Render a child menu */}
<ul className="hidden">
{l.children ? l.children.map(m => (
<li>
<a href={m.url}>{m.name}</a>
</li>
)) : null}
</ul>
{/* End child menu */}
</li>
))}
</ul>
{/* End main menu */}
</div>
);
}
}