changeset 9:88f425d261b3

add menu
author Franklin Schmidt <fschmidt@gmail.com>
date Wed, 25 Oct 2023 18:38:07 -0600
parents 9534dd5eda89
children ae9ebeb1c246
files src/lib/Shared.luan src/site.css src/site.js
diffstat 3 files changed, 51 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/src/lib/Shared.luan	Tue Oct 24 19:31:33 2023 -0600
+++ b/src/lib/Shared.luan	Wed Oct 25 18:38:07 2023 -0600
@@ -30,7 +30,13 @@
 <%	if get_user() == nil then %>
 			<a href="login1.red">login</a>
 <%	else %>
-			<a href="javascript:logout()"><script>document.write(`<img src="https://cdn.discordapp.com/avatars/${localStorage.user_id}/${localStorage.user_avatar}.png">`)</script></a>
+			<span right pulldown>
+				<script>document.write(`<img src="https://cdn.discordapp.com/avatars/${localStorage.user_id}/${localStorage.user_avatar}.png" onclick="clickMenu(this)">`)</script>
+				<div pulldown_menu>
+					<span username><script>document.write(localStorage.user_name)</script></span>
+					<a href="javascript:logout()">Log out</a>
+				</div>
+			</span>
 <%	end %>
 		</div>
 		<hr>
--- a/src/site.css	Tue Oct 24 19:31:33 2023 -0600
+++ b/src/site.css	Wed Oct 25 18:38:07 2023 -0600
@@ -13,6 +13,23 @@
 	text-decoration: underline;
 }
 
+[onclick] {
+	cursor: pointer;
+}
+
+[pulldown] {
+	position: relative;
+}
+[pulldown_menu] {
+	display: none;
+	z-index: 20;
+	position: absolute;
+	top: 40px;
+	border: 1px solid #DDDDDD;
+	text-align: left;
+	background-color: #ffffff;
+}
+
 div[header] {
 	display: flex;
 	justify-content: space-between;
@@ -25,3 +42,8 @@
 	object-fit: cover;
 	border-radius: 50%;
 }
+
+div[header] [pulldown_menu] {
+	right: 0;
+	margin-top: 20px;
+}
--- a/src/site.js	Tue Oct 24 19:31:33 2023 -0600
+++ b/src/site.js	Wed Oct 25 18:38:07 2023 -0600
@@ -43,6 +43,28 @@
 	ajax( '/error_log.js', 'err='+encodeURIComponent(err) );
 };
 
+let currentPulldown = null;
+let newPulldown = null;
+
+function clickMenu(clicked,display) {
+	//console.log("clickMenu");
+	let pulldown = clicked.parentNode.querySelector('[pulldown_menu]');
+	if( pulldown !== currentPulldown ) {
+		pulldown.style.display = display || "block";
+		newPulldown = pulldown;
+		window.onclick = function() {
+			if( currentPulldown ) {
+				currentPulldown.style.display = "none";
+				if( !newPulldown )
+					window.onclick = null;
+			}
+			currentPulldown = newPulldown;
+			newPulldown = null;
+		};
+		pulldown.scrollIntoViewIfNeeded(false);
+	}
+}
+
 function logout() {
 	document.cookie = 'user=; Max-Age=0; path=/;';
 	location = '/';