updated the intersection observer for the listing section

assets/js/script.js

@@ -21,6 +21,39 @@
 	});
 
 	$(function () {
-		const resourceListObserver = new IntersectionObserver(function () {}, {});
+		const resourceListObserver = new IntersectionObserver(
+			function (entries) {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						const targetId = entry.target.id;
+						const tocItem = $(`.toc li a[data-target="${targetId}"]`).parent();
+
+						if (entry.isIntersecting) {
+							tocItem.addClass("active").siblings().removeClass("active");
+						}
+					}
+				});
+			},
+			{
+				threshold: 0.1,
+			},
+		);
+		$(".resource-block").each(function () {
+			resourceListObserver.observe(this);
+		});
+
+		$(".toc li a").on("click", function (e) {
+			e.preventDefault();
+			$(this).parent().addClass("active").siblings().removeClass("active");
+			const currentActive = $(this).data("target");
+			const targetElement = document.getElementById(currentActive);
+
+			if (targetElement) {
+				targetElement.scrollIntoView({
+					behavior: "smooth",
+					block: "start",
+				});
+			}
+		});
 	});
 })(jQuery);

dev/sass/pages/resources/_resource-listing.scss

@@ -4,6 +4,8 @@
 	}
 	.resource-wrapper {
 		.resource-block {
+			scroll-margin-top: 120px;
+
 			.resource-item {
 				border: 1px solid rgba(0, 0, 0, 0.1);
 				.resource-image {