fix: mobile header css (#148)

* fix: css

* fix: header rerenders

* fix: header render

* fix: header

* fix: header

* fix: header

* fix: header css

* fix: header visibility

Author: nikhiltidke101

custom-implementation/src/main.css

@@ -1,8 +1,19 @@
-#fern-header,
-#fern-footer {
+#fern-footer, #fern-header {
+  display: none;
+}
+
+#fern-header-content-wrapper {
   display: block; /* Make the elements visible by default */
 
   @media (min-width: 1024px) {
     display: none; /* Hide the elements on screens larger than 1024px */
   }
+}
+
+#devrev-header-content-wrapper {
+  display: none; /* Hide the wrapper by default */
+  
+  @media (min-width: 1024px) {
+    display: block; /* Show the wrapper on screens larger than 1024px */
+  }
 }

custom-implementation/src/main.tsx

@@ -11,6 +11,11 @@ import { ThemeSwitch } from './components/theme-switch'
 
 import { getPageData } from './modules/sanity/utils'
 
+const FERN_CONTENT_WRAPPER_ID = 'fern-header-content-wrapper'
+const DEVREV_CONTENT_WRAPPER_ID = 'devrev-header-content-wrapper'
+
+const FERN_HEADER_CONTAINER_ID = 'fern-header'
+
 const render = async () => {
   /*
    * This is a where we try to make async data call.
@@ -29,18 +34,55 @@ const render = async () => {
     ReactDOM.render(React.createElement(ThemeSwitch), wrapper)
   }
 
-  ReactDOM.render(
-    React.createElement(Header, {
-      ...data.header,
-      version: theme == 'dark' ? 'light' : 'dark',
-    }),
-    document.getElementById('fern-header'),
-    () => {
-      // Once the header component is loaded, make it visible
-      const header = document.getElementById('fern-header')
-      if (header && window.innerWidth > 1024) header.style.display = 'block'
-    },
-  )
+  const fernHeaderId = document.getElementById(FERN_CONTENT_WRAPPER_ID)
+  const devrevHeaderId = document.getElementById(DEVREV_CONTENT_WRAPPER_ID)
+
+  if (!fernHeaderId && !devrevHeaderId) {
+    //  Main Container
+    const fernHeaderContainer = document.createElement('div')
+    fernHeaderContainer.setAttribute('id', FERN_HEADER_CONTAINER_ID)
+
+    //  Fern Header
+    const fernContentWrapper = document.createElement('div')
+    fernContentWrapper.setAttribute('id', FERN_CONTENT_WRAPPER_ID)
+
+    const devrevContentWrapper = document.createElement('div')
+    devrevContentWrapper.setAttribute('id', DEVREV_CONTENT_WRAPPER_ID)
+
+    // Get existing fern-header element and its children
+    const mainHeaderWrapper = document.getElementById(FERN_HEADER_CONTAINER_ID)
+
+    if (mainHeaderWrapper) {
+      // Move all children to the wrapper
+      while (mainHeaderWrapper.firstChild) {
+        fernContentWrapper.appendChild(mainHeaderWrapper.firstChild)
+      }
+    }
+
+    fernHeaderContainer.appendChild(fernContentWrapper)
+    fernHeaderContainer.appendChild(devrevContentWrapper)
+
+    // Insert the new container where the original fern-header was
+    if (mainHeaderWrapper) {
+      mainHeaderWrapper.replaceWith(fernHeaderContainer)
+    } else {
+      document.body.appendChild(fernHeaderContainer)
+    }
+
+    ReactDOM.render(
+      React.createElement(Header, {
+        ...data.header,
+        version: theme == 'dark' ? 'light' : 'dark',
+      }),
+      devrevContentWrapper,
+      () => {
+        // Once the header component is loaded, make it visible
+        const header = document.getElementById(FERN_HEADER_CONTAINER_ID)
+        if (header) header.style.display = 'block'
+      }
+    )
+  }
+
   ReactDOM.render(
     React.createElement(Footer, { ...data.footer }),
     document.getElementById('fern-footer'),