@cerberus-design/react
Version:
The Cerberus Design React component library.
79 lines (76 loc) • 1.98 kB
JavaScript
'use client';
import { jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { cx } from 'styled-system/css';
import { vstack } from 'styled-system/patterns';
import { useNavMenuContext } from '../../context/navMenu.js';
import { Show } from '../show/show.js';
function getPosition(position) {
const defaultPositions = {
left: "auto",
right: "auto",
top: "auto",
bottom: "auto"
};
switch (position) {
case "right":
return { ...defaultPositions, top: "0%", left: "105%" };
case "left":
return { ...defaultPositions, top: "0%", right: "105%" };
case "bottom":
return { ...defaultPositions, top: "110%" };
case "top":
return { ...defaultPositions, bottom: "110%" };
default:
return defaultPositions;
}
}
const navListStyles = vstack({
alignItems: "flex-start",
bgColor: "page.surface.100",
boxShadow: "lg",
gap: "2",
opacity: "0",
p: "4",
position: "absolute",
rounded: "md",
zIndex: "dropdown",
_motionSafe: {
animationName: "zoomIn",
animationDelay: "100ms",
animationDuration: "150ms",
animationFillMode: "both",
animationTimingFunction: "ease-in-out"
},
_positionBottom: {
transformOrigin: "top left"
},
_positionTop: {
transformOrigin: "bottom left"
},
_positionLeft: {
transformOrigin: "top right"
},
_positionRight: {
transformOrigin: "top left"
}
});
function NavMenuList(props) {
const { position, ...nativeProps } = props;
const { menuRef, expanded } = useNavMenuContext();
const locationStyles = useMemo(
() => getPosition(position ?? "bottom"),
[position]
);
return /* @__PURE__ */ jsx(Show, { when: expanded, children: /* @__PURE__ */ jsx(
"ul",
{
...nativeProps,
"data-position": position ?? "bottom",
className: cx(nativeProps.className, navListStyles),
ref: menuRef,
style: locationStyles
}
) });
}
export { NavMenuList, getPosition };