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

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

@ -4,111 +4,120 @@ 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,
children, variant = "landing",
children,
}) => { }) => {
const [isShowing, setIsShowing] = useState(false); const [isShowing, setIsShowing] = useState(false);
const timeoutRef = React.useRef(null); const timeoutRef = React.useRef(null);
const timeoutEnterRef = React.useRef(null); const timeoutEnterRef = React.useRef(null);
const location = useLocation(); const location = useLocation();
React.useEffect(() => { React.useEffect(() => {
setIsShowing(false); setIsShowing(false);
}, [location]); }, [location]);
return ( return (
<Popover <Popover
id={`popover-${item.label}`} id={`popover-${item.label}`}
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), clearTimeout(timeoutRef.current);
210, }}
); onMouseLeave={() => {
clearTimeout(timeoutRef.current); timeoutRef.current = setTimeout(() => setIsShowing(false), 210);
}} clearTimeout(timeoutEnterRef.current);
onMouseLeave={() => { }}
timeoutRef.current = setTimeout(() => setIsShowing(false), 210); >
clearTimeout(timeoutEnterRef.current); {() => (
}} <>
> <Popover.Button
{() => ( className={clsx(
<> "inline-flex items-center",
<Popover.Button "text-sm leading-6",
className={clsx( "font-normal",
"inline-flex items-center", "whitespace-nowrap",
"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>
</>
)} )}
</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>
);
}; };