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 clsx from "clsx";
import { ChevronDownIcon } from "../icons/chevron-down"; import { ChevronDownIcon } from "../icons/chevron-down";
import { NavbarPopoverItemType } from "./constants"; import type { NavbarPopoverItemType } from "./constants";
import { PointIcon } from "../icons/popover"; import { PointIcon } from "../icons/popover";
type NavbarPopoverItemProps = { type NavbarPopoverItemProps = {
item: NavbarPopoverItemType; item: NavbarPopoverItemType;
variant?: "landing" | "blog";
}; };
export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({ export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
item, item,
variant = "landing",
children, children,
}) => { }) => {
const [isShowing, setIsShowing] = useState(false); const [isShowing, setIsShowing] = useState(false);
@ -30,10 +32,7 @@ export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
key={item.label} key={item.label}
className={clsx("relative", "inline-flex items-center")} className={clsx("relative", "inline-flex items-center")}
onMouseEnter={() => { onMouseEnter={() => {
timeoutEnterRef.current = setTimeout( timeoutEnterRef.current = setTimeout(() => setIsShowing(true), 210);
() => setIsShowing(true),
210,
);
clearTimeout(timeoutRef.current); clearTimeout(timeoutRef.current);
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@ -48,11 +47,14 @@ export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
"inline-flex items-center", "inline-flex items-center",
"text-sm leading-6", "text-sm leading-6",
"font-normal", "font-normal",
"whitespace-nowrap",
)} )}
> >
<span <span
className={clsx( 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", "transition-colors duration-150 ease-in-out inline-block",
// isPermanentDark && "!text-gray-300", // isPermanentDark && "!text-gray-300",
)} )}
@ -64,7 +66,8 @@ export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
className={clsx( className={clsx(
"transition duration-150 ease-out", "transition duration-150 ease-out",
"-mr-2", "-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" : "", isShowing ? "translate-y-0.5" : "",
)} )}
/> />
@ -82,16 +85,16 @@ export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
<Popover.Panel <Popover.Panel
className={clsx("absolute", "z-50", "top-12", { className={clsx("absolute", "z-50", "top-12", {
"-left-32 center-point": "-left-32 center-point":
item.label === "Community" || item.label === "Community" || item.label === "Company",
item.label === "Company", "left-point": item.label === "Resources",
"left-point": item.label === "Products",
})} })}
> >
<PointIcon <PointIcon
id={item.label} id={item.label}
variant={variant}
className={clsx("absolute", "top-[-9px]", { className={clsx("absolute", "top-[-9px]", {
"left-1/2": item.label !== "Products", "left-1/2": item.label !== "Resources",
"left-12": item.label === "Products", "left-12": item.label === "Resources",
})} })}
style={{ transform: "translateX(-50%)" }} style={{ transform: "translateX(-50%)" }}
/> />
@ -99,8 +102,14 @@ export const NavbarPopoverItem: React.FC<NavbarPopoverItemProps> = ({
className={clsx( className={clsx(
"overflow-hidden", "overflow-hidden",
"rounded-xl", "rounded-xl",
variant === "landing" &&
"border dark:border-gray-700 border-gray-200", "border dark:border-gray-700 border-gray-200",
variant === "landing" &&
"dark:shadow-menu-dark shadow-menu-light", "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} {children}