From bfd3bd45802b8f31035c1ce0ce8a5154d87b6289 Mon Sep 17 00:00:00 2001
From: Suhani Singh Paliwal <suhanisinghpaliwal@Suhanis-MacBook-Air.local>
Date: Mon, 26 Aug 2024 21:50:12 +0530
Subject: [PATCH] added dropdown to navbar.

Co-authored-by: suhanipaliwal <suhanispaliwal@gmail.com>
Co-authored-by: sanjay-kv <sanjay.kanakkot@gmail.com>
---
 Website/index.html   | 21 ++++++++++++++++-----
 Website/js/script.js | 14 ++++++++++++++
 Website/styles.css   | 43 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/Website/index.html b/Website/index.html
index 1d42b0438..d9ebfd652 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -16,11 +16,22 @@
                 <span class="brand-name">RecodeHive</span>
             </div>
             <ul class="nav-links">
-                <li><a href="#">Home</a></li>
-                <li><a href="#">About</a></li>
-                <li><a href="#">Organization</a></li>
-                <li><a href="#">FAQ</a></li>
-                <li><a href="#">Contact</a></li>
+                <li><a href="/">Home</a></li>
+                <li><a href="/about">About</a></li>
+
+                <!-- Dropdown on navbar -->
+                <li class="dropdown">
+                    <button id="dropdownButton" class="dropbtn">Organization</button>
+                    <div id="dropdownMenu" class="dropdown-content">
+                        <a href="/how-we-work">How we work?</a>
+                        <a href="/projects">Projects</a>
+                        <a href="/team">Team</a>
+                        <a href="/code-of-conduct">Code of Conduct</a>
+                    </div>
+                </li>
+
+                <li><a href="/faq">FAQ</a></li>
+                <li><a href="/contact">Contact</a></li>
                 <li>
                     <a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
                         <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" width="25" height="25"> <!-- GitHub Icon -->
diff --git a/Website/js/script.js b/Website/js/script.js
index b0b3ca03a..59183d16c 100644
--- a/Website/js/script.js
+++ b/Website/js/script.js
@@ -111,6 +111,20 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
+    const dropdownButton = document.getElementById('dropdownButton');
+    const dropdownMenu = document.getElementById('dropdownMenu');
+
+    dropdownButton.addEventListener('click', function(event) {
+        dropdownMenu.classList.toggle('show');
+        event.stopPropagation(); // Prevent click event from bubbling up
+    });
+
+    window.addEventListener('click', function(event) {
+        if (!dropdownButton.contains(event.target)) {
+            dropdownMenu.classList.remove('show');
+        }
+    });
+
     const chatbotButton = document.getElementById('chatbot-button');
     const chatbot = document.getElementById('chatbot');
     const closeChatbot = document.getElementById('close-chatbot');
diff --git a/Website/styles.css b/Website/styles.css
index ea9e93a46..ddb2d4c4d 100644
--- a/Website/styles.css
+++ b/Website/styles.css
@@ -63,6 +63,49 @@ header {
     text-decoration: underline;
 }
 
+.dropdown {
+    float: left;
+    overflow: hidden;
+}
+
+.dropbtn {
+    font-size: 16px;
+    border: none;
+    outline: none;
+    color: white;
+    padding: 14px 16px;
+    background-color: inherit;
+    font-family: inherit;
+    margin: 0;
+    cursor: pointer;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+}
+
+/* Show dropdown on hover */
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.show {
+    display: block;
+}
+
 main {
     padding: 20px;
     flex: 1;