#87 752

<script>
// tuanphan - 18-03-2025
window.addEventListener('DOMContentLoaded', () => {
  const navItems = document.querySelectorAll('.header-nav-item a');
  
  // Apply initial styles to main content
  const pageElement = document.querySelector('#page');
  pageElement.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
  pageElement.style.position = 'relative';
  
  navItems.forEach(item => {
    item.addEventListener('click', (e) => {
      e.preventDefault();
      const href = item.getAttribute('href');
      
      // Only process internal links
      if (href && !href.startsWith('#') && !href.includes('http')) {
        // Start animation - slide out to left
        pageElement.style.opacity = '0';
        pageElement.style.transform = 'translateX(-100%)';
        
        // Wait for animation to complete
        setTimeout(() => {
          fetch(href)
            .then(response => response.text())
            .then(html => {
              const parser = new DOMParser();
              const doc = parser.parseFromString(html, 'text/html');
              const newPageContent = doc.querySelector('#page');
              
              if (newPageContent) {
                // Insert new content (invisible)
                pageElement.innerHTML = newPageContent.innerHTML;
                pageElement.style.transform = 'translateX(100%)';
                
                // Trigger reflow
                void pageElement.offsetWidth;
                
                // Animate new content sliding in from right
                pageElement.style.opacity = '1';
                pageElement.style.transform = 'translateX(0)';
                
                // Update URL
                window.history.pushState({}, '', href);
              }
            })
            .catch(error => {
              console.error('Error loading page:', error);
              pageElement.style.opacity = '1';
              pageElement.style.transform = 'translateX(0)';
            });
        }, 500);
      } else {
        // For external links, continue with normal navigation
        window.location.href = href;
      }
    });
  });
});

// Handle browser back button
window.addEventListener('popstate', () => {
  const pageElement = document.querySelector('#page');
  
  // Slide out to right first
  pageElement.style.opacity = '0';
  pageElement.style.transform = 'translateX(100%)';
  
  setTimeout(() => {
    fetch(window.location.pathname)
      .then(response => response.text())
      .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const newPageContent = doc.querySelector('#page');
        
        if (newPageContent) {
          // Insert new content (invisible)
          pageElement.innerHTML = newPageContent.innerHTML;
          pageElement.style.transform = 'translateX(-100%)';
          
          // Trigger reflow
          void pageElement.offsetWidth;
          
          // Animate new content sliding in from left
          pageElement.style.opacity = '1';
          pageElement.style.transform = 'translateX(0)';
        }
      })
      .catch(error => {
        console.error('Error loading page:', error);
        pageElement.style.opacity = '1';
        pageElement.style.transform = 'translateX(0)';
      });
  }, 500);
});
</script>