Funcionalidade do Menu

assets/css/style.css

@@ -1968,7 +1968,7 @@ textarea.form-input::-webkit-resizer {
   }
 
   .avatar-box img {
-    width: 150px;
+    width: 180px;
   }
 
   .info-content .name {

assets/js/script.js

@@ -1,20 +1,18 @@
-'use strict';
-
-
+"use strict";
 
 // element toggle function
-const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
-
-
+const elementToggleFunc = function (elem) {
+  elem.classList.toggle("active");
+};
 
 // sidebar variables
 const sidebar = document.querySelector("[data-sidebar]");
 const sidebarBtn = document.querySelector("[data-sidebar-btn]");
 
 // sidebar toggle functionality for mobile
-sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
-
-
+sidebarBtn.addEventListener("click", function () {
+  elementToggleFunc(sidebar);
+});
 
 // testimonials variables
 const testimonialsItem = document.querySelectorAll("[data-testimonials-item]");
@@ -31,90 +29,78 @@ const modalText = document.querySelector("[data-modal-text]");
 const testimonialsModalFunc = function () {
   modalContainer.classList.toggle("active");
   overlay.classList.toggle("active");
-}
+};
 
 // add click event to all modal items
 for (let i = 0; i < testimonialsItem.length; i++) {
-
   testimonialsItem[i].addEventListener("click", function () {
-
     modalImg.src = this.querySelector("[data-testimonials-avatar]").src;
     modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt;
-    modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML;
-    modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML;
+    modalTitle.innerHTML = this.querySelector(
+      "[data-testimonials-title]"
+    ).innerHTML;
+    modalText.innerHTML = this.querySelector(
+      "[data-testimonials-text]"
+    ).innerHTML;
 
     testimonialsModalFunc();
-
   });
-
 }
 
 // add click event to modal close button
 modalCloseBtn.addEventListener("click", testimonialsModalFunc);
 overlay.addEventListener("click", testimonialsModalFunc);
 
-
-
 // custom select variables
 const select = document.querySelector("[data-select]");
 const selectItems = document.querySelectorAll("[data-select-item]");
 const selectValue = document.querySelector("[data-selecct-value]");
 const filterBtn = document.querySelectorAll("[data-filter-btn]");
 
-select.addEventListener("click", function () { elementToggleFunc(this); });
+select.addEventListener("click", function () {
+  elementToggleFunc(this);
+});
 
 // add event in all select items
 for (let i = 0; i < selectItems.length; i++) {
   selectItems[i].addEventListener("click", function () {
-
     let selectedValue = this.innerText.toLowerCase();
     selectValue.innerText = this.innerText;
     elementToggleFunc(select);
     filterFunc(selectedValue);
-
   });
 }
 
 // filter variables
 const filterItems = document.querySelectorAll("[data-filter-item]");
 
 const filterFunc = function (selectedValue) {
-
   for (let i = 0; i < filterItems.length; i++) {
-
     if (selectedValue === "all") {
       filterItems[i].classList.add("active");
     } else if (selectedValue === filterItems[i].dataset.category) {
       filterItems[i].classList.add("active");
     } else {
       filterItems[i].classList.remove("active");
     }
-
   }
-
-}
+};
 
 // add event in all filter button items for large screen
 let lastClickedBtn = filterBtn[0];
 
 for (let i = 0; i < filterBtn.length; i++) {
-
   filterBtn[i].addEventListener("click", function () {
-
     let selectedValue = this.innerText.toLowerCase();
     selectValue.innerText = this.innerText;
     filterFunc(selectedValue);
 
     lastClickedBtn.classList.remove("active");
     this.classList.add("active");
     lastClickedBtn = this;
-
   });
-
 }
 
-
-
 // contact form variables
 const form = document.querySelector("[data-form]");
 const formInputs = document.querySelectorAll("[data-form-input]");
@@ -123,27 +109,22 @@ const formBtn = document.querySelector("[data-form-btn]");
 // add event to all form input field
 for (let i = 0; i < formInputs.length; i++) {
   formInputs[i].addEventListener("input", function () {
-
     // check form validation
     if (form.checkValidity()) {
       formBtn.removeAttribute("disabled");
     } else {
       formBtn.setAttribute("disabled", "");
     }
-
   });
 }
 
-
-
 // page navigation variables
 const navigationLinks = document.querySelectorAll("[data-nav-link]");
 const pages = document.querySelectorAll("[data-page]");
 
 // add event to all nav link
 for (let i = 0; i < navigationLinks.length; i++) {
   navigationLinks[i].addEventListener("click", function () {
-
     for (let i = 0; i < pages.length; i++) {
       if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
         pages[i].classList.add("active");
@@ -154,31 +135,29 @@ for (let i = 0; i < navigationLinks.length; i++) {
         navigationLinks[i].classList.remove("active");
       }
     }
-
   });
 }
 
-
-
 // Função para rolar suavemente até um elemento específico
 const scrollToElement = (selector, offset = 0) => {
   const element = document.querySelector(selector);
   if (element) {
     const top = element.offsetTop + offset;
     window.scrollTo({
       top: top,
-      behavior: "smooth"
+      behavior: "smooth",
     });
   }
 };
 
-
 // Lazy Loading de Imagens e Iframes
 // Esse script adia o carregamento de imagens e iframes até que estejam próximos de serem exibidos
 
 document.addEventListener("DOMContentLoaded", function () {
   const lazyLoad = () => {
-    const lazyElements = document.querySelectorAll("img[data-src], iframe[data-src]");
+    const lazyElements = document.querySelectorAll(
+      "img[data-src], iframe[data-src]"
+    );
     const windowHeight = window.innerHeight;
 
     lazyElements.forEach((element) => {
@@ -197,12 +176,9 @@ document.addEventListener("DOMContentLoaded", function () {
   lazyLoad(); // Executa ao carregar a página
 });
 
-
 // Animações Suaves ao Rolagem (Smooth Scroll)
 // Adiciona uma experiência fluida ao rolar para links âncora.
 
-
-
 document.addEventListener("DOMContentLoaded", function () {
   document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
     anchor.addEventListener("click", function (e) {
@@ -218,7 +194,6 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 });
 
-
 //Minimizar a Re-renderização com requestAnimationFrame
 
 let ticking = false;
@@ -236,7 +211,6 @@ const optimizeScroll = () => {
 
 window.addEventListener("scroll", optimizeScroll);
 
-
 // Preloader Simples
 document.addEventListener("DOMContentLoaded", function () {
   const preloader = document.createElement("div");
@@ -255,7 +229,6 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 });
 
-
 // Script para Melhorar Performance (Debounce e Throttle)
 
 const debounce = (func, delay) => {
@@ -266,9 +239,12 @@ const debounce = (func, delay) => {
   };
 };
 
-window.addEventListener("resize", debounce(() => {
-  console.log("Resize otimizado!");
-}, 200));
+window.addEventListener(
+  "resize",
+  debounce(() => {
+    console.log("Resize otimizado!");
+  }, 200)
+);
 
 const throttle = (func, limit) => {
   let lastFunc;
@@ -290,6 +266,9 @@ const throttle = (func, limit) => {
   };
 };
 
-window.addEventListener("scroll", throttle(() => {
-  console.log("Scroll otimizado!");
-}, 200));
+window.addEventListener(
+  "scroll",
+  throttle(() => {
+    console.log("Scroll otimizado!");
+  }, 200)
+);