update ads location (#1168)

* update ads location

* update prettier

* update format

Author: bluebill1049

src/components/CarbonAds.tsx

@@ -0,0 +1,38 @@
+"use client"
+import { useEffect, useRef } from "react"
+
+export const CARBON_SCRIPT_ID = "_carbonads_js"
+const CARBON_SCRIPT_SRC =
+  "https://cdn.carbonads.com/carbon.js?serve=CW7DTKQ7&placement=react-hook-formcom&format=cover"
+
+export function CarbonAds({ id }: { id: string }) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function injectScript() {
+      if (document.getElementById(id)) return
+
+      const script = document.createElement("script")
+      script.id = id
+      script.async = true
+      script.src = CARBON_SCRIPT_SRC
+      script.type = "text/javascript"
+
+      if (containerRef.current) {
+        containerRef.current.appendChild(script)
+      }
+    }
+
+    if (document.readyState === "complete") {
+      injectScript()
+    } else {
+      window.addEventListener("load", injectScript)
+
+      return () => window.removeEventListener("load", injectScript)
+    }
+
+    return
+  }, [id])
+
+  return <div className="carbonAdsContainer" ref={containerRef} />
+}

src/components/Menu/Menu.tsx

@@ -4,6 +4,7 @@ import styles from "./SideMenu.module.css"
 import typographyStyles from "../../styles/typography.module.css"
 import { useRouter } from "next/router"
 import { Pages } from "../../types/types"
+import { CARBON_SCRIPT_ID, CarbonAds } from "@/components/CarbonAds"
 
 function Menu({ pages = [] }: { pages: Pages }) {
   const router = useRouter()
@@ -70,8 +71,9 @@ function Menu({ pages = [] }: { pages: Pages }) {
             )
           })}
         </ul>
-
-        <div id="carbon-cover" />
+        <div className={styles.ads}>
+          <CarbonAds id={CARBON_SCRIPT_ID} />
+        </div>
       </div>
     </aside>
   )

src/components/Menu/SideMenu.module.css

@@ -38,7 +38,7 @@
     max-width: 230px;
     padding: 0;
     overflow-y: auto;
-    height: calc(100vh - 190px);
+    height: calc(100vh - 600px);
     overflow-y: auto;
   }
 
@@ -49,6 +49,10 @@
     display: flex;
   }
 
+  .menu > div > ul > li:last-child {
+    padding-bottom: 0;
+  }
+
   .menu > div > ul > li > a {
     text-decoration: none;
     padding-left: 6px;
@@ -118,6 +122,7 @@
   .menu > div > ul {
     margin-top: 0;
     max-width: 260px;
+    height: calc(100vh - 450px);
   }
 
   .menu > ul {
@@ -204,3 +209,8 @@
 .menu ul li a.isActive {
   border-bottom: 1px solid var(--color-secondary);
 }
+
+.ads {
+  position: absolute;
+  height: 500px;
+}

src/components/layout.css

@@ -945,11 +945,3 @@ pre[class*="language-"] {
     height: auto;
   }
 }
-
-#carbon-responsive {
-  margin: 0 auto 50px;
-}
-
-#carbon-cover {
-  margin: 0 auto 50px;
-}

src/pages/_document.tsx

@@ -13,12 +13,6 @@ export default function Document() {
           strategy="afterInteractive"
           src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
         />
-        <Script
-          async
-          strategy="afterInteractive"
-          src="https://cdn.carbonads.com/carbon.js?serve=CW7DTKQ7&placement=react-hook-formcom&format=cover"
-          id="_carbonads_js"
-        />
         <link
           rel="shortcut icon"
           href="/images/logo/react-hook-form-logo-only.png"