user menu

5 files changed, 100 insertions, 7 deletions

diff --git a/src/public/css/common.css b/src/public/css/common.css
index 3e6b6b6..de9dedb 100644
--- a/src/public/css/common.css
+++ b/src/public/css/common.css
@@ -446,8 +446,8 @@ input.btn:focus {
 
 @keyframes slideIn {
 	0% {
-		animation-timing-function: ease-out;
-		transform: translate(0, -50%);
+		animation-timing-function: ease-in;
+		transform: translate(0, -20%);
 	}
 }
 
@@ -621,3 +621,27 @@ input[type=radio] {
 .grow {
 	flex-grow: 1;
 }
+
+#user-menu {
+	position: fixed;
+	right: .5rem;
+	top: 4rem;
+	min-width: fit-content;
+	animation: fadeIn .1s, slideIn .1s linear;
+}
+
+#user-menu .btn {
+	width: 100%;
+}
+
+#user-menu-header {
+	align-items: center;
+}
+
+#user-menu-header .pfp {
+	margin-right: 1rem;
+}
+
+.hidden {
+	display: none;
+}
diff --git a/src/web/_views/header.php b/src/web/_views/header.php
index f1aef01..71607d5 100644
--- a/src/web/_views/header.php
+++ b/src/web/_views/header.php
@@ -46,7 +46,39 @@
 					<i class="mi mi-lg">menu</i>
 				</button>
 			<?php if($self): ?>
-				<?=pfp($self)?>
+				<script>
+					var userMenu = null;
+
+					var toggleUserMenu = () => {
+						userMenu.toggleClass('hidden');
+					}
+				</script>
+				<?=pfp($self, FALSE, 'toggleUserMenu()')?>
+				<div class="card col hidden" id="user-menu">
+					<span class="row" id="user-menu-header">
+						<?=pfp($self, FALSE)?>
+						<span class="col">
+							<strong><?=$this->format_model->name($self)?></strong>
+							<span class="dim"><?=$self['username']?></span>
+						</span>
+					</span>
+					<hr>
+					<?=ilang(
+						'action_profile',
+						class: 'btn',
+						href: '/profile?id=' . $self['id']
+					)?>
+					<?=ilang(
+						'action_settings',
+						class: 'btn',
+						href: '/settings'
+					)?>
+					<?=ilang(
+						'action_logout',
+						class: 'btn',
+						href: '/auth/logout'
+					)?>
+				</div>
 			<?php else: ?>
 				<?=ilang('action_login', class: 'btn', href: '/auth/login')?>
 			<?php endif; ?>
@@ -58,3 +90,14 @@
 				});
 			</script>
 		</header>
+		<script>
+			userMenu = $('#user-menu');
+			var nav = $('.nav');
+			document.onclick = function(event) {
+				console.log(event.target, nav[0]);
+				let outside = !(nav[0].contains(event.target));
+				if (outside) {
+					userMenu.addClass('hidden');
+				}
+			};
+		</script>
diff --git a/src/web/core/_controller.php b/src/web/core/_controller.php
index 4a788d3..3502ea5 100644
--- a/src/web/core/_controller.php
+++ b/src/web/core/_controller.php
@@ -10,6 +10,9 @@ abstract class Controller {
 	// the database
 	public $db;
 
+	// the format model
+	protected $format_model;
+
 	/**
 	 * Creates a constructor
 	 * @param Loader $load - the website loaded object
@@ -26,6 +29,8 @@ abstract class Controller {
 		if ($app) {
 			$this->load->app_lang($lang, $app);
 		}
+
+		$this->format_model = $this->load->model('format');
 	}
 
 	public function index() {}
diff --git a/src/web/helper/image.php b/src/web/helper/image.php
index ac2f808..8815a6c 100644
--- a/src/web/helper/image.php
+++ b/src/web/helper/image.php
@@ -1,6 +1,6 @@
 <?php /* Copyright (c) 2024 Freya Murphy */
 
-function image($src, $class = NULL, $link = NULL): string {
+function image($src, $class = NULL, $link = NULL, $click = NULL): string {
 	if ($class) {
 		$class = 'image-loading ' . $class;
 	} else {
@@ -11,12 +11,16 @@ function image($src, $class = NULL, $link = NULL): string {
 
 	if ($link) {
 		$content .= '<a class="' . $class . '" href="' . $link . '">';
+	} else if ($click) {
+		$content .= '<button class="' . $class . '" onclick="' . $click . '">';
 	} else {
 		$content .= '<span class="' . $class . '">';
 	}
 	$content .= '<img src="' . $src . '" onerror="onImgError(this)" onload="onImgLoad(this)"/>';
 	if ($link) {
 		$content .= '</a>';
+	} else if ($click) {
+		$content .= '</button>';
 	} else {
 		$content .= '</span>';
 	}
@@ -26,8 +30,11 @@ function image($src, $class = NULL, $link = NULL): string {
 
 function pfp(
 	$user,
-	$embedLink = TRUE,
+	$link = TRUE,
+	$click = NULL
 ): string {
-	$link = $embedLink ? '/profile?id=' . $user['id'] : NULL;
-	return image('/api/rpc/profile_avatar?user_id=' . $user['id'], 'pfp', link: $link);
+	if ($link === TRUE) {
+		$link = '/profile?id=' . $user['id'];
+	}
+	return image('/api/rpc/profile_avatar?user_id=' . $user['id'], 'pfp', link: $link, click: $click);
 }
diff --git a/src/web/lang/en_US/common_lang.php b/src/web/lang/en_US/common_lang.php
index eb60888..e8a88e4 100644
--- a/src/web/lang/en_US/common_lang.php
+++ b/src/web/lang/en_US/common_lang.php
@@ -44,6 +44,20 @@ $lang['new_post_modal_title'] = 'Author New Post';
 $lang['action_new_post_text'] = 'What\'s on your mind, %s';
 $lang['action_new_post_tip'] = 'Author a new post.';
 
+// User Menu
+$lang['action_logout_text'] = 'Logout';
+$lang['action_logout_tip'] = 'Logout';
+$lang['action_logout_icon'] = 'mi mi-sm';
+$lang['action_logout_content'] = 'logout';
+$lang['action_settings_text'] = 'Settings';
+$lang['action_settings_tip'] = 'Edit account settings';
+$lang['action_settings_icon'] = 'mi mi-sm';
+$lang['action_settings_content'] = 'settings';
+$lang['action_profile_text'] = 'Profile';
+$lang['action_profile_tip'] = 'View your profile';
+$lang['action_profile_icon'] = 'mi mi-sm';
+$lang['action_profile_content'] = 'account_circle';
+
 // Words
 $lang['now'] = 'Now';
 $lang['likes'] = 'Likes';