{{define "page_top"}}
<div id="page_wrapper">
	<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/files">My Files</a>
		<a href="/user/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>
	<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>
		</div>
	</div><!-- end page_body -->
</div><!-- end page_wrapper -->
<script>
var nav = document.getElementById("page_navigation");
var body = document.getElementById("page_body");

function toggleMenu() {
	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}}