Refactor (#7)

* update JS script

* added comments to server

* updated dashboard layout

* Refactor index for a better template design

* Added a better design for the footer

* refactor the header file for better setting randering

* large refactor and update for the styling of the template

* Added source code link

* Updated demo screenshot images

Author: chrisdedman

assets/dashboard.png

@@ -5,17 +5,24 @@ function settings() {
 }
 
 // Close the dropdown menu if the user clicks outside of it
-window.onclick = function(event) {
-  if (!event.target.matches('.dropbtn')) {
-    var dropdowns = document.getElementsByClassName("dropdown-content");
-    for (var i = 0; i < dropdowns.length; i++) {
-      var openDropdown = dropdowns[i];
-      if (openDropdown.classList.contains('show')) {
-        openDropdown.classList.remove('show');
-      }
+document.addEventListener('DOMContentLoaded', () => {
+  const btn = document.querySelector('.dropdown .dropbtn');
+  const menu = document.getElementById('setting');
+  if (!btn || !menu) return;
+
+  btn.addEventListener('click', () => {
+    const expanded = btn.getAttribute('aria-expanded') === 'true';
+    btn.setAttribute('aria-expanded', String(!expanded));
+    menu.hidden = expanded;
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!menu.hidden && !e.target.closest('.dropdown')) {
+      btn.setAttribute('aria-expanded', 'false');
+      menu.hidden = true;
     }
-  }
-}
+  });
+});
 
 /* 
   setmenu() function is used to set menu items dynamically
@@ -114,4 +121,4 @@ function validatePassword() {
   } else {
     passwordMatchCheck.textContent = '✗';
   }
-}
+}