import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import React__default, { useState, useEffect, useMemo, createElement, useRef } from 'react';
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
import { createPortal } from 'react-dom';
import CollapseBox from '../CollapseBox/index.js';
import Down from '@iam-com/icons/Down';
import * as iconList from '@iam-com/icons';
import { UUID, DeepClone } from '@iam-com/lib';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import MenuMoreLine from '@iam-com/icons/IndentRightFill';
import MenuLessLine from '@iam-com/icons/IndentLeftFill';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import 'react-transition-group';
import '../_verture/util-7e1fb1e2.js';

var Logo = function Logo(props) {
  var _props$expansion = props.expansion,
    expansion = _props$expansion === void 0 ? true : _props$expansion,
    render = props.render,
    className = props.className;
  /**
   * 处理内容
   * @return {ReactNode}
   */
  var handContent = function handContent() {
    if (render) return render;
  };
  /**
   * 处理className
   * @return class名
   */
  var handClass = function handClass() {
    var str = 'menu-logo';
    if (className) str += ' ' + className;
    if (!expansion) str += ' menu-logo-shrink';
    return str;
  };
  return jsx("div", Object.assign({
    className: handClass()
  }, {
    children: handContent()
  }));
};

/**
 * @description 处理菜单标签
 * 默认div,最后一级为a标签
 * */
var handMenuEle = function handMenuEle(children) {
  var Ele = 'div';
  var lastOne = !children || children.length === 0;
  if (lastOne) {
    Ele = 'a';
  }
  return Ele;
};
/**
 * 处理菜单href地址
 * */
