Update main.js

assets/js/main.js

@@ -1,4 +1,104 @@
-/*===== MENU SHOW =====*/ 
+/*===== MENU SHOW =====*/
+const showMenu = (toggleId, navId) => {
+  const toggle = document.getElementById(toggleId),
+        nav = document.getElementById(navId);
+
+  if (toggle && nav) {
+    toggle.addEventListener('click', () => {
+      nav.classList.toggle('show-menu');  // Add or remove the 'show-menu' class
+    });
+  }
+};
+
+/* Activate the menu show function */
+showMenu('nav-toggle', 'nav-menu');
 
 
 /*===== REMOVE MENU MOBILE =====*/
+const navLink = document.querySelectorAll('.nav__link');
+
+function linkAction() {
+  const navMenu = document.getElementById('nav-menu');
+  // When a link is clicked, remove the 'show-menu' class
+  navMenu.classList.remove('show-menu');
+}
+
+navLink.forEach(link => link.addEventListener('click', linkAction));
+
+
+/*===== SCROLL SECTIONS ACTIVE LINK =====*/
+const sections = document.querySelectorAll('section[id]');
+
+function scrollActive() {
+  const scrollY = window.pageYOffset;
+
+  sections.forEach(current => {
+    const sectionHeight = current.offsetHeight;
+    const sectionTop = current.offsetTop - 50;
+    const sectionId = current.getAttribute('id');
+
+    if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
+      document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link');
+    } else {
+      document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link');
+    }
+  });
+}
+
+window.addEventListener('scroll', scrollActive);
+
+
+/*===== CHANGE BACKGROUND HEADER ON SCROLL =====*/
+function scrollHeader() {
+  const header = document.getElementById('header');
+  if (this.scrollY >= 200) {
+    header.classList.add('scroll-header');
+  } else {
+    header.classList.remove('scroll-header');
+  }
+}
+
+window.addEventListener('scroll', scrollHeader);
+
+
+/*===== SHOW SCROLL TOP BUTTON =====*/
+function scrollTop() {
+  const scrollTop = document.getElementById('scroll-top');
+  if (this.scrollY >= 560) {
+    scrollTop.classList.add('show-scroll');
+  } else {
+    scrollTop.classList.remove('show-scroll');
+  }
+}
+
+window.addEventListener('scroll', scrollTop);
+
+
+/*===== DARK/LIGHT THEME TOGGLE =====*/
+const themeButton = document.getElementById('theme-button');
+const darkTheme = 'dark-theme';
+const iconTheme = 'bx-sun';
+
+// Previously selected theme (if user selected)
+const selectedTheme = localStorage.getItem('selected-theme');
+const selectedIcon = localStorage.getItem('selected-icon');
+
+// Get current theme and icon
+const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light';
+const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bx-moon' : 'bx-sun';
+
+// Apply theme if user selected previously
+if (selectedTheme) {
+  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme);
+  themeButton.classList[selectedIcon === 'bx-moon' ? 'add' : 'remove'](iconTheme);
+}
+
+// Toggle theme when button is clicked
+themeButton.addEventListener('click', () => {
+  document.body.classList.toggle(darkTheme);
+  themeButton.classList.toggle(iconTheme);
+
+  // Save the current theme and icon in localStorage
+  localStorage.setItem('selected-theme', getCurrentTheme());
+  localStorage.setItem('selected-icon', getCurrentIcon());
+});