'use client';
import { useState } from 'react';
import { createPortal } from 'react-dom';
import { IoMenu } from 'react-icons/io5';
import { Menu, SlideOver } from '../../02-molecules';
/**
 * SecondMenu component for rendering a slide-over menu with a specified menu configuration.
 *
 * @component
 * @example
 * // Example usage of SecondMenu component
 * <SecondMenu menu={{ menu props here }} />
 *
 * @param {Object} props - The properties of the SecondMenu component.
 * @param {ComponentProps<typeof Menu>['menu']} props.menu - The menu configuration to be passed to the Menu component.
 *
 * @returns {ReactNode} The rendered SecondMenu component.
 */
export function SecondMenu({ menu }) {
    const [showMenu, setShowMenu] = useState(false);
    return (<>
      <span className="cursor-pointer p-1">
        <IoMenu size={22} onClick={() => setShowMenu(true)}/>
      </span>
      {!!showMenu &&
            createPortal(<SlideOver side="left" closeCallback={() => setShowMenu(false)}>
            <Menu menu={menu} orientation="vertical"/>
          </SlideOver>, document.body)}
    </>);
}
//# sourceMappingURL=SecondMenu.jsx.map