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)) { - - } 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'); + } + }); + } +});