Merge branch 'main' of https://github.com/Ashmitha2606/WordWise

ANSHIKA-26 · Nov 3, 2024 · 47add00 · 47add00
2 parents 91ea7f3 + c33a832
commit 47add00
Show file tree

Hide file tree

Showing 6 changed files with 711 additions and 336 deletions.
diff --git a/index.html b/index.html
@@ -382,19 +382,38 @@ <h2>WordWise</h2>
                     <a href="contact_us.html">Contact Us</a>
                     <a href="give_feedback.html">Give Feedback</a>
                 </div>
+
                 <div class="dropdown">
                     <!-- Profile Icon -->
-                    <a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
-                        <i class="fas fa-user-circle"></i>
-                    </a>
-
+
+                        <a href="javascript:void(0);" class="profile-link" style="display: flex; align-items: center; text-decoration: none;" onclick="toggleMenu()">
+                            <img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Icon" style="width: 50px; height: 50px; border-radius: 50%; margin-top: -17px;">
+                        </a>
+                    </li>
+
                     <!-- Dropdown Menu -->
-                    <ul class="dropdown-menu" id="dropdownMenu">
+                    <ul class="dropdown-menu" id="profileMenu" style="display: none; position: absolute; z-index: 1;">
+                        <li><a href="./profile.html">My Profile</a></li>
                         <li><a href="#login" onclick="openForm('login')">Login</a></li>
                         <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
                     </ul>
                 </div>
-
+
+                <script>
+                    function toggleMenu() {
+                        const menu = document.getElementById('profileMenu');
+                        menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
+                    }
+
+                    // Close the dropdown if the user clicks outside of it
+                    window.onclick = function(event) {
+                        const menu = document.getElementById('profileMenu');
+                        if (!event.target.matches('.profile-link img') && menu.style.display === 'block') {
+                            menu.style.display = 'none';
+                        }
+                    }
+                </script>
+
                 <!-- Login Form -->
                 <div class="form-popup" id="loginForm">
                     <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">