working on front-page

assets/js/app.js

@@ -7,4 +7,63 @@ window.Alpine = Alpine
 // Initialize Alpine
 Alpine.start()
 
+// Header JavaScript - Hamburger menu functionality
+document.addEventListener('DOMContentLoaded', function() {
+  // Mobile menu toggle
+  const offcanvasToggle = document.querySelector('.cs-header__offcanvas-toggle');
+  const offcanvasClose = document.querySelector('.cs-header__offcanvas-close');
+  const offcanvas = document.querySelector('.cs-header__offcanvas');
+  const overlay = document.querySelector('.cs-search-overlay');
+  
+  if (offcanvasToggle) {
+    offcanvasToggle.addEventListener('click', function() {
+      offcanvas.classList.add('active');
+      overlay.style.display = 'block';
+      document.body.style.overflow = 'hidden';
+    });
+  }
+  
+  if (offcanvasClose) {
+    offcanvasClose.addEventListener('click', function() {
+      offcanvas.classList.remove('active');
+      overlay.style.display = 'none';
+      document.body.style.overflow = '';
+    });
+  }
+  
+  
+  // Search functionality
+  const searchToggle = document.querySelectorAll('.cs-header__search-toggle');
+  const searchClose = document.querySelector('.cs-search__close');
+  const search = document.querySelector('.cs-search');
+  
+  searchToggle.forEach(toggle => {
+    toggle.addEventListener('click', function() {
+      search.style.display = 'block';
+      overlay.style.display = 'block';
+      document.body.style.overflow = 'hidden';
+    });
+  });
+  
+  if (searchClose) {
+    searchClose.addEventListener('click', function() {
+      search.style.display = 'none';
+      overlay.style.display = 'none';
+      document.body.style.overflow = '';
+    });
+  }
+  
+  if (overlay) {
+    overlay.addEventListener('click', function() {
+      if (offcanvas) {
+        offcanvas.classList.remove('active');
+      }
+      search.style.display = 'none';
+      overlay.style.display = 'none';
+      document.body.style.overflow = '';
+      
+    });
+  }
+});
+
 console.log("Hello world");