import m from 'mithril';

require("./layout.css");

export default class Layout {
	private menuActive = false;
	private drawCount = 0;
	
	view(vnode: m.Vnode) {
		this.drawCount = this.drawCount + 1;
		
		return [
			<nav class="navbar" role="navigation" aria-label="main navigation">
				<div class="navbar-brand">
					<a class="navbar-item" href="#!/dashboard" onclick={() => { this.menuActive = false; return true; }}>Tableau de bord</a>
					
					<a role="button" class={'navbar-burger ' + (this.menuActive ? 'is-active' : '')} onclick={() => this.menuActive = !this.menuActive} aria-label="menu" aria-expanded="false" data-target="mainMenu">
						<span aria-hidden="true"></span>
						<span aria-hidden="true"></span>
						<span aria-hidden="true"></span>
					</a>
					
					<span>{this.drawCount}</span>
				</div>
			
				<div id="mainMenu" class={'navbar-menu ' + (this.menuActive ? 'is-active' : '')}>
					<div class="navbar-start" onclick={() => { this.menuActive = false; return true; }}>
						<a class="navbar-item" href='#!/raw'>Données brutes</a>
					</div>
				</div>
			</nav>,
			
			<section>
				{vnode.children}
			</section>
		];
	}
}
