From fe33d5fe48102cf074e476e7282fd52469dafcdd Mon Sep 17 00:00:00 2001
From: Ananta2545 <chatterjeeanata091@gmail.com>
Date: Mon, 14 Oct 2024 13:02:00 +0530
Subject: [PATCH] ``Added the automatic active link when scroll``

---
 index.html | 18 +++++++++---------
 main.js    | 37 ++++++++++++++++++++++++++++++++++++-
 style.css  | 18 ++++++++++++++++++
 3 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index a4e5245..ffb4652 100644
--- a/index.html
+++ b/index.html
@@ -26,12 +26,12 @@
         </div>
       </div>
       <ul class="nav__links" id="nav-links">
-        <li><a href="#header" class="active">HOME</a></li>
-        <li><a href="#about">ABOUT</a></li>
-        <li><a href="#trainer">TRAINER</a></li>
-        <li><a href="#client">CLIENT</a></li>
-        <li><a href="#blog">BLOG</a></li>
-        <li><a href="#contact">CONTACT</a></li>
+        <li><a class="nav_link active" href="#header">HOME</a></li>
+        <li><a class="nav_link" href="#about">ABOUT</a></li>
+        <li><a class="nav_link" href="#trainer">TRAINER</a></li>
+        <li><a class="nav_link" href="#client">CLIENT</a></li>
+        <li><a class="nav_link" href="#blog">BLOG</a></li>
+        <li><a class="nav_link" href="#contact">CONTACT</a></li>
         <i class="ri-close-line"></i>
       </ul>
     </div>
@@ -286,7 +286,7 @@ <h3><sup>$</sup>60<span>/month</span></h3>
     <section class="section__container client__container" id="client">
       <h2 class="section__header">OUR TESTIMONIALS</h2>
       <div class="swiper">
-        <div class="swiper-wrapper">
+        <div class="swiper-wrappe">
           <div class="swiper-slide">
             <div class="client__card">
               <img src="assets/client-1.jpg" alt="client" />
@@ -327,7 +327,7 @@ <h4>Emily Davis</h4>
           </div>
     </section>
 
-    <footer class="footer" id="contact">
+    <section class="footer" id="contact">
       <div class="section__container footer__container">
         <div class="footer__col">
           <div class="footer__logo">
@@ -515,7 +515,7 @@ <h2 class="macro__header">Macronutrient Calculator</h2>
   <br>
   <br>
   <br>
-  <footer class="footer" id="contact">
+  <footer class="footer">
     <div class="section__container footer__container">
       <div class="footer__col">
         <div class="footer__logo">
diff --git a/main.js b/main.js
index 8284b02..f766fd2 100644
--- a/main.js
+++ b/main.js
@@ -2,7 +2,7 @@
 const menuBtn = document.getElementById("menu-btn");
 const navLinks = document.getElementById("nav-links");
 const closeIcon = navLinks.querySelector("i.ri-close-line");
-
+const bmiBtn = document.querySelector(".btn");
 // Toggle the mobile menu visibility
 menuBtn.addEventListener("click", () => {
   navLinks.classList.add("open");
@@ -156,3 +156,38 @@ function sendEmail() {
     Body: "And this is the body",
   }).then((message) => alert(message));
 }
+
+// Navbar active part logic
+document.addEventListener("DOMContentLoaded", function() {
+  const navLinks = document.querySelectorAll('.nav_link');
+  const sections = document.querySelectorAll('section');
+  
+  function setActiveLink() {
+    let currentSection = 'header'; // Default to 'header' (home section)
+
+    sections.forEach(section => {
+      const sectionTop = section.offsetTop - 50; // Adjust offset if needed
+      const sectionHeight = section.offsetHeight;
+
+      // Check if the section is in the viewport
+      if (window.scrollY >= sectionTop && window.scrollY < sectionTop + sectionHeight) {
+        currentSection = section.getAttribute('id');
+      }
+    });
+
+    // Remove 'active' from all links, and set only the active one
+    navLinks.forEach(link => {
+      link.classList.remove('active');
+      if (link.getAttribute('href').includes(currentSection)) {
+        link.classList.add('active');
+      }
+    });
+  }
+
+  // Initially set only the 'HOME' link as active
+  const homeLink = document.querySelector('#header'); 
+  homeLink.classList.add('active');
+
+  // Call setActiveLink on scroll
+  window.addEventListener('scroll', setActiveLink);
+});
diff --git a/style.css b/style.css
index 2c66587..b3c8b6f 100644
--- a/style.css
+++ b/style.css
@@ -178,6 +178,24 @@ nav {
   gap: 10rem;
 }
 
+/* Navbar styling */
+/* Style for the navbar links */
+.nav_link {
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+  padding: 0 1rem;
+  text-decoration: none;
+  color: var(--text-color);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.nav_link.active{
+  color: red;
+}
+
+
 .header {
   background-image: linear-gradient(
       to right,