70 lines
2.0 KiB
JavaScript
70 lines
2.0 KiB
JavaScript
// Import Alpine.js
|
|
import Alpine from 'alpinejs'
|
|
|
|
// Make Alpine available on the window object
|
|
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");
|