Adds right profile dropdown menu

app/templates/page-menu.php

@@ -35,8 +35,24 @@
 
             <ul class="menu-right">
 <?php if ( isset($_SESSION['username']) ) { ?>
-                <li><a href="<?= htmlspecialchars($app_root) ?>?page=profile"><?= htmlspecialchars($currentUser) ?></a></li>
+                <li class="dropdown">
-                <li><a href="<?= htmlspecialchars($app_root) ?>?page=logout">logout</a></li>
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+                        <i class="fas fa-user"></i>
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right">
+                        <h6 class="dropdown-header"><?= htmlspecialchars($currentUser) ?></h6>
+                        <a class="dropdown-item" href="<?= htmlspecialchars($app_root) ?>?page=profile">
+                            <i class="fas fa-id-card"></i>Profile details
+                        </a>
+                        <a class="dropdown-item" href="<?= htmlspecialchars($app_root) ?>?page=credentials">
+                            <i class="fas fa-shield-alt"></i>Login credentials
+                        </a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="<?= htmlspecialchars($app_root) ?>?page=logout">
+                            <i class="fas fa-sign-out-alt"></i>Logout
+                        </a>
+                    </div>
+                </li>
 <?php } else { ?>
                 <li><a href="<?= htmlspecialchars($app_root) ?>?page=login">login</a></li>
                 <li><a href="<?= htmlspecialchars($app_root) ?>?page=register">register</a></li>

public_html/static/css/main.css

@@ -44,6 +44,57 @@ html, body {
 .menu-left li a:hover, .menu-right li a:hover {
     background-color: #111;
 }
+/* Dropdown menu styles */
+.dropdown-menu {
+    background-color: #fff;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0,0,0,.175);
+    margin-top: 0;
+    min-width: 200px;
+}
+
+.dropdown-menu .dropdown-item {
+    color: #333;
+    padding: 8px 16px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+}
+
+.dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa;
+    color: #16181b;
+    text-decoration: none;
+}
+
+.dropdown-menu .dropdown-item i {
+    width: 16px;
+    text-align: center;
+    color: #666;
+}
+
+.dropdown-menu .dropdown-item:hover i {
+    color: #16181b;
+}
+
+.dropdown-divider {
+    margin: 4px 0;
+    border-top: 1px solid #e9ecef;
+}
+
+.dropdown-toggle::after {
+    display: inline-block;
+    margin-left: 8px;
+    vertical-align: middle;
+    content: "";
+    border-top: 4px solid;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+}
+
 /* /menu */
 
 .error {