Update index.html

index.html

@@ -294,6 +294,15 @@
     background-color: #007aff; /* Ganti warna latar belakang saat tombol dihover */
     border: 2px solid #007aff; /* Ganti warna border saat tombol dihover */
 }
+      header {
+  /* existing styles */
+  transition: height 0.3s ease;
+}
+
+.dark-mode header {
+  /* existing styles */
+  height: 40px;
+}
 
     </style>
 </head>
@@ -457,7 +466,29 @@ themeSwitch.addEventListener('change', () => {
                 console.error('Failed to copy: ', err);
             });
         }
+const themeSwitch = document.getElementById('theme-switch');
+const pageHeader = document.getElementById('page-header');
+
+function toggleDarkMode() {
+  document.body.classList.toggle('dark-mode');
+
+  // Change header behavior on scroll
+  if (document.body.classList.contains('dark-mode')) {
+    window.addEventListener('scroll', () => {
+      if (window.scrollY > 0 && window.scrollY < 150) {
+        pageHeader.style.height = `calc(40px + ${window.scrollY * 0.5}px)`;
+      } else if (window.scrollY >= 150) {
+        pageHeader.style.height = '80px';
+      } else {
+        pageHeader.style.height = '40px';
+      }
+    });
+  } else {
+    window.removeEventListener('scroll', headerScrollFunction);
+  }
+}
 
+themeSwitch.addEventListener('change', toggleDarkMode);
     </script>
 </body>
 </html>