UNPKG

@legion-ui-kit/react-core

Version:

<div align="center"> <img height="108" width="116" src="https://legion.digitaltelkom.id/favicon.svg?v=4643a71fb65fa61a5f2b266b769ea7b1" /> <h1 align="center">Legion UI Kit - React Core</h1> </div>

4 lines (3 loc) 1.58 kB
"use client"; import{jsxs as e,jsx as s}from"react/jsx-runtime";import{useRef as i,useState as n,useEffect as a}from"react";import t from"classnames";import r from"./styles.module.scss.js";import l from"../../hooks/useResizeObserver.js";import{isEmpty as m}from"../../helpers/common.js";const u=u=>{const{activeMainMenuClassName:c,activeMainMenuStyle:h,activeSubMenuClassName:o,activeSubMenuStyle:p,className:b,mainMenuClassName:d,mainMenuStyle:v,menu:g,subMenuClassName:M,subMenuStyle:f,subMenuWrapperClassName:y,subMenuWrapperStyle:N,style:O,..._}=u,S=i(null),C=i(null),j=l(S),A=l(C),{menu:k,subMenu:w,initialOpen:x}=g,{label:z,isActive:W}=k,R=!!w?.some(e=>e.isActive),[q,B]=n({isOpen:x||W||R,height:"var(--sidebar-sizing-height-menu)"}),D=t(r.legion_sidebar_menu,b,{[r.open]:q.isOpen}),E={...O,height:q.height},F=t(r.sidebar_menu,d,{[r.active]:W||R,[c??""]:W||R}),G=t(r.sidebar_submenu_wrapper,y);a(()=>{if(!j)return;const e=q.isOpen&&A?j.height+A.height:j.height;B({isOpen:q.isOpen,height:e})},[j,A,q.isOpen]);return e("div",{className:D,style:E,..._,children:[e("div",{ref:S,className:F,style:{...v,...W||R?h:{}},onClick:()=>{if(!j)return;const e=!q.isOpen&&A?j.height+A.height:j.height;B(s=>({...s,isOpen:!s.isOpen,height:e}))},children:[z,!m(w)&&s("i",{className:r.sidebar_menu_arrow})]}),!m(w)&&s("div",{ref:C,className:G,style:N,children:w?.map((e,i)=>{const{label:n,isActive:a}=e,l=t(r.sidebar_submenu,M,{[r.active]:a,[o??""]:a});return s("div",{className:l,style:{...f,...a?p:{}},children:n},i)})})]})};export{u as default}; //# sourceMappingURL=SidebarMenu.js.map