UniqueSoft/openpanel
2
0
Fork 0
mirror of https://github.com/stefanpejcic/openpanel synced 2025-06-26 18:28:26 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Update navbar-popover-item.tsx

Browse Source
This commit is contained in:
Stefan Pejcic 2025-05-15 18:51:33 +02:00 committed by GitHub
parent b287f798e5
commit 8374be074b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 106 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
website/src/refine-theme/common-header/navbar-popover-item.tsx
View File

@ -4,15 +4,17 @@ 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;
variant?: "landing" | "blog";
};
export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
item,
variant = "landing",
children,
}) => {
const [isShowing, setIsShowing] = useState(false);
@ -30,10 +32,7 @@ export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
key={item.label}
className={clsx("relative", "inline-flex items-center")}
onMouseEnter={() => {
timeoutEnterRef.current = setTimeout(
() => setIsShowing(true),
210,
);
timeoutEnterRef.current = setTimeout(() => setIsShowing(true), 210);
clearTimeout(timeoutRef.current);
}}
onMouseLeave={() => {
@ -48,11 +47,14 @@ export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
"inline-flex items-center",
"text-sm leading-6",
"font-normal",
"whitespace-nowrap",
)}
>
<span
className={clsx(
"text-gray-900 dark:text-gray-300",
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",
)}
@ -64,7 +66,8 @@ export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
className={clsx(
"transition duration-150 ease-out",
"-mr-2",
"text-gray-500 dark:text-gray-400",
variant === "landing" && "text-gray-500 dark:text-gray-400",
variant === "blog" && "text-refine-react-4",
isShowing ? "translate-y-0.5" : "",
)}
/>
@ -82,16 +85,16 @@ export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
<Popover.Panel
className={clsx("absolute", "z-50", "top-12", {
"-left-32 center-point":
item.label === "Community" ||
item.label === "Company",
"left-point": item.label === "Products",
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 !== "Products",
"left-12": item.label === "Products",
"left-1/2": item.label !== "Resources",
"left-12": item.label === "Resources",
})}
style={{ transform: "translateX(-50%)" }}
/>
@ -99,8 +102,14 @@ export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
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}