avent-ui/dist/components/ham-menu/src/hammenu-bar.js

The best UI library for Typescript and React

import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useButtonContext } from './hammenu-provider.js';

const HamMenuBar = forwardRef((props, ref) => {
    const { children, className, style, motionProp, as} = props;
    const { isActive } = useButtonContext();
    const Container = as || 'section';
    const MotionStyledMenuContainer = motion(Container);
    const menuSlide = motionProp || {
        initial: {
            x: 'calc(100% + 100px)',
        },
        animate: {
            x: '0',
            transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1] },
        },
        exit: {
            x: 'calc(100% + 100px)',
            transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1] },
        },
    };
    return (jsx(AnimatePresence, { mode: "wait", children: isActive && (jsx(MotionStyledMenuContainer, { variants: menuSlide, initial: "initial", animate: "animate", exit: "exit", ref: ref, style: style, className: `bg-black fixed top-0 right-0 h-screen text-white w-full z-[1] lg:w-[30%] ${className || ''}`, children: jsx("div", { className: `ham-menu-inner-bar overflow-y-scroll p-[40px_10%] h-full flex flex-col justify-between gap-[12px] max-md:p-[60px] max-sm:p-[40px]`, children: children }) })) }));
});
HamMenuBar.displayName = 'HamMenuBar';

export { HamMenuBar, HamMenuBar as default };
//# sourceMappingURL=hammenu-bar.js.map