fix: sidenav sibling seperated v3

Author: nikhiltidke101

custom-implementation/src/components/theme-switch.tsx

@@ -1,27 +1,4 @@
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const ThemeSwitch = () => {
-  return (
-    <>
-      <button className="fern-search-bar w-full">
-        <span className="search-placeholder">
-          <svg
-            width="15"
-            height="15"
-            viewBox="0 0 15 15"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className="size-5">
-            <path
-              d="M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z"
-              fill="currentColor"
-              fill-rule="evenodd"
-              clip-rule="evenodd"></path>
-          </svg>
-          <span>Search...</span>
-        </span>
-        <span className="keyboard-shortcut-hint">/</span>
-      </button>
-      hello
-    </>
-  )
+  return <>hello</>
 }

custom-implementation/src/main.tsx

@@ -41,7 +41,7 @@ const render = async () => {
   )
 
   // console.log('sibling', search, search?.parentNode)
-  ReactDOM.render(React.createElement(ThemeSwitch), sidenav)
+  ReactDOM.createPortal(React.createElement(ThemeSwitch), sidenav)
 }
 
 let observations = 0