user menu

1 files changed, 44 insertions, 1 deletions

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>