template.js

// Navigation Bar Functionality
document.addEventListener('DOMContentLoaded', function() {
    // Get DOM elements
    const navbar = document.querySelector('.navbar');
    const navMenu = document.querySelector('.nav-menu');
    const navLinks = document.querySelectorAll('.nav-menu a');
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
    
    // Create mobile menu toggle button if it doesn't exist
    if (!mobileMenuToggle && window.innerWidth <= 768) {
        createMobileMenuToggle();
    }

    // Mobile Menu Toggle Functionality
    function createMobileMenuToggle() {
        const toggleButton = document.createElement('button');
        toggleButton.className = 'mobile-menu-toggle';
        toggleButton.innerHTML = '☰';
        toggleButton.style.cssText = `
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 10px;
        `;
        
        navbar.appendChild(toggleButton);
        
        // Add mobile menu styles
        const style = document.createElement('style');
        style.textContent = `
            @media (max-width: 768px) {
                .mobile-menu-toggle {
                    display: block !important;
                }
                .nav-menu {
                    display: none;
                    position: absolute;
                    top: 100%;
                    left: 0;
                    width: 100%;
                    background-color: #2c3e50;
                    flex-direction: column;
                    padding: 1rem 0;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                }
                .nav-menu.active {
                    display: flex !important;
                }
                .nav-menu li {
                    margin: 0.5rem 0;
                    text-align: center;
                }
            }
        `;
        document.head.appendChild(style);
        
        // Toggle mobile menu
        toggleButton.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            toggleButton.innerHTML = navMenu.classList.contains('active') ? '✕' : '☰';
        });
        
        // Close mobile menu when clicking outside
        document.addEventListener('click', function(e) {
            if (!navbar.contains(e.target)) {
                navMenu.classList.remove('active');
                toggleButton.innerHTML = '☰';
            }
        });
    }

    // Smooth Scrolling for Navigation Links
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            const targetSection = document.querySelector(targetId);
            
            if (targetSection) {
                // Calculate offset for fixed header
                const headerHeight = navbar.offsetHeight;
                const targetPosition = targetSection.offsetTop - headerHeight;
                
                // Smooth scroll to target
                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
                
                // Close mobile menu if open
                const mobileMenu = document.querySelector('.mobile-menu-toggle');
                if (mobileMenu && navMenu.classList.contains('active')) {
                    navMenu.classList.remove('active');
                    mobileMenu.innerHTML = '☰';
                }
            }
        });
    });

    // Active Link Highlighting based on Scroll Position
    function updateActiveLink() {
        const sections = document.querySelectorAll('section[id]');
        const headerHeight = navbar.offsetHeight;
        const scrollPosition = window.scrollY + headerHeight + 100; // Offset for better detection
        
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.offsetHeight;
            const sectionId = '#' + section.getAttribute('id');
            
            // Check if current scroll position is within this section
            if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                // Remove active class from all links
                navLinks.forEach(link => link.classList.remove('active'));
                
                // Add active class to current section link
                const activeLink = document.querySelector(`.nav-menu a[href="${sectionId}"]`);
                if (activeLink) {
                    activeLink.classList.add('active');
                }
            }
        });
    }

    // Navbar Background Change on Scroll
    function updateNavbarBackground() {
        const scrollPosition = window.scrollY;
        
        if (scrollPosition > 50) {
            navbar.style.backgroundColor = 'rgba(44, 62, 80, 0.95)';
            navbar.style.backdropFilter = 'blur(10px)';
        } else {
            navbar.style.backgroundColor = '#2c3e50';
            navbar.style.backdropFilter = 'none';
        }
    }

    // Add active link styles
    const style = document.createElement('style');
    style.textContent = `
        .nav-menu a.active {
            color: #4CAF50 !important;
            font-weight: bold;
        }
        .nav-menu a:hover {
            color: #4CAF50;
        }
    `;
    document.head.appendChild(style);

    // Scroll Event Listeners
    let ticking = false;
    
    function handleScroll() {
        if (!ticking) {
            requestAnimationFrame(() => {
                updateActiveLink();
                updateNavbarBackground();
                ticking = false;
            });
            ticking = true;
        }
    }
    
    window.addEventListener('scroll', handleScroll);

    // Handle window resize for mobile menu
    window.addEventListener('resize', function() {
        const mobileMenu = document.querySelector('.mobile-menu-toggle');
        
        if (window.innerWidth > 768) {
            navMenu.classList.remove('active');
            if (mobileMenu) {
                mobileMenu.innerHTML = '☰';
            }
        }
    });

    // Initialize on page load
    updateActiveLink();
    updateNavbarBackground();

    // Add loading animation for smooth transitions
    navbar.style.transition = 'all 0.3s ease';
});

// Utility function to scroll to top
function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}

// Add scroll to top button functionality (optional)
function createScrollToTopButton() {
    const scrollButton = document.createElement('button');
    scrollButton.innerHTML = '↑';
    scrollButton.className = 'scroll-to-top';
    scrollButton.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #4CAF50;
        color: white;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        display: none;
        z-index: 1000;
        transition: all 0.3s ease;
    `;
    
    document.body.appendChild(scrollButton);
    
    // Show/hide scroll to top button
    window.addEventListener('scroll', function() {
        if (window.scrollY > 300) {
            scrollButton.style.display = 'block';
        } else {
            scrollButton.style.display = 'none';
        }
    });
    
    // Scroll to top when clicked
    scrollButton.addEventListener('click', scrollToTop);
}

// Initialize scroll to top button
document.addEventListener('DOMContentLoaded', function() {
    createScrollToTopButton();
});