fix: sidenav sibling seperated v2

Author: nikhiltidke101

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

@@ -1,4 +1,27 @@
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ThemeSwitch = ({ sibling }: any) => {
-  return <>{sibling} hello</>
+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
+    </>
+  )
 }

custom-implementation/src/main.tsx

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