frontend/src/layout-test.js

// Simple layout validation test
export const validateLayout = () => {
  const issues = [];
  
  // Check sidebar width consistency
  const sidebar = document.querySelector('.sidebar');
  const mainContainer = document.querySelector('.main-container');
  
  if (sidebar && mainContainer) {
    const sidebarWidth = sidebar.offsetWidth;
    const mainContainerMargin = window.getComputedStyle(mainContainer).marginLeft;
    
    // Check if sidebar width matches main container margin
    if (sidebarWidth > 0 && mainContainerMargin) {
      const marginValue = parseInt(mainContainerMargin);
      if (Math.abs(sidebarWidth - marginValue) > 10) {
        issues.push({
          type: 'layout',
          message: `Sidebar width (${sidebarWidth}px) doesn't match main container margin (${marginValue}px)`,
          severity: 'warning'
        });
      }
    }
  }
  
  // Check mobile responsiveness
  const isMobile = window.innerWidth < 1024;
  if (isMobile) {
    const sidebar = document.querySelector('.sidebar');
    if (sidebar && sidebar.style.position === 'fixed') {
      // Mobile sidebar should be fixed
    } else {
      issues.push({
        type: 'responsive',
        message: 'Mobile sidebar should use fixed positioning',
        severity: 'warning'
      });
    }
  }
  
  // Check z-index conflicts
  const sidebarZIndex = sidebar ? parseInt(window.getComputedStyle(sidebar).zIndex) : 0;
  const overlayZIndex = document.querySelector('.sidebar-overlay') ? 
    parseInt(window.getComputedStyle(document.querySelector('.sidebar-overlay')).zIndex) : 0;
  
  if (sidebarZIndex >= overlayZIndex && overlayZIndex > 0) {
    issues.push({
      type: 'z-index',
      message: 'Sidebar z-index should be higher than overlay',
      severity: 'error'
    });
  }
  
  return {
    isValid: issues.length === 0,
    issues,
    timestamp: new Date().toISOString()
  };
};

// Run layout validation on resize
export const setupLayoutValidation = () => {
  let validationTimeout;
  
  const validate = () => {
    clearTimeout(validationTimeout);
    validationTimeout = setTimeout(() => {
      const result = validateLayout();
      console.log('Layout validation result:', result);
      
      // Dispatch custom event for other components to listen to
      window.dispatchEvent(new CustomEvent('layoutValidation', { detail: result }));
    }, 300);
  };
  
  // Initial validation
  validate();
  
  // Validate on resize
  window.addEventListener('resize', validate);
  
  // Validate on sidebar toggle
  document.addEventListener('sidebarToggle', validate);
  
  return validate;
};