From 7991fd8495174de024ee726c1b8e11752fca058d Mon Sep 17 00:00:00 2001
From: Zohreh <z.safarkhani@gmail.com>
Date: Tue, 3 Dec 2024 17:37:05 +0100
Subject: [PATCH] Toggle button for login page

---
 login.html |  7 +++++++
 login.js   | 22 ++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/login.html b/login.html
index 6fc91b3..b46b8ac 100644
--- a/login.html
+++ b/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>
 
diff --git a/login.js b/login.js
index 8eaa727..d42aec5 100644
--- a/login.js
+++ b/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();
+});