logging to determine render or css issue

Author: Ryan-Amirthan

custom-implementation/src/main.tsx

@@ -28,21 +28,12 @@ const render = async () => {
 
   const data = await getPageData()
 
-  const sidenav = document.querySelector('button#fern-search-button')
+  const sidenav = document.querySelector('button.fern-search-bar')
     ?.parentElement as HTMLElement
 
   const theme = document.getElementsByTagName('html')[0].getAttribute('class')
 
-  // DEBUG: Let's see what elements actually exist
-  console.log('DEBUG: Looking for sidebar elements...')
-  console.log('DEBUG: button#fern-search-button found:', document.querySelector('button#fern-search-button'))
-  console.log('DEBUG: sidenav parent found:', sidenav)
-  console.log('DEBUG: #fern-sidebar found:', document.getElementById('fern-sidebar'))
-  console.log('DEBUG: All elements with fern- classes:', document.querySelectorAll('[class*="fern-"]'))
-  console.log('DEBUG: All elements with fern- ids:', document.querySelectorAll('[id*="fern-"]'))
-
   if (!sidenavRendered && !document.getElementById('sidenav-header-wrapper') && sidenav) {
-    console.log('DEBUG: Found sidenav element, rendering search and theme switch...')
     sidenavRendered = true
 
     const sidenavHeaderWrapper = document.createElement('div')
@@ -62,19 +53,21 @@ const render = async () => {
     themeRoot.render(React.createElement(ThemeSwitch))
 
     sidenav.replaceWith(sidenavHeaderWrapper)
-  } else {
-    console.log('DEBUG: ❌ NOT rendering sidenav components because:')
-    console.log('  - sidenavRendered:', sidenavRendered)
-    console.log('  - sidenav-header-wrapper exists:', !!document.getElementById('sidenav-header-wrapper'))
-    console.log('  - sidenav element found:', !!sidenav)
   }
 
   const fernHeaderId = document.getElementById(FERN_CONTENT_WRAPPER_ID)
   const devrevHeaderId = document.getElementById(DEVREV_CONTENT_WRAPPER_ID)
 
+  // DEBUG: Check header state
+  console.log('DEBUG: Header check:')
+  console.log('  - headerRendered:', headerRendered)
+  console.log('  - fernHeaderId exists:', !!fernHeaderId)
+  console.log('  - devrevHeaderId exists:', !!devrevHeaderId)
+  console.log('  - Will render header:', !headerRendered && !fernHeaderId && !devrevHeaderId)
+
   // GUARD: Only render header once
   if (!headerRendered && !fernHeaderId && !devrevHeaderId) {
-    console.log('DEBUG: Rendering header...')
+    console.log('DEBUG: Starting header render...')
     headerRendered = true
 
     //  Main Container
@@ -109,6 +102,10 @@ const render = async () => {
     }
 
     // Render header component
+    console.log('DEBUG: Rendering DevRev header component...')
+    console.log('DEBUG: devrevContentWrapper:', devrevContentWrapper)
+    console.log('DEBUG: header data:', data.header)
+    
     const headerRoot = ReactDOM.createRoot(devrevContentWrapper)
     headerRoot.render(
       React.createElement(Header, {
@@ -117,12 +114,26 @@ const render = async () => {
       })
     )
 
+    console.log('DEBUG: DevRev header rendered, making visible...')
+    
     // Make header visible immediately
     setTimeout(() => {
       const header = document.getElementById(FERN_HEADER_CONTAINER_ID)
-      if (header) {
-        header.style.display = 'block'
-      }
+      console.log('DEBUG: Final header element:', header)
+              if (header) {
+          header.style.display = 'block'
+          console.log('DEBUG: Header display set to block')
+          
+          // Check if DevRev wrapper is visible
+          const devrevWrapper = document.getElementById(DEVREV_CONTENT_WRAPPER_ID)
+          if (devrevWrapper) {
+            const styles = window.getComputedStyle(devrevWrapper)
+            console.log('DEBUG: DevRev wrapper styles:')
+            console.log('  - display:', styles.display)
+            console.log('  - visibility:', styles.visibility)
+            console.log('  - opacity:', styles.opacity)
+          }
+        }
     }, 0)
   }