MyClub/frontend/public/admin-scroll-test.js

// Admin Sidebar Scroll Test - Run directly in browser console
// Copy and paste this entire script into the browser console on any admin page

(function adminScrollTest() {
  console.clear();
  console.log('=== ADMIN SIDEBAR SCROLL TEST ===\n');
  
  // Find sidebar
  const sidebar = document.querySelector('[data-sidebar="true"]');
  if (!sidebar) {
    console.error('❌ No sidebar found. Make sure you are on an admin page (/admin/*)');
    return;
  }
  
  console.log('✅ Sidebar found');
  console.log('📏 Current scroll:', sidebar.scrollTop);
  console.log('📏 Scroll height:', sidebar.scrollHeight);
  console.log('📏 Client height:', sidebar.clientHeight);
  console.log('📏 Scrollable:', sidebar.scrollHeight > sidebar.clientHeight ? '✅ YES' : '❌ NO');
  
  // Check if scrollable
  if (sidebar.scrollHeight <= sidebar.clientHeight) {
    console.log('\n⚠️  Sidebar is NOT scrollable!');
    console.log('   To test scroll retention, the sidebar needs to be scrollable.');
    console.log('   Try: 1) Reducing browser window height, or 2) Zoom in (Ctrl +)');
    return;
  }
  
  console.log('\n🧪 Testing scroll retention...');
  
  // Clear any existing scroll data
  sessionStorage.removeItem('admin-sidebar-scroll');
  sessionStorage.removeItem('admin-sidebar-scroll-emergency');
  delete window.__adminSidebarScrollTarget;
  
  // Scroll to a test position (middle of scrollable area)
  const maxScroll = sidebar.scrollHeight - sidebar.clientHeight;
  const testScroll = Math.floor(maxScroll * 0.5);
  
  console.log('📍 Scrolling to test position:', testScroll, 'px');
  sidebar.scrollTop = testScroll;
  
  setTimeout(() => {
    const actualScroll = sidebar.scrollTop;
    console.log('📍 Current position after scroll:', actualScroll, 'px');
    
    // Check if scroll was saved
    const savedData = sessionStorage.getItem('admin-sidebar-scroll');
    const emergencyData = sessionStorage.getItem('admin-sidebar-scroll-emergency');
    const globalTarget = window.__adminSidebarScrollTarget;
    
    console.log('\n💾 Storage check:');
    console.log('   Main saved data:', savedData);
    console.log('   Emergency saved:', emergencyData);
    console.log('   Global target:', globalTarget);
    
    console.log('\n🚀 NOW CLICK ANY ADMIN NAVIGATION LINK');
    console.log('   The test will automatically detect navigation and check scroll preservation');
    
    // Intercept navigation to test
    let navDetected = false;
    const originalPushState = history.pushState;
    
    history.pushState = function(...args) {
      if (!navDetected) {
        navDetected = true;
        const scrollBefore = sidebar.scrollTop;
        console.log('\n🚦 Navigation detected!');
        console.log('   Scroll position before navigation:', scrollBefore, 'px');
        
        // Check scroll preservation at multiple intervals
        const checkPoints = [100, 300, 600, 1000];
        checkPoints.forEach((delay, index) => {
          setTimeout(() => {
            const scrollAfter = sidebar.scrollTop;
            const difference = Math.abs(scrollAfter - scrollBefore);
            
            console.log(`   📍 Check ${index + 1} (${delay}ms): ${scrollAfter}px (diff: ${difference}px)`);
            
            if (delay === 1000) {
              if (difference < 10) {
                console.log('\n✅ SUCCESS: Scroll position preserved!');
                console.log('   The admin sidebar scroll retention is working correctly.');
              } else {
                console.log('\n❌ FAILURE: Scroll position was reset');
                console.log('   Difference:', difference, 'px');
                console.log('\n🔍 Debugging info:');
                console.log('   - Check browser console for any scroll-related errors');
                console.log('   - Verify AdminScrollManager is loaded');
                console.log('   - Check if CSS is interfering');
              }
              
              // Restore original history function
              history.pushState = originalPushState;
            }
          }, delay);
        });
      }
      return originalPushState.apply(this, args);
    };
    
  }, 500);
})();