// Test script to verify admin navigation scroll centering functionality // Run this in the browser console when on admin pages console.log('๐Ÿงช Testing Admin Navigation Auto-Centering'); // 1. Find the sidebar element const sidebar = document.querySelector('[data-sidebar="true"]'); if (sidebar) { console.log('โœ… Sidebar element found:', sidebar); // 2. Find all navigation items const navItems = sidebar.querySelectorAll('a[href*="/admin/"]'); console.log(`โœ… Found ${navItems.length} navigation items`); // 3. Test current page detection const currentPath = window.location.pathname; console.log(`๐Ÿ“ Current path: ${currentPath}`); // 4. Find the nav item that matches current path let currentItem = null; for (let i = 0; i < navItems.length; i++) { const item = navItems[i]; const href = item.getAttribute('href'); if (href === currentPath) { currentItem = item; console.log(`โœ… Exact match found: ${href}`); break; } } // Try partial match if no exact match if (!currentItem) { for (let i = 0; i < navItems.length; i++) { const item = navItems[i]; const href = item.getAttribute('href'); if (href && currentPath.startsWith(href) && href !== '/admin') { currentItem = item; console.log(`โœ… Partial match found: ${href} for ${currentPath}`); break; } } } if (currentItem) { console.log('โœ… Current nav item found:', currentItem); // 5. Test the centering calculation const containerRect = sidebar.getBoundingClientRect(); const itemRect = currentItem.getBoundingClientRect(); const itemTopRelativeToContainer = itemRect.top - containerRect.top + sidebar.scrollTop; const itemHeight = itemRect.height; const containerHeight = containerRect.height; const targetScrollTop = itemTopRelativeToContainer - (containerHeight / 2) + (itemHeight / 2); const maxScrollTop = sidebar.scrollHeight - containerHeight; const finalScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop)); console.log('๐Ÿ“Š Centering calculations:'); console.log(` - Item position relative to container: ${itemTopRelativeToContainer}px`); console.log(` - Item height: ${itemHeight}px`); console.log(` - Container height: ${containerHeight}px`); console.log(` - Target scroll position: ${targetScrollTop}px`); console.log(` - Final scroll position: ${finalScrollTop}px`); // 6. Test the actual scrolling console.log('๐ŸŽฏ Testing auto-center to current page...'); const originalScrollTop = sidebar.scrollTop; // Scroll to top first to simulate navigation sidebar.scrollTop = 0; setTimeout(() => { console.log(`๐Ÿ“ Reset scroll to top: ${sidebar.scrollTop}`); // Perform the centering scroll sidebar.scrollTo({ top: finalScrollTop, behavior: 'smooth' }); setTimeout(() => { console.log(`๐Ÿ“ Final scroll position: ${sidebar.scrollTop}`); console.log(`๐ŸŽฏ Expected position: ${finalScrollTop}`); if (Math.abs(sidebar.scrollTop - finalScrollTop) < 5) { console.log('โœ… SUCCESS: Auto-centering works perfectly!'); } else { console.log('โš ๏ธ Close but not exact (smooth animation may still be running)'); } // 7. Test with different pages console.log('\n๐Ÿ”„ Testing other pages...'); const testPaths = ['/admin', '/admin/sponzori', '/admin/analytika', '/admin/uzivatele']; testPaths.forEach((testPath, index) => { setTimeout(() => { console.log(`\n๐Ÿ“ Testing: ${testPath}`); // Find nav item for test path let testItem = null; for (let i = 0; i < navItems.length; i++) { const item = navItems[i]; const href = item.getAttribute('href'); if (href === testPath) { testItem = item; break; } } if (testItem) { const testItemRect = testItem.getBoundingClientRect(); const testTargetScrollTop = (testItemRect.top - containerRect.top + sidebar.scrollTop) - (containerHeight / 2) + (testItemRect.height / 2); const testFinalScrollTop = Math.max(0, Math.min(testTargetScrollTop, maxScrollTop)); console.log(` โ†’ Should scroll to: ${testFinalScrollTop}px`); } else { console.log(` โ†’ No nav item found for ${testPath}`); } }, index * 1000); }); }, 500); }, 100); } else { console.log('โŒ No matching nav item found for current path'); } } else { console.log('โŒ Sidebar element not found'); console.log('๐Ÿ’ก Make sure you are on an admin page with the sidebar visible'); } console.log('\n๐Ÿ’ก Tips:'); console.log('- Run this on different admin pages to test auto-centering'); console.log('- The sidebar should automatically center the current page item'); console.log('- Navigation should be smooth and automatic');