Bugfix mobile Data Colocation section

Author: hasparus

src/app/conf/_design-system/utils/useOnClickOutside.tsx

@@ -1,15 +1,18 @@
 import { useEffect } from "react"
 
 export function useOnClickOutside(
-  ref: React.RefObject<HTMLElement | null>,
+  refs: React.RefObject<HTMLElement | null>[],
   handler: (event: MouseEvent) => void,
 ) {
   useEffect(() => {
     const listener = (event: MouseEvent) => {
-      if (ref.current && event.composedPath().includes(ref.current)) {
+      const path = event.composedPath()
+      if (refs.every(ref => !ref.current || !path.includes(ref.current))) {
+        console.log("clicked outside", refs)
+        handler(event)
         return
       }
-      handler(event)
+      console.log("clicked inside", refs)
     }
 
     document.addEventListener("click", listener)

src/components/index-page/data-colocation/component-tree.tsx

@@ -1,19 +1,20 @@
 import ModemIcon from "@/app/conf/_design-system/pixelarticons/modem.svg?svgr"
 import clsx from "clsx"
+import { forwardRef } from "react"
 
 const INNER_BOX_SIZE = 16
 
 interface ComponentTreeProps extends React.HTMLAttributes<HTMLDivElement> {
   names: [string, string, string, string]
 }
 
-export function ComponentTree({
-  names,
-  className,
-  ...rest
-}: ComponentTreeProps) {
+export const ComponentTree = forwardRef(function ComponentTree(
+  { names, className, ...rest }: ComponentTreeProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
   return (
     <div
+      ref={ref}
       className={clsx(
         "sector-opacity mx-auto flex max-w-[500px] justify-between [--gap-x:20px] md:gap-x-10 md:[--gap-x:32px] 3xl:gap-x-20",
         className,
@@ -57,7 +58,7 @@ export function ComponentTree({
           className="flex size-12 items-center justify-center bg-neu-100 dark:bg-neu-50"
           data-sector="1"
         >
-          <ModemIcon className="size-6 text-neu-600" />
+          <ModemIcon className="pointer-events-none size-6 text-neu-600" />
         </div>
 
         <div className="h-4 w-px bg-neu-300 dark:bg-neu-100" />
@@ -107,7 +108,7 @@ export function ComponentTree({
       </div>
     </div>
   )
-}
+})
 
 interface NestedBoxProps extends React.HTMLAttributes<HTMLDivElement> {
   bgColor: string

src/components/index-page/data-colocation/data-colocation.css

@@ -27,6 +27,6 @@
   [data-active-sector="2"] & [data-sector="2"],
   [data-active-sector="3"] & [data-sector="3"],
   [data-active-sector="4"] & [data-sector="4"] {
-    @apply ring-2 ring-neu-500 duration-200 ease-out dark:ring-neu-400 dark:ring-offset-neu-0;
+    @apply ring-2 ring-neu-500 ring-offset-neu-0 duration-200 ease-out dark:ring-neu-400;
   }
 }

src/components/index-page/data-colocation/index.tsx

@@ -109,7 +109,7 @@ export function DataColocation() {
     const sectorElement = target?.closest("[data-sector]") as HTMLElement | null
     const sector = sectorElement?.dataset.sector
 
-    if (!sector) return
+    if (sector == null) return
 
     const currentTarget = event.currentTarget
 
@@ -119,7 +119,6 @@ export function DataColocation() {
   }
 
   const unmarkSector = (event: React.MouseEvent<HTMLElement>) => {
-    console.log("unmarkSector", window.matchMedia("(hover: none)").matches)
     if (window.matchMedia("(hover: none)").matches) return
 
     const target =
@@ -143,17 +142,19 @@ export function DataColocation() {
     currentTarget.dataset.activeSector = targetSector
   }
 
-  const ref = useRef<HTMLDivElement>(null)
-  useOnClickOutside(ref, event => {
-    console.log("clicked outside")
-    if (event.currentTarget && event.currentTarget instanceof HTMLElement) {
-      delete event.currentTarget.dataset.activeSector
+  const sectionRef = useRef<HTMLElement>(null)
+  const figureRef = useRef<HTMLElement>(null)
+  const componentTreeRef = useRef<HTMLDivElement>(null)
+  useOnClickOutside([figureRef, componentTreeRef], () => {
+    const section = sectionRef.current
+    if (section && section.dataset.activeSector) {
+      delete section.dataset.activeSector
     }
   })
 
   return (
     <section
-      ref={ref}
+      ref={sectionRef}
       className="gql-container gql-section flex flex-wrap justify-between gap-4 sm:max-xl:gap-y-8 xl:p-24"
       onMouseOver={markSector}
       onMouseOut={unmarkSector}
@@ -169,6 +170,7 @@ export function DataColocation() {
           </p>
         </header>
         <ComponentTree
+          ref={componentTreeRef}
           className="mt-6 md:mt-8 lg:mt-12 xl:mt-16"
           names={[
             "Server",
@@ -178,7 +180,10 @@ export function DataColocation() {
           ]}
         />
       </div>
-      <article className="flex flex-wrap divide-neu-100 dark:divide-neu-50 dark:shadow-[0_.5px_20px_0_hsl(0_0_0/.25)] max-xl:w-full max-lg:gap-4 lg:shadow-[0_.5px_20px_0_hsl(var(--color-neu-400))] lg:dark:bg-neu-50/10 xl:divide-x xl:rounded-lg">
+      <article
+        className="flex flex-wrap divide-neu-100 dark:divide-neu-50 dark:shadow-[0_.5px_20px_0_hsl(0_0_0/.25)] max-xl:w-full max-lg:gap-4 lg:shadow-[0_.5px_20px_0_hsl(var(--color-neu-400))] lg:dark:bg-neu-50/10 xl:divide-x xl:rounded-lg"
+        ref={figureRef}
+      >
         <div className="flex grow flex-col gap-y-4 lg:flex-col-reverse lg:p-4">
           <FigureInfo />
           <div className="sector-ring">