diff --git a/GameBox/Views/Shared/_LoginPartial.cshtml b/GameBox/Views/Shared/_LoginPartial.cshtml
index d0c97b8..48eaf5e 100644
--- a/GameBox/Views/Shared/_LoginPartial.cshtml
+++ b/GameBox/Views/Shared/_LoginPartial.cshtml
@@ -8,15 +8,21 @@
@if (SignInManager.IsSignedIn(User))
{
- + Add Game
+ + Add Game
-
- Hello @UserManager.GetUserName(User)!
-
-
-
+
}
else
diff --git a/GameBox/wwwroot/css/site.css b/GameBox/wwwroot/css/site.css
index 9e4754f..abab8a1 100644
--- a/GameBox/wwwroot/css/site.css
+++ b/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 */
diff --git a/GameBox/wwwroot/js/site.js b/GameBox/wwwroot/js/site.js
index 0937657..1bf95ba 100644
--- a/GameBox/wwwroot/js/site.js
+++ b/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');
+ }
+ });
+ }
+});