'use client';
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useEditorMode as r,composeTypographyClassName as l,cls as i,getGlobalColorStateStyle as a,getGlobalColorResponsiveStyle as n}from"@gem-sdk/core";import{useState as o,useRef as s}from"react";import{Transition as p}from"react-transition-group";import{useBodyOverlay as c}from"../../../hooks/useBodyOverlay.js";import g from"../../icons/Dismiss.js";import m from"../../icons/MenuIcon.js";import d from"./MenuMobileItem.js";let duration=300,defaultStyle={transitionDuration:"300ms",opacity:0},transitionStyles={entering:{opacity:1,transform:"translateX(0)"},entered:{opacity:1,transform:"translateX(0)"},exiting:{opacity:0,transform:"translateX(-50px)"},exited:{opacity:0,transform:"translateX(-50px)"},unmounted:{opacity:0}},overlayTransitionStyles={entering:{opacity:1},entered:{opacity:1},exiting:{opacity:0},exited:{opacity:0},unmounted:{opacity:0}},MobileMenu=({menu:u,typography:y,typo:f,arrow:b,menuTextColor:h,menuBg:v,textColor:x,className:w,itemEnableHoverEffect:M})=>{let N=r(),[j,k]=o(!1),S=s(null),O=s(null),z=u?.ROOT;c(j);let C=e=>{"edit"!==N&&k(e)},T=l(f,y);return e("div",{ref:O,className:i("gp-relative gp-z-5 gp-h-full gp-items-center gp-justify-center",w),children:[t("button",{"aria-label":"Menu",onClick:()=>{C(!0)},style:{...a("c",x)},children:t(m,{className:"gp-w-8"})}),t(p,{in:j,timeout:300,nodeRef:S,unmountOnExit:!1,children:r=>e("div",{className:"gp-fixed gp-inset-0 gp-z-[999] gp-overflow-hidden",style:{pointerEvents:j?"auto":"none",visibility:j?"visible":"hidden"},children:[t("div",{"aria-hidden":!0,"aria-label":"Overlay",onClick:()=>{C(!1)},className:"gp-fixed gp-inset-0 gp-z-[999] gp-bg-slate-600/40",style:{...defaultStyle,...overlayTransitionStyles[r]}}),e("div",{className:"gp-relative gp-inset-0 gp-z-[9999] gp-h-full gp-w-full gp-max-w-[400px] gp-overflow-hidden",style:{...defaultStyle,...transitionStyles[r],...n("bgc",v)},children:[t("div",{className:"gp-flex gp-h-10 gp-items-center gp-border-b gp-pl-4",children:t("button",{onClick:()=>C(!1),className:"gp-ml-auto gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",style:{...a("c",h)},children:t(g,{className:"gp-w-5"})})}),t("ul",{role:"menu",className:i("gp-w-full scrollbar:!gp-h-1.5 scrollbar:!gp-w-1.5 scrollbar:gp-bg-transparent scrollbar-track:!gp-rounded scrollbar-track:!gp-bg-slate-100 scrollbar-thumb:!gp-rounded scrollbar-thumb:!gp-bg-slate-300",T),ref:S,style:{...n("bgc",v)},children:z?.childrens?.map(e=>t(d,{id:e,menu:u,arrow:b,depth:0,maxDepth:2,menuBg:v,menuTextColor:h,closeMenu:()=>C(!1),typo:f,typography:y,enableHoverEffect:M},e))})]})]})})]})};export{MobileMenu as default};