var handHref = function handHref() {
  var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var path = arguments.length > 1 ? arguments[1] : undefined;
  var href = arguments.length > 2 ? arguments[2] : undefined;
  var lastOne = !children || children.length === 0;
  if (lastOne) {
    return {
      href: href ? href : '#' + path
    };
  }
  return {};
};
// 下拉展开
var VerticalMenuListItem = function VerticalMenuListItem(props) {
  var label = props.label;
    props.type;
    var path = props.path,
    href = props.href,
    icon = props.icon,
    children = props.children,
    className = props.className,
    _props$level = props.level,
    level = _props$level === void 0 ? 1 : _props$level,
    _props$selectMenu = props.selectMenu,
    selectMenu = _props$selectMenu === void 0 ? '' : _props$selectMenu,
    idMenuLast = props.idMenuLast,
    onClickMenu = props.onClickMenu,
    _props$shrinkOthers = props.shrinkOthers,
    shrinkOthers = _props$shrinkOthers === void 0 ? true : _props$shrinkOthers;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    openCom = _useState2[0],
    setOpenCom = _useState2[1];
  useEffect(function () {
    var selectMenuLast = idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
    if (selectMenuLast && selectMenuLast.indexOf(path) !== -1 && selectMenuLast.length > 1) {
      setOpenCom(true);
    } else {
      // 选中菜单,收起其他展开项
      if (shrinkOthers) setOpenCom(false);
    }
  }, [idMenuLast, selectMenu, path]);
  /** 点击菜单 */
  var clickMenu = function clickMenu(e) {
    if (children && children.length > 0) {
      onClickMenu && onClickMenu(false);
      return setOpenCom(!openCom);
    }
    onClickMenu && onClickMenu(props);
    e.preventDefault();
  };
  /**
   * 处理图标
   * @return {ReactNode}
   */
  var handIcon = function handIcon() {
    if (icon) {
      var iconCom = iconList[icon];
      if (iconCom) return jsx("span", Object.assign({
        className: "menu-item-icon"
      }, {
        children: iconCom()
      }));
      return jsx("span", Object.assign({
        className: "menu-item-icon"
      }, {
        children: icon
      }));
    }
    //return <Down className="opacity-pos-svg"/>; // 占位
  };
  /**
   * 处理箭头
   * @return {ReactNode}
   */
  var handArrow = function handArrow() {
    if (children && children.length > 0) return jsx(Down, {});
    return jsx(Down, {
      className: "opacity-pos-svg"
    }); // 占位
  };
  /**
   * 处理class
   * @return class名
   */
  var handClass = function handClass() {
    var str = 'vertical-menu-list-item';
    if (openCom) str += ' vertical-menu-list-item-open';
    if (className) str += ' ' + className;
    var selectMenuLast = idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
    if (selectMenuLast) {
      var index = selectMenuLast.indexOf(path);
      if (index !== -1) {
        str += ' vertical-menu-list-item-select'; // 选中
        if (index === selectMenuLast.length - 1) {
          str += ' vertical-menu-list-item-select-last'; // 最后一项
        }

        if (!openCom) {
          // 收起且选中
          str += ' vertical-menu-list-item-select-retract'; // 选中收起转态
        }
      }
    }

    return str;
  };
  /**
   * 处理样式
   */
  var handStyle = function handStyle() {
    var json = {
      paddingRight: '12px'
    };
    if (level >= 0) {
      json.paddingLeft = (level - 1) * 32 + 16 + 'px';
    } else {
      json.paddingLeft = '16px';
    }
    return json;
  };
  // itemMemo
  var ItemMemo = useMemo(function () {
    var Ele = handMenuEle(children);
    return jsxs(Ele, Object.assign({
      onClick: clickMenu,
      className: "vertical-menu-list-item-content",
      style: handStyle()
    }, handHref(children, path, href), {
      children: [handIcon(), jsx("span", Object.assign({
        className: "menu-item-label"
      }, {
        children: label
      })), jsx("span", Object.assign({
        className: "menu-item-arrow"
      }, {
        children: handArrow()
      }))]
    }));
  }, [children, onClickMenu, openCom, level, icon, label, path, href]);
  // Collapse
  var CollapseMemo = useMemo(function () {
    return jsx(CollapseBox, Object.assign({
      in: openCom,
      className: "li-collapse",
      timeout: "auto",
      unmountOnExit: true
    }, {
      children: children && children.length > 0 && children.map(function (item, index) {
        return jsx(VerticalMenuListItem, Object.assign({}, item, {
          level: level + 1,
          idMenuLast: idMenuLast,
          selectMenu: selectMenu,
          onClickMenu: onClickMenu,
          shrinkOthers: shrinkOthers
        }), index);
      })
    }));
  }, [openCom, children, level, idMenuLast, selectMenu, onClickMenu, shrinkOthers]);
  return jsxs("div", Object.assign({
    className: handClass()
  }, {
    children: [ItemMemo, CollapseMemo]
  }));
};
// 弹出菜单
var MenuItemPopper = function MenuItemPopper(props) {
  var _props$open = props.open,
    open = _props$open === void 0 ? false : _props$open,
    anchorEl = props.anchorEl,
    idMenuLast = props.idMenuLast,
    _props$selectMenu2 = props.selectMenu,
    selectMenu = _props$selectMenu2 === void 0 ? '' : _props$selectMenu2,
    onClickMenu = props.onClickMenu,
    _props$list = props.list,
    list = _props$list === void 0 ? [] : _props$list,
    onMouseEnter = props.onMouseEnter,
    onMouseLeave = props.onMouseLeave,
    onMouseEnterBus = props.onMouseEnterBus,
    onMouseLeaveBus = props.onMouseLeaveBus,
    _props$level2 = props.level,
    level = _props$level2 === void 0 ? 1 : _props$level2,
    color = props.color,
    className = props.className;
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    openChild = _useState4[0],
    setOpenChild = _useState4[1]; // 是否渲染子级
  var _useState5 = useState(''),
    _useState6 = _slicedToArray(_useState5, 2),
    childPos = _useState6[0],
    setChildPos = _useState6[1]; // 子级定位元素
  var _useState7 = useState([]),
    _useState8 = _slicedToArray(_useState7, 2),
    childList = _useState8[0],
    setChildList = _useState8[1]; // 子级列表
  var _useState9 = useState({}),
    _useState10 = _slicedToArray(_useState9, 2),
    posStyle = _useState10[0],
    setPosStyle = _useState10[1]; // 定位元素样式
  var _useState11 = useState({}),
    _useState12 = _slicedToArray(_useState11, 1),
    timerJson = _useState12[0];
  var boxRef = useRef(null);
  useEffect(function () {
    return function () {
      clearTimeout(timerJson.leaveBox);
      clearTimeout(timerJson.closeTimer);
      clearTimeout(timerJson.styleTimer);
    };
  }, []);
  useEffect(function () {
    handPosStyle();
  }, [open, anchorEl]);
  /**
   * 设置定位样式
   * */
  var handPosStyle = function handPosStyle() {
    clearTimeout(timerJson.styleTimer);
    timerJson.styleTimer = setTimeout(function () {
      if (anchorEl && open && boxRef.current) {
        // 定位容器
        var anchorElDom = document.querySelector("[data-menu-id=".concat(anchorEl, "]"));
        var reactDom = anchorElDom.getBoundingClientRect();
        var top = reactDom.top;
        // 不是第一级的弹窗向上便宜8px
        if (level !== 1) {
          top = top - 8;
        }
        // 第一级,且只有一级
        if (handTooltip()) {
          top = top + 4;
        }
        var bodyHeight = document.body.clientHeight;
        var selfHeight = boxRef.current.clientHeight;
        if (selfHeight + top > bodyHeight) {
          top = top - (selfHeight + top - bodyHeight) - 20; // 多减20的余量
        }

        if (top < 0) {
          top = 0;
        }
        setPosStyle({
          position: 'absolute',
          left: '0',
          top: '0',
          transform: "translate3d(".concat(reactDom.right, "px, ").concat(top, "px, 0px)")
        });
      }
    });
  };
  /**
   * 判断是否是第一级,且没有子级
   * */
  var handTooltip = function handTooltip() {
    // 第一层,长度为1,且没有父级,,子级也没有
    if (level === 1 && list.length === 1 && list[0]._paraui_menu_first && (!list[0].children || list[0].children.length === 0)) {
      return true;
    }
    return false;
  };
  /**
   * 处理MenuPopover样式类名
   * @return {string}
   */
  var handPopoverClass = function handPopoverClass() {
    var str = $prefixCls + '-vertical-menu-item-popper';
    if (color) str += " ".concat($prefixCls, "-vertical-menu-item-popper-").concat(color);
    if (color === 'deep') str += " ".concat($prefixCls, "-scrollbar-small-deep");else str += " ".concat($prefixCls, "-scrollbar-small");
    // 第一级,且只有一项
    if (handTooltip()) {
      str += " ".concat($prefixCls, "-vertical-menu-item-popper-tooltip");
    }
    if (className) str += ' ' + className;
    return str;
  };
  /**
   * 处理子菜单项class
   * @param item {MenuChildrenProps} 子菜单详情
   * @return {string}
   */
  var handItemClass = function handItemClass(item) {
    var str = 'menu-item-popper-content-item';
    var selectMenuLast = idMenuLast && idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
    if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) {
      str += ' menu-item-popper-content-item-select';
    }
    return str;
  };
  /**
   * 处理图标
   * @param icon 图标信息
   * @return {ReactNode}
   */
  var handIcon = function handIcon(icon) {
    if (icon) {
      var iconCom = iconList[icon];
      if (iconCom) return jsx("span", Object.assign({
        className: "menu-item-icon"
      }, {
        children: iconCom()
      }));
      return jsx("span", Object.assign({
        className: "menu-item-icon"
      }, {
        children: icon
      }));
    }
    //return <Down className="opacity-pos-svg"/>; // 占位
  };
  /**
   * 处理箭头
   * @param children 详细
   * @return {ReactNode}
   */
  var handArrow = function handArrow(children) {
    if (children && children.length > 0) return jsx(Down, {});
    return jsx(Down, {
      className: "opacity-pos-svg"
    }); // 占位
  };
  /**
   * 点击菜单
   * @param item {MenuChildrenProps} 当前项参数
   * @param e 当前元素
   */
  var clickMenu = function clickMenu(item) {
    return function (e) {
      e.preventDefault();
      if (item.children && item.children.length > 0) return;
      onClickMenu && onClickMenu(item);
    };
  };
  /**
   * 鼠标移入大容器
   * */
  var onMouseEnterBox = function onMouseEnterBox() {
    if (handTooltip()) return;
    if (level == 1) {
      // 关闭收缩按钮移出事件
      onMouseEnter && onMouseEnter();
    } else {
      onMouseEnterBus && onMouseEnterBus();
    }
  };
  /**
   * 鼠标移出大容器
   * */
  var onMouseLeaveBox = function onMouseLeaveBox() {
    if (handTooltip()) return;
    clearTimeout(timerJson.leaveBox);
    timerJson.leaveBox = setTimeout(function () {
      if (level === 1) {
        onMouseLeave && onMouseLeave();
      } else {
        onMouseLeaveBus && onMouseLeaveBus();
      }
    }, 50);
  };
  /**
   * 移入事件 传递 给子级
   * 用来通知上级
   * */
  var onMouseEnterBusCom = function onMouseEnterBusCom() {
    // 移入子级的大容器里面, 需要通知上级不关闭容器, 清楚关闭定时器
    clearTimeout(timerJson.leaveBox);
  };
  /**
   * 移出事件 传递 给子级
   * 用来通知上级
   * */
  var onMouseLeaveBusCom = function onMouseLeaveBusCom() {
    setOpenChild(false);
    setChildPos('');
    setChildList([]);
    onMouseLeave && onMouseLeave();
  };
  /**
   * 移入子级
   * @param item {MenuChildrenProps} 移入当前项参数
   * @param index {number} 移入当前项下标
   * @param e 当前元素
   */
  var onMouseEnterChildCom = function onMouseEnterChildCom(item) {
    return function (e) {
      handClassItemHover(e.target);
      setOpenChild(false);
      clearTimeout(timerJson.closeTimer);
      timerJson.closeTimer = setTimeout(function () {
        var childListHand = item.children || [];
        if (childListHand.length > 0) {
          setOpenChild(true);
          setChildPos(e.target.getAttribute('data-menu-id'));
          setChildList(item.children || []);
        } else {
          setOpenChild(false);
          setChildPos('');
          setChildList([]);
        }
      });
    };
  };
  /**
   * 移出子级
   * @param item {MenuChildrenProps} 移入当前项参数
   * @param index {number} 移入当前项下标
   * @param e 当前元素
   */
  var onMouseLeaveChildCom = function onMouseLeaveChildCom(item) {
    return function (e) {
      //console.log('移出子级')
    };
  };
  /**
   * 处理移入的class
   * */
  var handClassItemHover = function handClassItemHover(target) {
    if (boxRef) {
      var boxDom = boxRef.current;
      var hoverDom = boxDom.querySelector('.menu-item-popper-content-item-hover');
      if (hoverDom) {
        hoverDom.classList.remove('menu-item-popper-content-item-hover');
      }
    }
    if (target) {
      target.classList.add('menu-item-popper-content-item-hover');
    }
  };
  /** 内容 */
  var ContentMemo = useMemo(function () {
    return jsx("div", Object.assign({
      className: "menu-item-popper-content",
      onMouseEnter: onMouseEnterBox,
      onMouseLeave: onMouseLeaveBox,
      ref: boxRef
    }, {
      children: list.map(function (item, index) {
        var Ele = handMenuEle(item.children);
        return jsx("div", Object.assign({
          className: handItemClass(item),
          onMouseEnter: onMouseEnterChildCom(item),
          onMouseLeave: onMouseLeaveChildCom()
        }, {
          children: jsxs(Ele, Object.assign({
            className: "menu-item-popper-content-item-content",
            "data-menu-id": item._paraui_menu_id,
            onClick: clickMenu(item)
          }, handHref(item.children, item.path, item.href), {
            children: [handIcon(item.icon), jsx("span", Object.assign({
              className: "menu-item-label"
            }, {
              children: item.label
            })), jsx("span", Object.assign({
              className: "menu-item-arrow"
            }, {
              children: handArrow(item.children)
            }))]
          }))
        }), index);
      })
    }));
  }, [list, onClickMenu, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level]);
  // 计算定位
  var MenuPopover = function MenuPopover() {
    return jsx("div", Object.assign({
      className: handPopoverClass(),
      style: posStyle
    }, {
      children: ContentMemo
    }));
  };
  var MenuPortalMemo = useMemo(function () {
    return jsx(Fragment, {
      children: /*#__PURE__*/createPortal(jsx(MenuPopover, {}), document.getElementsByTagName('body')[0])
    });
  }, [posStyle, list, onClickMenu, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level, className, color]);
  return jsxs(Fragment, {
    children: [MenuPortalMemo, openChild && jsx(MenuItemPopper, {
      open: openChild,
      anchorEl: childPos,
      list: childList,
      idMenuLast: idMenuLast,
      selectMenu: selectMenu,
      onClickMenu: onClickMenu,
      onMouseEnter: onMouseEnter,
      onMouseLeave: onMouseLeave,
      onMouseEnterBus: onMouseEnterBusCom,
      onMouseLeaveBus: onMouseLeaveBusCom,
      color: color,
      level: level + 1
    })]
  });
};
/**
 * 提取坐标数字
 * @param transform {string}
 * @return {number}
 */
