https://guess-the-jumpshot.com/js/mobile-nav-fix.js

1// Mobile Navigation Fix
2// This script ensures mobile navigation works properly
3
4(function() {
5    'use strict';
6    
7    // Function to initialize mobile navigation
8    function initMobileNav() {
9        console.log('[MobileNav] Initializing mobile navigation...');
10        
11        const mobileToggle = document.getElementById('mobileToggle');
12        const nav = document.getElementById('magicNav');
13        
14        if (!mobileToggle) {
15            console.log('[MobileNav] Mobile toggle button not found, retrying...');
16            return false;
17        }
18        
19        if (!nav) {
20            console.log('[MobileNav] Navigation element not found, retrying...');
21            return false;
22        }
23        
24        console.log('[MobileNav] Elements found, adding event listener...');
25        
26        // Remove any existing event listeners by cloning the element
27        const newToggle = mobileToggle.cloneNode(true);
28        mobileToggle.parentNode.replaceChild(newToggle, mobileToggle);
29        
30        // Function to toggle the menu
31        function toggleMenu(e) {
32            if (e) {
33                e.preventDefault();
34                e.stopPropagation();
35            }
36            
37            console.log('[MobileNav] Menu toggle triggered');
38            nav.classList.toggle('mobile-active');
39            
40            // Update icon
41            const icon = newToggle.querySelector('i');
42            if (icon) {
43                if (nav.classList.contains('mobile-active')) {
44                    // Menu is open, show X icon
45                    icon.setAttribute('data-lucide', 'x');
46                } else {
47                    // Menu is closed, show menu icon
48                    icon.setAttribute('data-lucide', 'menu');
49                }
50                // Re-initialize Lucide icons
51                setTimeout(function() {
52                    if (window.lucide) {
53                        window.lucide.createIcons();
54                    }
55                }, 10);
56            }
57            
58            console.log('[MobileNav] Menu state:', nav.classList.contains('mobile-active') ? 'open' : 'closed');
59        }
60        
61        // Add click event listener
62        newToggle.addEventListener('click', toggleMenu, false);
63        
64        // Add touch event listener for mobile
65        newToggle.addEventListener('touchstart', function(e) {
66            // Mark that touch has started
67            this.dataset.touched = 'true';
68        }, { passive: true });
69        
70        newToggle.addEventListener('touchend', function(e) {
71            // Only toggle if touch started on this element
72            if (this.dataset.touched === 'true') {
73                e.preventDefault();
74                toggleMenu(e);
75                this.dataset.touched = 'false';
76            }
77        }, false);
78        
79        // Add overlay to close menu when clicking outside
80        function addOverlay() {
81            // Check if overlay already exists
82            let overlay = document.getElementById('mobileNavOverlay');
83            if (!overlay) {
84                overlay = document.createElement('div');
85                overlay.id = 'mobileNavOverlay';
86                overlay.style.cssText = `
87                    position: fixed;
88                    top: 0;
89                    left: 0;
90                    right: 0;
91                    bottom: 0;
92                    background: rgba(0, 0, 0, 0.5);
93                    z-index: 998;
94                    display: none;
95                    opacity: 0;
96                    transition: opacity 0.3s;
97                `;
98                document.body.appendChild(overlay);
99                
100                overlay.addEventListener('click', function() {
101                    toggleMenu();
102                });
103            }
104            
105            // Show/hide overlay when menu is toggled
106            const originalToggleMenu = toggleMenu;
107            toggleMenu = function(e) {
108                originalToggleMenu(e);
109                if (nav.classList.contains('mobile-active')) {
110                    overlay.style.display = 'block';
111                    setTimeout(function() {
112                        overlay.style.opacity = '1';
113                    }, 10);
114                } else {
115                    overlay.style.opacity = '0';
116                    setTimeout(function() {
117                        overlay.style.display = 'none';
118                    }, 300);
119                }
120            };
121        }
122        
123        addOverlay();
124        
125        // Initialize Lucide icons for the menu items
126        setTimeout(function() {
127            if (window.lucide) {
128                window.lucide.createIcons();
129                console.log('[MobileNav] Lucide icons initialized');
130            }
131        }, 100);
132        
133        console.log('[MobileNav] Mobile navigation initialized successfully');
134        return true;
135    }
136    
137    // Function to wait for elements and initialize
138    function waitAndInit() {
139        let attempts = 0;
140        const maxAttempts = 50; // Try for 5 seconds
141        
142        const tryInit = setInterval(function() {
143            attempts++;
144            
145            if (initMobileNav()) {
146                // Success, stop trying
147                clearInterval(tryInit);
148            } else if (attempts >= maxAttempts) {
149                console.error('[MobileNav] Failed to initialize mobile navigation after', maxAttempts, 'attempts');
150                clearInterval(tryInit);
151            }
152        }, 100); // Try every 100ms
153    }
154    
155    // Start initialization when DOM is ready
156    if (document.readyState === 'loading') {
157        document.addEventListener('DOMContentLoaded', waitAndInit);
158    } else {
159        // DOM is already loaded
160        waitAndInit();
161    }
162    
163    // Also try when window is fully loaded as a fallback
164    window.addEventListener('load', function() {
165        setTimeout(initMobileNav, 100);
166    });
167})();