diff --git a/src/main/resources/static/js/layout/accountDropdown.js b/src/main/resources/static/js/layout/accountDropdown.js new file mode 100644 index 0000000000000000000000000000000000000000..f7c5077f80078f568727d3bff16a42c80d3a7722 --- /dev/null +++ b/src/main/resources/static/js/layout/accountDropdown.js @@ -0,0 +1,18 @@ +document.addEventListener('DOMContentLoaded', function() { + const accountOptions = document.getElementById('account-options'); + const dropdownContent = document.getElementsByClassName('dropdown-content'); + + accountOptions.addEventListener('click', function (e) { + [...dropdownContent].forEach(dropdown => { + dropdown.style.display = dropdown.style.display === + 'block' ? 'none' : 'block' + }); + }); + + //hide dropdown when user clicks outside of element + document.addEventListener('click', function(e) { + if (!accountOptions.contains(e.target)) { + [...dropdownContent].style.display = 'none'; + } + }); +}); \ No newline at end of file diff --git a/src/main/resources/static/js/layout/layout.js b/src/main/resources/static/js/layout/layout.js deleted file mode 100644 index b6061aa1a6d1d8a174b12e20616ae394a0aa9405..0000000000000000000000000000000000000000 --- a/src/main/resources/static/js/layout/layout.js +++ /dev/null @@ -1,23 +0,0 @@ -document.addEventListener('DOMContentLoaded', function() { - const accountOptions = document.getElementsByClassName('account-options'); - const dropdownContent = document.getElementsByClassName('dropdown-content'); - - accountOptions.addEventListener('click', function (e) { - if (window.innerWidth <= 768) { - e.preventDefault(); - dropdownContent.style.display = dropdownContent.style.display === - 'block' ? 'none' : 'block'; - } - }); - document.addEventListener('click', function(e) { - if (!accountOptions.contains(e.target)) { - dropdownContent.style.display = 'none'; - } - }); - window.addEventListener('resize', function() { - if (window.innerWidth > 768) { - dropdownContent.style.display = ''; - } - }); - -}); \ No newline at end of file diff --git a/src/main/resources/templates/layout/layout.html b/src/main/resources/templates/layout/layout.html index 13cb3fd4f46c8b2671c6962cc44346f341528ea8..b71dc56bc155e03070b64f67e7a437b011235973 100644 --- a/src/main/resources/templates/layout/layout.html +++ b/src/main/resources/templates/layout/layout.html @@ -62,7 +62,7 @@ </div> <!-- Profile --> - <div class="account-options" id="dropdown"> + <div id="account-options"> <div sec:authorize="isAnonymous()"> <img src="/assets/navbarImages/profile.png" class="navIcons anonymous"> <span class="navText">Sign in</span> @@ -123,6 +123,6 @@ </div> </footer> <script th:replace="~{comments/commentFragment::commentScript}"></script> - <script src="/js/layout/layout.js"></script> + <script src="/js/layout/accountDropdown.js"></script> </body> </html> \ No newline at end of file