var getTransformY = function getTransformY(transform) {
  if (!transform) return 0;
  try {
    var transformY = transform.match(/translate3d\((.*)px, (.*)px, (.*)px\)/);
    return Number(transformY && transformY[2]);
  } catch (e) {}
  return 0;
};
var VerticalMenuList = function VerticalMenuList(props) {
  var list = props.list,
    _props$expansion = props.expansion,
    expansion = _props$expansion === void 0 ? true : _props$expansion,
    _props$selectMenu3 = props.selectMenu,
    selectMenu = _props$selectMenu3 === void 0 ? '' : _props$selectMenu3,
    onClickMenu = props.onClickMenu,
    className = props.className,
    _props$shrinkOthers2 = props.shrinkOthers,
    shrinkOthers = _props$shrinkOthers2 === void 0 ? true : _props$shrinkOthers2,
    color = props.color;
  // const classes: any = useStyles(props);
  var _useState13 = useState([]),
    _useState14 = _slicedToArray(_useState13, 2),
    listCom = _useState14[0],
    setListCom = _useState14[1]; // 菜单数据
  var _useState15 = useState(false),
    _useState16 = _slicedToArray(_useState15, 2),
    openChild = _useState16[0],
    setOpenChild = _useState16[1]; // 侧边展开子菜单
  var _useState17 = useState(null),
    _useState18 = _slicedToArray(_useState17, 2),
    openChildIndex = _useState18[0],
    setOpenChildIndex = _useState18[1]; // 侧边菜单第几项
  var _useState19 = useState(''),
    _useState20 = _slicedToArray(_useState19, 2),
    childPos = _useState20[0],
    setChildPos = _useState20[1]; // 侧边子菜单定位
  var _useState21 = useState([]),
    _useState22 = _slicedToArray(_useState21, 2),
    childList = _useState22[0],
    setChildList = _useState22[1]; // 侧边子菜单数据
  var _useState23 = useState(""),
    _useState24 = _slicedToArray(_useState23, 2),
    selectMenuCom = _useState24[0],
    setSelectMenuCom = _useState24[1]; // 当前选中菜单id
  //const [jsonMenu, setJsonMenu] = useState<any>({}); // 菜单map
  var _useState25 = useState({}),
    _useState26 = _slicedToArray(_useState25, 2),
    idMenuLast = _useState26[0],
    setIdMenuLast = _useState26[1]; // 最后一级菜单所有层级id
  var _useState27 = useState({
      prev: false,
      next: false
    }),
    _useState28 = _slicedToArray(_useState27, 2),
    flipDisable = _useState28[0],
    setFlipDisable = _useState28[1];
  var _useState29 = useState({}),
    _useState30 = _slicedToArray(_useState29, 1),
    timerJson = _useState30[0];
  var listRef = React__default.useRef();
  useEffect(function () {
    return function () {
      // 防止组件销毁设置元素报错
      clearTimeout(timerJson.arrowTimer);
      clearTimeout(timerJson.leaveTimer);
      clearTimeout(timerJson.enterTimer);
    };
  }, []);
  useEffect(function () {
    // 浅拷贝一层,防止数据外部使用用了同一份数据,导致收缩的时候定位错误
    var listArr = list || [];
    var arr = [];
    for (var i = 0, l = listArr.length; i < l; i++) {
      var item = listArr[i];
      arr.push(Object.assign({}, item));
    }
    handList(arr);
  }, [list]);
  useEffect(function () {
    isShowArrow();
  }, [listCom]);
  useEffect(function () {
    if (selectMenu !== selectMenuCom) setSelectMenuCom(selectMenu);
    isShowArrow();
  }, [selectMenu]);
  /** 初始化判断是否显示箭头 */
  var isShowArrow = function isShowArrow() {
    clearTimeout(timerJson.arrowTimer);
    timerJson.arrowTimer = setTimeout(function () {
      var _getLimit = getLimit(),
        min = _getLimit.min,
        max = _getLimit.max;
      var y = getTransformY(listRef.current.style.transform);
      setFlipDisable({
        prev: y !== min,
        next: y > max
      });
    }, 300);
  };
  /**
   * 鼠标滚动应用列表
   * @param e 元素
   */
  var handleScroll = function handleScroll(e) {
    var deltaY = e.deltaY;
    var y = getTransformY(listRef.current.style.transform);
    y -= deltaY;
    setTransform(y);
  };
  /**
   * 翻页点击
   * @param type {'prev' | 'next'} 点击类型
   */
  var flip = function flip(type) {
    return function () {
      var height = 100;
      var y = getTransformY(listRef.current.style.transform);
      switch (type) {
        case "next":
          y -= height;
          break;
        case "prev":
          y += height;
          break;
      }
      setTransform(y);
    };
  };
  /**
   * 设置上下平移
   * @param y {number} 滚动距离
   */
  var setTransform = function setTransform(y) {
    var _getLimit2 = getLimit(),
      min = _getLimit2.min,
      max = _getLimit2.max;
    if (y > min) y = min;
    if (y < max) y = max;
    setFlipDisable({
      prev: y !== min,
      next: y > max
    });
    listRef.current.style.transform = "translate3d(0, ".concat(y, "px, 0)");
  };
  /**
   * 返回滚动限制
   * @return {object} 滚动限制
   */
  var getLimit = function getLimit() {
    var parentHeight = listRef.current.parentNode.getBoundingClientRect().height;
    var min = 0;
    var max = -(listRef.current.getBoundingClientRect().height - parentHeight);
    if (parentHeight > listRef.current.getBoundingClientRect().height) {
      max = 0;
    }
    return {
      min: min,
      max: max
    };
  };
  /**
   * 处理菜单数据
   * @param dataArr {MenuChildrenProps} 菜单数据
   */
  var handList = function handList(dataArr) {
    var idMap = {}; // 所有id,层级map
    var idMapLast = {}; // 最后一层菜单,层级map
    var recurrenceFunc = function recurrenceFunc(daraChildArr, parent) {
      for (var i = 0, l = daraChildArr.length; i < l; i++) {
        var item = daraChildArr[i];
        var path = item.path;
        item._paraui_menu_id = '_paraui_menu_id_' + UUID(); // 设置唯一id
        if (parent) {
          var idList = DeepClone(idMap[parent.path] || []);
          idList.push(path);
          idMap[path] = _toConsumableArray(idList);
        } else {
          // 不存在parent,第一级
          idMap[path] = [path];
          item._paraui_menu_first = true;
        }
        if (item.children && item.children.length > 0) {
          recurrenceFunc(item.children, item);
        } else {
          // 不存在children,为点击菜单选项
          idMapLast[path] = idMap[path];
        }
      }
    };
    recurrenceFunc(dataArr);
    setIdMenuLast(idMapLast);
    setListCom(dataArr);
  };
  /**
   * 鼠标移入收缩
   * @param item {MenuChildrenProps} 移入当前项参数
   * @param index {number} 移入当前项下标
   * @param e 当前元素
   */
  var mouseEnterShrinkFunc = function mouseEnterShrinkFunc(item, index) {
    return function (e) {
      setOpenChild(false);
      clearTimeout(timerJson.enterTimer);
      timerJson.enterTimer = setTimeout(function () {
        clearTimeout(timerJson.leaveTimer);
        var childListHand = [item];
        if (item.children && item.children.length > 0) {
          childListHand = item.children;
        }
        setOpenChildIndex(index);
        setChildPos(e.target.getAttribute('data-menu-id'));
        setChildList(childListHand);
        setOpenChild(true);
      });
    };
  };
  /**
   * 鼠标移出收缩
   * @param item {MenuChildrenProps} 移出当前项参数
   * @param e 当前元素
   */
  var mouseLeaveShrinkFunc = function mouseLeaveShrinkFunc(item) {
    return function (e) {
      leaveFunc();
    };
  };
  /** 移出事件 */
  var leaveFunc = function leaveFunc() {
    clearTimeout(timerJson.leaveTimer);
    timerJson.leaveTimer = setTimeout(function () {
      closeShrink();
    }, 50);
  };
  /** 移入子菜单 */
  var onMouseEnterChild = function onMouseEnterChild() {
    clearTimeout(timerJson.leaveTimer);
  };
  /** 移出子菜单 */
  var onMouseLeaveChild = function onMouseLeaveChild() {
    leaveFunc();
  };
  /**
   * 关闭收缩弹窗
   * */
  var closeShrink = function closeShrink() {
    setOpenChild(false);
    setChildPos('');
    setChildList([]);
    setOpenChildIndex(null);
  };
  /**
   * 处理图标
   * @param item {MenuChildrenProps} 当前项参数
   * @return {ReactNode}
   */
  var handShrink = function handShrink(item) {
    var icon = item.icon,
      label = item.label;
    if (icon) {
      var iconCom = iconList[icon];
      if (iconCom) return iconCom();
      return icon;
    }
    if (typeof label === 'string') {
      return label[0];
    } else {
      return label;
    }
  };
  /**
   * 点击收缩菜单时候的按钮
   * */
  var clickShrinkMenu = function clickShrinkMenu(item) {
    return function (e) {
      if (!item.children || item.children.length === 0) {
        var handItem = Object.assign({}, item);
        delete handItem._paraui_menu_id;
        onClickMenu && onClickMenu(handItem);
      }
      e.preventDefault();
    };
  };
  /**
   * 点击菜单
   * @param item {MenuChildrenProps | false} 当前项参数
   */
  var clickMenu = function clickMenu(item) {
    if (item === false) {
      return isShowArrow();
    }
    closeShrink();
    var handItem = Object.assign({}, item);
    delete handItem._paraui_menu_id;
    onClickMenu && onClickMenu(handItem);
  };
  /**
   * 处理收缩菜单class
   * @param item {MenuChildrenProps} 当前项参数
   * @param index {number} 下标
   * @return {string} 返回图标元素
   */
  var handShrinkClass = function handShrinkClass(item, index) {
    var str = 'vertical-menu-list-item-shrink';
    var selectMenuLast = idMenuLast[selectMenuCom]; // 当前选中菜单的 所有上下级 一条线
    if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) str += ' vertical-menu-list-item-shrink-select';
    if (openChildIndex === index) str += ' vertical-menu-list-item-shrink-hover';
    return str;
  };
  /**
   * 处理class
   * @return {string} class名
   */
  var handClass = function handClass() {
    var str = 'vertical-menu-list';
    if (className) str += ' ' + className;
    return str;
  };
  /** 展开memo */
  var ExpansionMemo = useMemo(function () {
    if (expansion) {
      return listCom.map(function (item, index) {
        return /*#__PURE__*/createElement(VerticalMenuListItem, Object.assign({}, item, {
          key: index,
          level: 1,
          idMenuLast: idMenuLast,
          selectMenu: selectMenuCom,
          onClickMenu: clickMenu,
          shrinkOthers: shrinkOthers
        }));
      });
    }
  }, [expansion, listCom, idMenuLast, selectMenuCom, onClickMenu, shrinkOthers]);
  /** 收缩memo */
  var ShrinkMemo = useMemo(function () {
    if (expansion) return null;
    return listCom.map(function (item, index) {
      var Ele = handMenuEle(item.children);
      return jsx(Ele, Object.assign({
        className: handShrinkClass(item, index),
        onMouseEnter: mouseEnterShrinkFunc(item, index),
        onMouseLeave: mouseLeaveShrinkFunc(),
        "data-menu-id": item._paraui_menu_id,
        onClick: clickShrinkMenu(item)
      }, handHref(item.children, item.path, item.href), {
        children: jsx("span", {
          children: handShrink(item)
        })
      }), index);
    });
  }, [expansion, listCom, idMenuLast, selectMenuCom, openChildIndex]);
  /** 向上翻页 */
  var PrevScroll = useMemo(function () {
    return jsx(Fragment, {
      children: flipDisable.prev && jsx("span", Object.assign({
        className: "scroll-top"
      }, {
        children: jsx(Down, {
          onClick: flip('prev')
        })
      }))
    });
  }, [flipDisable]);
  /** 向下翻页 */
  var NextScroll = useMemo(function () {
    return jsx(Fragment, {
      children: flipDisable.next && jsx("span", Object.assign({
        className: "scroll-bottom"
      }, {
        children: jsx(Down, {
          onClick: flip('next')
        })
      }))
    });
  }, [flipDisable]);
  /** 收缩弹出框菜单 */
  var MenuItemPopperMemo = useMemo(function () {
    return jsx(Fragment, {
      children: openChild && jsx(MenuItemPopper, {
        open: openChild,
        anchorEl: childPos,
        list: childList,
        idMenuLast: idMenuLast,
        selectMenu: selectMenuCom,
        onClickMenu: clickMenu,
        onMouseEnter: onMouseEnterChild,
        onMouseLeave: onMouseLeaveChild,
        color: color,
        level: 1
      })
    });
  }, [openChild, childPos, childList, idMenuLast, selectMenuCom, onClickMenu, timerJson, color]);
  return jsxs(Fragment, {
    children: [jsxs("div", Object.assign({
      className: handClass(),
      onWheel: function onWheel(e) {
        return handleScroll(e);
      }
    }, {
      children: [PrevScroll, jsx("div", Object.assign({
        className: "vertical-menu-list-box"
      }, {
        children: jsxs("div", Object.assign({
          className: "vertical-menu-list-box-srcoll",
          ref: listRef
        }, {
          children: [ExpansionMemo, ShrinkMemo]
        }))
      })), NextScroll]
    })), MenuItemPopperMemo]
  });
};

