switch logout links to a single universal form

assets/dk.css

@@ -105,6 +105,7 @@ a {
 	color: #663300;
 	text-decoration: none;
 	font-weight: bold;
+	cursor: pointer;
 
 	&:hover {
 		color: #330000;
@@ -580,4 +581,8 @@ div.bottom-reply {
 
 hr {
 	margin: 1rem 0;
+}
+
+.hidden {
+	display: none;
 }

templates/layout.html

@@ -56,7 +56,16 @@
 	{yield "scripts"}
 
 	<script>
-		document.addEventListener('DOMContentLoaded', addSelectArrows)
+		document.addEventListener('DOMContentLoaded', () => {
+			addSelectArrows()
+
+			document.querySelectorAll('.logout-link').forEach(link => {
+				link.addEventListener('click', (e) => {
+					e.preventDefault()
+					document.getElementById('logout-form').submit()
+				})
+			})
+		})
 	</script>
 </body>
 </html>

templates/leftside.html

@@ -49,10 +49,14 @@
 	<a href="/">Home</a>
 	<a href="/forum">Forum</a>
 	<a href="/change-password">Change Password</a>
-	<a href="#">Log Out</a>
+	<a class="logout-link">Log Out</a>
 	<a href="/help">Help</a>
 </section>
 
+<form id="logout-form" class="hidden" action="/logout" method="post">
+	{csrf}
+</form>
+
 <script>
 document.addEventListener('DOMContentLoaded', () => {
 	const teleportModal = new ConfirmModal({

templates/topnav.html

@@ -1,8 +1,5 @@
 {if authenticated}
-<form action="/logout" method="post" class="logout">
+<a class="logout-link"><img src="/assets/images/button_logout.gif" alt="Log Out" title="Log Out"></a>
-	{csrf}
-	<button class="img-button" type="submit"><img src="/assets/images/button_logout.gif" alt="Log Out" title="Log Out"></button>
-</form>
 <a href="/help"><img src="/assets/images/button_help.gif" alt="Help" title="Help"></a>
 {else}
 <a href="/login"><img src="/assets/images/button_login.gif" alt="Log In" title="Log In"></a>