create the scroll bar

templates/index.html

@@ -189,14 +189,12 @@
 
 <!-- Floating Social Bar -->
 <div
-  id="socialBar"
-  class="fixed left-5 top-24 z-50
+  class="fixed right-72 top-1/2 -translate-y-1/2 z-50
          flex flex-col items-center gap-5
          bg-lime-400
          px-3 py-4
          rounded-full
-         shadow-lg
-         transition-transform duration-300 ease-out"
+         shadow-lg"
 >
   <a href="#" class="text-black text-xl hover:scale-125 transition">
     <i class="fab fa-instagram"></i>
@@ -215,20 +213,9 @@
   </a>
 </div>
 
+
+
 <!-- Dummy content to test scrolling -->
-<div class="h-[2000px] p-20">
-  <h1 class="text-3xl font-bold">Scroll Down</h1>
-</div>
-
-
-<script>
-  const bar = document.getElementById("socialBar");
-
-  window.addEventListener("scroll", () => {
-    const y = window.scrollY * 0.3;
-    bar.style.transform = `translateY(${y}px)`;
-  });
-</script>