From 8374be074b80b9ea43faadca9fd0356767ae8c0f Mon Sep 17 00:00:00 2001
From: Stefan Pejcic <stefan@pejcic.rs>
Date: Thu, 15 May 2025 18:51:33 +0200
Subject: [PATCH] Update navbar-popover-item.tsx

---
 .../common-header/navbar-popover-item.tsx     | 203 +++++++++---------
 1 file changed, 106 insertions(+), 97 deletions(-)

diff --git a/website/src/refine-theme/common-header/navbar-popover-item.tsx b/website/src/refine-theme/common-header/navbar-popover-item.tsx
index 206a4e07..91f0309f 100644
--- a/website/src/refine-theme/common-header/navbar-popover-item.tsx
+++ b/website/src/refine-theme/common-header/navbar-popover-item.tsx
@@ -4,111 +4,120 @@ import { Popover, Transition } from "@headlessui/react";
 import clsx from "clsx";
 
 import { ChevronDownIcon } from "../icons/chevron-down";
-import { NavbarPopoverItemType } from "./constants";
+import type { NavbarPopoverItemType } from "./constants";
 import { PointIcon } from "../icons/popover";
 
 type NavbarPopoverItemProps = {
-    item: NavbarPopoverItemType;
+  item: NavbarPopoverItemType;
+  variant?: "landing" | "blog";
 };
 
 export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
-    item,
-    children,
+  item,
+  variant = "landing",
+  children,
 }) => {
-    const [isShowing, setIsShowing] = useState(false);
-    const timeoutRef = React.useRef(null);
-    const timeoutEnterRef = React.useRef(null);
-    const location = useLocation();
+  const [isShowing, setIsShowing] = useState(false);
+  const timeoutRef = React.useRef(null);
+  const timeoutEnterRef = React.useRef(null);
+  const location = useLocation();
 
-    React.useEffect(() => {
-        setIsShowing(false);
-    }, [location]);
+  React.useEffect(() => {
+    setIsShowing(false);
+  }, [location]);
 
-    return (
-        <Popover
-            id={`popover-${item.label}`}
-            key={item.label}
-            className={clsx("relative", "inline-flex items-center")}
-            onMouseEnter={() => {
-                timeoutEnterRef.current = setTimeout(
-                    () => setIsShowing(true),
-                    210,
-                );
-                clearTimeout(timeoutRef.current);
-            }}
-            onMouseLeave={() => {
-                timeoutRef.current = setTimeout(() => setIsShowing(false), 210);
-                clearTimeout(timeoutEnterRef.current);
-            }}
-        >
-            {() => (
-                <>
-                    <Popover.Button
-                        className={clsx(
-                            "inline-flex items-center",
-                            "text-sm leading-6",
-                            "font-normal",
-                        )}
-                    >
-                        <span
-                            className={clsx(
-                                "text-gray-900 dark:text-gray-300",
-                                "transition-colors duration-150 ease-in-out inline-block",
-                                // isPermanentDark && "!text-gray-300",
-                            )}
-                        >
-                            {item.label}
-                        </span>
-                        <ChevronDownIcon
-                            aria-hidden="true"
-                            className={clsx(
-                                "transition duration-150 ease-out",
-                                "-mr-2",
-                                "text-gray-500 dark:text-gray-400",
-                                isShowing ? "translate-y-0.5" : "",
-                            )}
-                        />
-                    </Popover.Button>
-                    <Transition
-                        as={Fragment}
-                        enter="transition ease-in duration-150"
-                        enterFrom="opacity-0 translate-y-3"
-                        enterTo="opacity-100 translate-y-0"
-                        leave="transition ease-out duration-150"
-                        leaveFrom="opacity-100 translate-y-0"
-                        leaveTo="opacity-0 translate-y-3"
-                        show={isShowing}
-                    >
-                        <Popover.Panel
-                            className={clsx("absolute", "z-50", "top-12", {
-                                "-left-32 center-point":
-                                    item.label === "Community" ||
-                                    item.label === "Company",
-                                "left-point": item.label === "Products",
-                            })}
-                        >
-                            <PointIcon
-                                id={item.label}
-                                className={clsx("absolute", "top-[-9px]", {
-                                    "left-1/2": item.label !== "Products",
-                                    "left-12": item.label === "Products",
-                                })}
-                                style={{ transform: "translateX(-50%)" }}
-                            />
-                            <div
-                                className={clsx(
-                                    "overflow-hidden",
-                                    "rounded-xl",
-                                    "border dark:border-gray-700 border-gray-200",
-                                    "dark:shadow-menu-dark shadow-menu-light",
-                                )}
-                            >
-                                {children}
-                            </div>
-                        </Popover.Panel>
-                    </Transition>
-                </>
+  return (
+    <Popover
+      id={`popover-${item.label}`}
+      key={item.label}
+      className={clsx("relative", "inline-flex items-center")}
+      onMouseEnter={() => {
+        timeoutEnterRef.current = setTimeout(() => setIsShowing(true), 210);
+        clearTimeout(timeoutRef.current);
+      }}
+      onMouseLeave={() => {
+        timeoutRef.current = setTimeout(() => setIsShowing(false), 210);
+        clearTimeout(timeoutEnterRef.current);
+      }}
+    >
+      {() => (
+        <>
+          <Popover.Button
+            className={clsx(
+              "inline-flex items-center",
+              "text-sm leading-6",
+              "font-normal",
+              "whitespace-nowrap",
             )}
-        </Popover>
-    );
+          >
+            <span
+              className={clsx(
+                variant === "landing" && "text-gray-900 dark:text-gray-300",
+                variant === "blog" &&
+                  "text-refine-react-8 dark:text-refine-react-3",
+                "transition-colors duration-150 ease-in-out inline-block",
+                // isPermanentDark && "!text-gray-300",
+              )}
+            >
+              {item.label}
+            </span>
+            <ChevronDownIcon
+              aria-hidden="true"
+              className={clsx(
+                "transition duration-150 ease-out",
+                "-mr-2",
+                variant === "landing" && "text-gray-500 dark:text-gray-400",
+                variant === "blog" && "text-refine-react-4",
+                isShowing ? "translate-y-0.5" : "",
+              )}
+            />
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-in duration-150"
+            enterFrom="opacity-0 translate-y-3"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-out duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-3"
+            show={isShowing}
+          >
+            <Popover.Panel
+              className={clsx("absolute", "z-50", "top-12", {
+                "-left-32 center-point":
+                  item.label === "Community" || item.label === "Company",
+                "left-point": item.label === "Resources",
+              })}
+            >
+              <PointIcon
+                id={item.label}
+                variant={variant}
+                className={clsx("absolute", "top-[-9px]", {
+                  "left-1/2": item.label !== "Resources",
+                  "left-12": item.label === "Resources",
+                })}
+                style={{ transform: "translateX(-50%)" }}
+              />
+              <div
+                className={clsx(
+                  "overflow-hidden",
+                  "rounded-xl",
+                  variant === "landing" &&
+                    "border dark:border-gray-700 border-gray-200",
+                  variant === "landing" &&
+                    "dark:shadow-menu-dark shadow-menu-light",
+                  variant === "blog" &&
+                    "border border-refine-react-3 dark:border-refine-react-6",
+                  variant === "blog" &&
+                    "dark:shadow-menu-blog-dark shadow-menu-blog-light",
+                )}
+              >
+                {children}
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
 };