From d390b8079d0c1f503a82e012904c987c0f002cc9 Mon Sep 17 00:00:00 2001
From: Shreya Verma <112201007@smail.iitpkd.ac.in>
Date: Sat, 9 Nov 2024 01:02:31 +0530
Subject: [PATCH] Added Active state indicator for navbar ,Co-authored-by:
 112201007 <112201007@smail.iitpkd.ac.in> ,Co-authored-by: aditya-bhaumik
 <adi.b98120@gmail.com>

---
 components/Navbar/Navbar.html |  7 ++++++
 components/Navbar/Navbar.js   | 43 +++++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/components/Navbar/Navbar.html b/components/Navbar/Navbar.html
index c8bf3f1..9542f02 100644
--- a/components/Navbar/Navbar.html
+++ b/components/Navbar/Navbar.html
@@ -256,6 +256,13 @@
           font-size: larger;
         }
       }
+      /* Styling for the active tab */
+      .tab.active a {
+      color: #fff; /* Change text color */
+      background-color: #359b6b; /* Change background for visibility */
+      border-radius: 5px;
+      padding: 3.5px;
+      }
     </style>
     <script src="Navbar.js"></script>
   </body>
diff --git a/components/Navbar/Navbar.js b/components/Navbar/Navbar.js
index 8edced4..94d6671 100644
--- a/components/Navbar/Navbar.js
+++ b/components/Navbar/Navbar.js
@@ -37,3 +37,46 @@ window.onload = () => {
 
 // Assign the change event to the theme toggle for toggling dark mode
 icon.addEventListener('change', toggleDarkMode);
+
+
+
+// Function to mark the active tab based on the current URL
+function setActiveTab() {
+    const tabs = document.querySelectorAll('#tabs .tab'); // Select all tab <li> elements
+    const currentPath = window.location.pathname; // Get the current path from the URL
+
+    // Loop through each tab to add or remove the active class
+    tabs.forEach(tab => {
+        const link = tab.querySelector('a'); // Get the <a> inside the <li>
+        const linkPath = link.getAttribute('href'); // Get the href attribute of the <a>
+        console.log('Current Path:', currentPath);
+        console.log('Link Path:', linkPath);
+
+        // Check if the href of the link matches the current path
+        if (currentPath === linkPath || currentPath === linkPath.split('?')[0]) {
+            tab.classList.add('active'); // Add 'active' to the current tab
+        } else {
+            tab.classList.remove('active'); // Remove 'active' from other tabs
+        }
+        // if (link.getAttribute('href') === currentPath) {
+        //     tab.classList.add('active'); // Add 'active' to the current tab
+        // } else {
+        //     tab.classList.remove('active'); // Remove 'active' from other tabs
+        // }
+    });
+}
+
+// Call the function on page load
+window.onload = () => {
+    setActiveTab();
+
+    // Existing theme setup
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+        document.body.classList.add('darkmode');
+        icon.checked = true; // Set checkbox to checked
+    } else {
+        document.body.classList.remove('darkmode');
+        icon.checked = false; // Set checkbox to unchecked
+    }
+};