Issue#44 update user greeting

GameBox/Views/Shared/_LoginPartial.cshtml

@@ -8,15 +8,21 @@
 @if (SignInManager.IsSignedIn(User))
 {
     <li class="nav-item">
-        <a id="add-game" class="nav-link text-light" asp-controller="GameModels" asp-action="Create" title="Add A Game">+ Add Game</a>
+         <a id="add-game" class="nav-link text-light nav-btn-borders" asp-controller="GameModels" asp-action="Create" title="Add A Game">+ Add Game</a>
     </li>
-    <li class="nav-item">
-        <a id="manage" class="nav-link text-light" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>
-    </li>
-    <li class="nav-item">
-        <form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
-            <button id="logout" type="submit" class="nav-link btn btn-link text-light border-0">Logout</button>
-        </form>
+    <li class="nav-item user-menu">
+        <div class="nav-link text-light nav-btn-borders">
+            <span class="user-greeting">Hello @UserManager.GetUserName(User)!</span>
+            <div id="user-dropdown">
+			    <a id="manage" class="nav-link text-light" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Settings</a>
+
+                <div class="nav-link text-light" onclick="alert(`This feature is still in the works. Please check back later.`)">My Games</div>
+
+                <form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
+                    <button id="logout" type="submit" class="nav-link btn btn-link text-light border-0">Logout</button>
+                </form>
+            </div>
+        </div>
     </li>
 }
 else

GameBox/wwwroot/css/site.css

@@ -19,6 +19,59 @@ footer {
     min-height: calc(100vh - 135px);
 }
 
+/* User dropdown menu */
+.user-menu {
+    position: relative;
+}
+
+.user-greeting {
+    cursor: pointer;
+}
+
+#user-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background: rgba(50, 0, 120, 0.95);
+    border: 1px solid rgba(255, 255, 0, 0.3);
+    border-radius: 5px;
+    padding: 0.5rem;
+    min-width: 150px;
+    z-index: 1000;
+}
+
+#user-dropdown.show {
+    display: block;
+}
+
+#user-dropdown a,
+#user-dropdown button,
+#user-dropdown div{
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 0.5rem;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+#user-dropdown a:hover,
+#user-dropdown button:hover,
+#user-dropdown div:hover{
+    background: rgba(255, 100, 100, 0.5);
+    border-radius: 3px;
+}
+
+.nav-btn-borders {
+    border: 3px rgba(60, 60, 60, 0.3) solid;
+    border-radius: 15px;
+    margin-left: 5px;
+}
+.nav-btn-borders:hover {
+    background: rgba(15, 15, 15, 0.3);
+}
+
 /* Fix form-floating labels for Identity pages */
 .form-floating > label {
     color: #6c757d; /* Dark gray */

GameBox/wwwroot/js/site.js

@@ -2,3 +2,24 @@
 // for details on configuring this project to bundle and minify static web assets.
 
 // Write your JavaScript code.
+
+// User dropdown toggle
+document.addEventListener('DOMContentLoaded', function () {
+    const userGreeting = document.querySelector('.user-greeting');
+    const userDropdown = document.getElementById('user-dropdown');
+
+    if (userGreeting && userDropdown) {
+        // Toggle dropdown on click
+        userGreeting.addEventListener('click', function (e) {
+            e.stopPropagation();
+            userDropdown.classList.toggle('show');
+        });
+
+        // Close dropdown when clicking outside
+        document.addEventListener('click', function (e) {
+            if (!userDropdown.contains(e.target) && !userGreeting.contains(e.target)) {
+                userDropdown.classList.remove('show');
+            }
+        });
+    }
+});