Create script.js

script.js

@@ -0,0 +1,52 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const navbar = document.querySelector('header'); // Pastikan selector ini sesuai dengan elemen header
+    const menuToggle = document.querySelector('.menu-toggle');
+    const navigation = document.querySelector('.navigation');
+    const closeBtn = document.querySelector('.close-btn'); // Tombol X untuk menutup menu
+
+    // Menambahkan kelas "scrolled" saat scroll
+    window.addEventListener('scroll', function() {
+        if (window.scrollY > 0) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+    });
+
+    // Event listener untuk klik pada navbar
+    document.querySelectorAll('.navigation ul li a').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+
+            // Ambil id dari link
+            const targetId = this.getAttribute('href').substring(1);
+
+            // Temukan section yang sesuai
+            const targetSection = document.getElementById(targetId);
+
+            // Scroll ke section tersebut dengan transisi halus
+            targetSection.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+
+            // Menutup menu setelah memilih link (untuk tampilan mobile)
+            if (navigation.classList.contains('active')) {
+                navigation.classList.remove('active');
+                menuToggle.classList.remove('active');
+            }
+        });
+    });
+
+    // Toggle menu responsif
+    menuToggle.addEventListener('click', function() {
+        navigation.classList.toggle('active');
+        menuToggle.classList.toggle('active');  // Menambah/ menghapus efek toggle pada icon
+    });
+
+    // Menambahkan event listener pada tombol X untuk menutup menu
+    closeBtn.addEventListener('click', function() {
+        navigation.classList.remove('active');
+        menuToggle.classList.remove('active'); // Menghapus efek toggle pada icon
+    });
+});