<!--Menu toggle-->
<span id="menuLink" class="menu-link" tabindex="0">
	<!--Hamburger icon-->
	<span></span>
</span>

<!--Menu-->
<div id="menu">
	<div class="pure-menu">
		<a href="/" class="pure-menu-heading">{{siteTitle}}</a>

		<ul class="pure-menu-list">
			{{#each menuLinks}}
			<li class="pure-menu-item">
				<a href="{{linkTarget}}" class="pure-menu-link">{{linkTitle}}</a>
			</li>
			{{/each}}
		</ul>
	</div>

	{{#if editable}}
	<style>
		.edit-div {
			position: absolute;
			bottom: 0;
			width: 100%;
		}
		.edit-link {
			background-color: #ffc10d;
			color: #000000 !important;
			border: 5px solid #000000 !important;
			border-radius: 5px;
			font-weight: bold;
		}
		.edit-link:hover,
		.edit-link:focus,
		.edit-link:active {
			text-decoration: underline;
			color: #ffffff !important;
		}
		.edit-link span {
			display: inline-block;
			transform: rotate(90deg);
		}
	</style>
	<div class="pure-menu edit-div">
		<li class="pure-menu-item">
			<a href="/bd-admin/edit/{{editLink}}" class="pure-menu-link edit-link">
				EDIT
				<span>&#9998;</span>
			</a>
		</li>
	</div>
	{{/if}}
</div>
