Fix javascript functionality

src/main/resources/static/js/layout/layout.js → src/main/resources/static/js/layout/accountDropdown.js

 document.addEventListener('DOMContentLoaded', function() {
-    const accountOptions = document.getElementsByClassName('account-options');
+    const accountOptions = document.getElementById('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';
-        }
+            [...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';
+            [...dropdownContent].style.display = 'none';
         }
     });
-    window.addEventListener('resize', function() {
-        if (window.innerWidth > 768) {
-            dropdownContent.style.display = '';
-        }
-    });
-
 });
\ No newline at end of file

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