init

views/components/header/header.js

@@ -0,0 +1,97 @@
+//views/components/header/header.js
+document.addEventListener("DOMContentLoaded", function () {
+  // Sidebar functionality
+  const mobileMenuBtn = document.querySelector(".mobile-menu-btn");
+  const floatingMenuBtn = document.getElementById("floatingMenuBtn");
+  const closeSidebarBtn = document.querySelector(".close-sidebar");
+  const sidebar = document.getElementById("sidebar");
+  const overlay = document.getElementById("sidebarOverlay");
+
+  // Open sidebar
+  function openSidebar() {
+    sidebar.classList.add("open");
+    overlay.style.display = "block";
+    document.body.style.overflow = "hidden"; // Prevent scrolling
+  }
+
+  mobileMenuBtn.addEventListener("click", openSidebar);
+  floatingMenuBtn.addEventListener("click", openSidebar);
+
+  // Close sidebar
+  function closeSidebar() {
+    sidebar.classList.remove("open");
+    overlay.style.display = "none";
+    document.body.style.overflow = ""; // Enable scrolling
+  }
+
+  closeSidebarBtn.addEventListener("click", closeSidebar);
+  overlay.addEventListener("click", closeSidebar);
+
+  // Close sidebar when a nav link is clicked
+  const sidebarLinks = document.querySelectorAll(".sidebar-nav .nav-link");
+  sidebarLinks.forEach((link) => {
+    link.addEventListener("click", closeSidebar);
+  });
+
+  // Banner functionality
+  const slides = document.querySelectorAll(".banner-slide");
+  const indicators = document.querySelectorAll(".banner-indicator");
+  const prevBtn = document.getElementById("prevBanner");
+  const nextBtn = document.getElementById("nextBanner");
+  let currentSlide = 0;
+
+  // Function to show a specific slide
+  function showSlide(index) {
+    // Hide all slides
+    slides.forEach((slide) => slide.classList.remove("active"));
+    indicators.forEach((indicator) => indicator.classList.remove("active"));
+
+    // Ensure index is within bounds
+    if (index < 0) {
+      currentSlide = slides.length - 1;
+    } else if (index >= slides.length) {
+      currentSlide = 0;
+    } else {
+      currentSlide = index;
+    }
+
+    // Show the current slide
+    slides[currentSlide].classList.add("active");
+    indicators[currentSlide].classList.add("active");
+  }
+
+  // Event listeners for navigation buttons
+  prevBtn.addEventListener("click", () => {
+    showSlide(currentSlide - 1);
+  });
+
+  nextBtn.addEventListener("click", () => {
+    showSlide(currentSlide + 1);
+  });
+
+  // Event listeners for indicator dots
+  indicators.forEach((indicator) => {
+    indicator.addEventListener("click", () => {
+      const index = parseInt(indicator.getAttribute("data-index"));
+      showSlide(index);
+    });
+  });
+
+  // Hide floating button when sidebar is open
+  const observer = new MutationObserver(function (mutations) {
+    mutations.forEach(function (mutation) {
+      if (mutation.attributeName === "class") {
+        if (sidebar.classList.contains("open")) {
+          floatingMenuBtn.style.display = "none";
+        } else {
+          floatingMenuBtn.style.display = "flex";
+        }
+      }
+    });
+  });
+
+  observer.observe(sidebar, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+});