var FooterExpansion = function FooterExpansion(props) {
  var _props$expansion = props.expansion,
    expansion = _props$expansion === void 0 ? true : _props$expansion,
    expandIcon = props.expandIcon,
    shrinkIcon = props.shrinkIcon,
    customizeContent = props.customizeContent,
    clickExpansion = props.clickExpansion,
    version = props.version,
    render = props.render,
    className = props.className;
  /** 点击展开/收起按钮 */
  var clickExpansionCom = function clickExpansionCom() {
    clickExpansion && clickExpansion(!expansion);
  };
  /**
   * 处理内容
   * @return {ReactNode}
   */
  var handContent = function handContent() {
    if (render) return render;
    if (customizeContent) return customizeContent;
    var handIcon = function handIcon() {
      if (expansion) {
        if (expandIcon) return expandIcon;
        return jsx(MenuMoreLine, {
          onClick: clickExpansionCom
        });
      } else {
        if (shrinkIcon) return shrinkIcon;
        return jsx(MenuLessLine, {
          onClick: clickExpansionCom
        });
      }
    };
    return jsxs(Fragment, {
      children: [handIcon(), expansion && version && jsx("span", Object.assign({
        className: "version"
      }, {
        children: version
      }))]
    });
  };
  // 处理className
  var handClass = function handClass() {
    var str = 'footer-expansion';
    if (className) str += ' ' + className;
    if (!expansion) str += ' footer-expansion-shrink';
    return str;
  };
  return jsx("div", Object.assign({
    className: handClass()
  }, {
    children: handContent()
  }));
};

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-vertical-menu {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-vertical-menu > .menu-logo {\n  width: 100%;\n  display: inline-block;\n  padding: 24px 16px 0 16px;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-vertical-menu > .menu-logo.menu-logo-shrink {\n  padding: 24px 0 0;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list {\n  overflow: hidden;\n  height: 100%;\n  padding: 40px 16px;\n  position: relative;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .scroll-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .scroll-top > svg {\n  cursor: pointer;\n  transform: rotate(180deg);\n  font-size: 18px;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .scroll-top > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll {\n  transition: all 0.3s;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item {\n  margin-bottom: 8px;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item:last-child {\n  margin-bottom: 0;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content {\n  height: 40px;\n  line-height: 40px;\n  cursor: pointer;\n  display: flex;\n  border-radius: 4px;\n  text-decoration: none;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon {\n  width: 20px;\n  margin-right: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  font-size: 16px;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-label {\n  font-size: 14px;\n  width: 100%;\n  white-space: nowrap;\n  font-weight: 400;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow {\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  font-size: 16px;\n  transition: all 0.3s;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .li-collapse > div > div > .vertical-menu-list-item:first-child {\n  margin-top: 8px;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-open > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  transform: rotate(180deg);\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .scroll-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .scroll-bottom > svg {\n  cursor: pointer;\n  font-size: 18px;\n}\n.paraui-v3-vertical-menu > .vertical-menu-list > .scroll-bottom > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu > .footer-expansion {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 20px;\n  white-space: nowrap;\n  height: 40px;\n}\n.paraui-v3-vertical-menu > .footer-expansion > svg {\n  font-size: 20px;\n  cursor: pointer;\n  margin-left: 20px;\n}\n.paraui-v3-vertical-menu > .footer-expansion > .version {\n  margin-left: 12px;\n  font-size: 14px;\n}\n.paraui-v3-vertical-menu > .footer-expansion.footer-expansion-shrink {\n  justify-content: center;\n}\n.paraui-v3-vertical-menu > .footer-expansion.footer-expansion-shrink > svg {\n  margin: 0;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list {\n  padding: 44px 0px;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box {\n  height: 100%;\n  overflow: hidden;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  margin-bottom: 8px;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:last-child {\n  margin-bottom: 0;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:after {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 1;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > span {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n}\n.paraui-v3-vertical-menu.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > span > svg {\n  position: relative;\n  font-size: 20px;\n}\n\n.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content {\n  padding: 0;\n  box-shadow: none;\n}\n.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: auto;\n  height: 32px;\n  line-height: 32px;\n}\n.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon {\n  display: none;\n}\n.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  display: none;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper {\n  padding-left: 8px;\n  z-index: 1500;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content {\n  box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n  padding: 8px 0;\n  max-height: 268px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item {\n  position: relative;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content {\n  width: 200px;\n  height: 36px;\n  line-height: 36px;\n  padding: 0px 12px;\n  display: flex;\n  cursor: pointer;\n  text-decoration: none;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:after, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  content: \"\";\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon {\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: 12px;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  font-size: 20px;\n  position: relative;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  font-size: 14px;\n  width: 100%;\n  font-weight: 400;\n  white-space: nowrap;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow {\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  font-size: 20px;\n  transition: all 0.3s;\n  position: relative;\n  transform: rotate(270deg);\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg:after {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  z-index: 1;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > .opacity-pos-svg {\n  opacity: 0;\n}\n.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item .vertical-menu-item-popper, .paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item .vertical-menu-item-popper {\n  position: absolute;\n  transform: none !important;\n  left: 100% !important;\n  top: -8px;\n}\n\n.paraui-v3-vertical-menu-deep {\n  background-color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-deep > .menu-logo {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .menu-logo svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .vertical-menu-list > .scroll-top > svg, .paraui-v3-vertical-menu-deep > .vertical-menu-list > .scroll-bottom > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover {\n  background-color: rgb(34, 62, 103);\n}\n.paraui-v3-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-label {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content, .paraui-v3-vertical-menu-deep > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content {\n  background-color: rgb(34, 62, 103);\n}\n.paraui-v3-vertical-menu-deep > .footer-expansion > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep > .footer-expansion > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-deep > .footer-expansion > .version {\n  color: rgba(255, 255, 255, 0.6);\n}\n.paraui-v3-vertical-menu-deep.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:hover > span {\n  background-color: rgb(34, 62, 103);\n}\n.paraui-v3-vertical-menu-deep.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > span {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > span > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-deep.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > span {\n  background-color: rgb(34, 62, 103);\n}\n.paraui-v3-vertical-menu-deep.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > span {\n  background-color: rgb(34, 62, 103);\n}\n\n.paraui-v3-vertical-menu-light {\n  background: linear-gradient(180deg, rgb(241, 241, 244), rgb(243, 243, 243));\n}\n.paraui-v3-vertical-menu-light > .menu-logo {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-light > .menu-logo svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .scroll-top > svg, .paraui-v3-vertical-menu-light > .vertical-menu-list > .scroll-bottom > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover {\n  background-color: white;\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover > .menu-item-icon > svg {\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover > .menu-item-label {\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content:hover > .menu-item-arrow > svg {\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-label {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content {\n  background-color: white;\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content:hover > .menu-item-icon > svg, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content:hover > .menu-item-icon > svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content:hover > .menu-item-label, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content:hover > .menu-item-label {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content:hover > .menu-item-arrow > svg, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content:hover > .menu-item-arrow > svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content > .menu-item-icon > svg, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content > .menu-item-label, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-last > .vertical-menu-list-item-content > .menu-item-arrow > svg, .paraui-v3-vertical-menu-light > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item.vertical-menu-list-item-select-retract > .vertical-menu-list-item-content > .menu-item-arrow > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-light > .footer-expansion > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light > .footer-expansion > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-light > .footer-expansion > .version {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink:hover > span {\n  background-color: white;\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > span {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink > span > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > span {\n  background-color: white;\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-select > span > svg {\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > span {\n  background-color: white;\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-vertical-menu-light.paraui-v3-vertical-menu-shrink > .vertical-menu-list > .vertical-menu-list-box > .vertical-menu-list-box-srcoll .vertical-menu-list-item-shrink.vertical-menu-list-item-shrink-hover > span > svg {\n  color: rgb(28, 41, 60);\n}\n\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content {\n  background-color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover {\n  background-color: transparent;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: transparent;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content {\n  background-color: rgb(28, 41, 60);\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: rgb(34, 62, 103);\n}\n.paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content, .paraui-v3-vertical-menu-item-popper-deep.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content {\n  background-color: rgb(34, 62, 103);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content {\n  background-color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover {\n  background-color: transparent;\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  color: white;\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper-tooltip.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content.menu-item-popper-content-item-hover {\n  background-color: transparent;\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content {\n  background-color: white;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-icon > svg, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-arrow > svg, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content:hover > .menu-item-arrow > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-label {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-icon > svg, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-icon > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-label, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper .paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-arrow > svg, .paraui-v3-vertical-menu-item-popper-light.paraui-v3-vertical-menu-item-popper.paraui-v3-vertical-menu-item-popper > .menu-item-popper-content > .menu-item-popper-content-item.menu-item-popper-content-item-select > .menu-item-popper-content-item-content > .menu-item-arrow > svg {\n  color: rgb(54, 102, 214);\n}";
styleInject(css_248z);

var Menu = function Menu(props) {
  var _props$color = props.color,
    color = _props$color === void 0 ? 'deep' : _props$color,
    logoProps = props.logoProps,
    menuListProps = props.menuListProps,
    _props$expansion = props.expansion,
    expansion = _props$expansion === void 0 ? true : _props$expansion,
    onClickExpansion = props.onClickExpansion,
    selectMenu = props.selectMenu,
    onClickMenu = props.onClickMenu,
    className = props.className,
    style = props.style,
    _props$shrinkOthers = props.shrinkOthers,
    shrinkOthers = _props$shrinkOthers === void 0 ? true : _props$shrinkOthers,
    footerExpansionProps = props.footerExpansionProps,
    _props$showExpansion = props.showExpansion,
    showExpansion = _props$showExpansion === void 0 ? true : _props$showExpansion;
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    expansionCom = _useState2[0],
    setExpansionCom = _useState2[1];
  useEffect(function () {
    if (expansion !== expansionCom) setExpansionCom(expansion);
  }, [expansion]);
  /**
   * 点击展开 / 收起
   */
  var clickExpansion = function clickExpansion() {
    onClickExpansion && onClickExpansion(!expansionCom);
  };
  /**
   * 处理class
   * @return class名
   */
  var handClass = function handClass() {
    var str = $prefixCls + '-vertical-menu';
    if (className) str += ' ' + className;
    if (color) str += " ".concat($prefixCls, "-vertical-menu-").concat(color);
    if (!expansion) str += " ".concat($prefixCls, "-vertical-menu-shrink");
    return str;
  };
  /** 头像memo */
  var LogoMemo = useMemo(function () {
    return props.logoProps && jsx(Logo, Object.assign({}, logoProps, {
      expansion: expansionCom
    }));
  }, [logoProps, expansionCom]);
  /** 菜单memo */
  var MenuListMemo = useMemo(function () {
    return props.menuListProps && jsx(VerticalMenuList, Object.assign({}, props.menuListProps, {
      color: color,
      expansion: expansionCom,
      selectMenu: selectMenu,
      onClickMenu: onClickMenu,
      shrinkOthers: shrinkOthers
    }));
  }, [menuListProps, expansionCom, selectMenu, onClickMenu, color]);
  /** 底部展开收起 */
  var ExpansionMemo = useMemo(function () {
    if (!showExpansion) return null;
    return jsx(FooterExpansion, Object.assign({
      clickExpansion: clickExpansion
    }, footerExpansionProps, {
      expansion: expansionCom
    }));
  }, [expansionCom, onClickExpansion, footerExpansionProps, onClickExpansion, showExpansion]);
  return jsxs("div", Object.assign({
    className: handClass(),
    style: style
  }, {
    children: [LogoMemo, MenuListMemo, ExpansionMemo]
  }));
};

export { Menu, Menu as default };
