Toggle button for login page

login.html

@@ -30,6 +30,13 @@
             <a class="submit-image">Submit an image</a>
 
             <a class="logIn" title="Login-button" href="./login.html">Login</a>
+            <button class="toggle">&#9776;</button>
+
+            <div class="toggle-items">
+                <a class="about-us" href="#">About us </a>
+                <a class="contact-us" href="#"> Contact us</a>
+
+            </div>
 
         </div>
 

login.js

@@ -51,3 +51,25 @@ document.getElementById("loginForm").addEventListener("submit", function (event)
     }
 });
 
+
+
+const toggleButton = document.querySelector('.toggle');
+const toggleItems = document.querySelector('.toggle-items');
+
+// Toggle menu visibility when the button is clicked
+toggleButton.addEventListener('click', (event) => {
+    toggleItems.classList.toggle('active');
+    event.stopPropagation(); // Stop click from propagating
+});
+
+// Close the menu when clicking outside
+document.addEventListener('click', () => {
+    if (toggleItems.classList.contains('active')) {
+        toggleItems.classList.remove('active');
+    }
+});
+
+// Prevent menu clicks from closing it
+toggleItems.addEventListener('click', (event) => {
+    event.stopPropagation();
+});