{{define "page_menu"}}
<button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
<div id="page_navigation" class="page_navigation">
	<a href="/">Home</a>
	<hr />
	{{if .Authenticated}}<a href="/user">{{.Username}}</a>
	<a href="/user/filemanager?files">My Files</a>
	<a href="/user/filemanager?lists">My Lists</a>
	<a href="/logout">Log out</a>
	{{else}}
	<a href="/login">Login</a>
	<a href="/register">Register</a>
	<a href="/history">Upload History</a>
	{{end}}
	<hr />
	<a href="/about">About</a>
	<!--<a href="/technology">Technology</a>-->
	<a href="/api">API</a>
	<a href="/appearance">Appearance</a>
</div>
<script>
	function toggleMenu() {
		var nav = document.getElementById("page_navigation");
		var body = document.getElementById("page_body");
		if (nav.offsetLeft === 0) {
			// Menu is visible

			nav.style.left = -nav.offsetWidth + "px";
			body.style.left = "0";
		} else {
			// Menu is hidden

			nav.style.left = "0";
			body.style.left = nav.offsetWidth + "px";
		}
	}
</script>
{{end}}

{{define "page_top"}}
{{template "page_menu" .}}
<div id="page_body" class="page_body">
{{end}}

{{define "page_bottom"}}
	<div class="highlight_dark">
		Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
		Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
		Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
		Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
		<br/>
		<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
			page rendered by {{.Hostname}}
		</span>
	</div>
</div><!-- end page_body -->
{{end}}