https://gadgetguruz.com/assets/js/search-overlay.js

1document.addEventListener('DOMContentLoaded', () => {
2    const searchInput = document.getElementById('search-input');
3    const searchBtn = document.getElementById('search-btn');
4    const searchForm = document.getElementById('search-form');
5    const searchOverlay = document.getElementById('search-overlay');
6    const closeSearch = document.getElementById('close-search');
7    let searchOpen = false;
8
9    if (searchBtn && searchInput && searchForm && searchOverlay) {
10        searchBtn.addEventListener('click', (e) => {
11            e.preventDefault();
12            searchOverlay.classList.add('active');
13            searchInput.focus();
14            searchOpen = true;
15        });
16
17        if (closeSearch) {
18            closeSearch.addEventListener('click', () => {
19                searchOverlay.classList.remove('active');
20                searchOpen = false;
21            });
22        }
23
24        // Close on escape key
25        document.addEventListener('keydown', (e) => {
26            if (e.key === 'Escape' && searchOpen) {
27                searchOverlay.classList.remove('active');
28                searchOpen = false;
29            }
30        });
31
32        // Close on background click
33        searchOverlay.addEventListener('click', (e) => {
34            if (e.target === searchOverlay && searchOpen) {
35                searchOverlay.classList.remove('active');
36                searchOpen = false;
37            }
38        });
39
40        // Handle search form submission
41        searchForm.addEventListener('submit', (e) => {
42            if (searchInput.value.trim() === '') {
43                e.preventDefault();
44                alert('Please enter a search term');
45            }
46        });
47    }
48});