fix(menu): top submenu disappeared problem #214

vben

2021-01-25 0ec1a62e596c363f3f017d6ac3b374a1b5caa7c5

 src/components/Menu/src/index.less

@@ -1,128 +1,11 @@
@basic-menu-prefix-cls: ~'@{namespace}-basic-menu';
@basic-menu-content-prefix-cls: ~'@{namespace}-basic-menu-item-content';
@basic-menu-tag-prefix-cls: ~'@{namespace}-basic-menu-item-tag';

.active-style() {
  color: @white;
  // background: @primary-color !important;
  background: linear-gradient(
    118deg,
    rgba(@primary-color, 0.8),
    rgba(@primary-color, 1)
  ) !important;
}

.active-menu-style() {
  .ant-menu-item-selected,
  .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
    .active-style();
  }
.app-top-menu-popup {
  min-width: 150px;
}

.@{basic-menu-prefix-cls} {
  width: 100%;

  // &__expand-icon {
  //   position: absolute;
  //   top: calc(50% - 6px);
  //   right: 16px;
  //   width: 10px;
  //   transform-origin: none;
  //   opacity: 0.45;

  //   span[role='img'] {
  //     margin-right: 0;
  //     font-size: 11px;
  //   }

  //   &--collapsed {
  //     opacity: 0;
  //   }
  // }

  //  collapsed show title start
  .@{basic-menu-content-prefix-cls}--show-title {
    max-width: unset !important;
    opacity: 1 !important;
  }

  &--hide-title {
    &.ant-menu-inline-collapsed > .ant-menu-item,
    &.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
    &.ant-menu-inline-collapsed
      > .ant-menu-item-group
      > .ant-menu-item-group-list
      > .ant-menu-submenu
      > .ant-menu-submenu-title,
    &.ant-menu-inline-collapsed .ant-menu-submenu-title {
      padding-right: 16px !important;
      padding-left: 16px !important;
    }
  }

  &--collapsed-show-title.ant-menu-inline-collapsed {
    .@{basic-menu-prefix-cls}-item__level1 {
      padding: 2px 0;
      justify-content: center !important;

      &.ant-menu-item {
        display: flex;
        align-items: center;
        height: 60px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 60px !important;

        > span {
          margin-top: 10px;
        }
      }
    }

    & > li[role='menuitem']:not(.ant-menu-submenu),
    & > li > .ant-menu-submenu-title {
      display: flex;
      margin-top: 10px;
      font-size: 12px;
      flex-direction: column;
      align-items: center;
      line-height: 24px;
    }

    & > li > .ant-menu-submenu-title {
      line-height: 24px;
    }
    .@{basic-menu-content-prefix-cls}-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .@{basic-menu-content-prefix-cls}--show-title {
        line-height: 30px;
      }
    }
  }

  &.ant-menu-inline-collapsed > .ant-menu-item,
  &.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
  &.ant-menu-inline-collapsed
    > .ant-menu-item-group
    > .ant-menu-item-group-list
    > .ant-menu-submenu
    > .ant-menu-submenu-title,
  &.ant-menu-inline-collapsed .ant-menu-submenu-title {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .@{basic-menu-content-prefix-cls}-wrapper {
    width: 100%;
    margin-top: 4px;

    &__icon {
      vertical-align: text-top;
    }
  }

  .ant-menu-item {
    transition: unset;
@@ -179,117 +62,6 @@
    }
  }

  &.ant-menu-dark:not(.@{basic-menu-prefix-cls}__sidebar-hor):not(.@{basic-menu-prefix-cls}__second) {
    // Reset menu item row height
    .ant-menu-item:not(.@{basic-menu-prefix-cls}-item__level1),
    .ant-menu-sub.ant-menu-inline > .ant-menu-item,
    .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
      height: @app-menu-item-height;
      margin: 0;
      line-height: @app-menu-item-height;
    }

    .ant-menu-item.@{basic-menu-prefix-cls}-item__level1 {
      height: @app-menu-item-height;
      line-height: @app-menu-item-height;
    }
  }

  // 层级样式
  &.ant-menu-dark:not(.@{basic-menu-prefix-cls}__sidebar-hor) {
    overflow: hidden;
    background: @sider-dark-bg-color;
    .active-menu-style();

    .ant-menu-item.ant-menu-item-selected.@{basic-menu-prefix-cls}-menu-item__level1,
    .ant-menu-submenu-selected.@{basic-menu-prefix-cls}-menu-item__level1 {
      color: @white;
    }

    .@{basic-menu-prefix-cls}-item__level1 {
      background-color: @sider-dark-bg-color;

      > .ant-menu-sub > li {
        background-color: @sider-dark-lighten-1-bg-color;
      }
    }

    .@{basic-menu-prefix-cls}-item__level2:not(.ant-menu-item-selected),
    .ant-menu-sub {
      background-color: @sider-dark-lighten-1-bg-color;
    }

    .@{basic-menu-prefix-cls}-item__level3:not(.ant-menu-item-selected) {
      background-color: @sider-dark-lighten-2-bg-color;

      .ant-menu-item {
        background-color: @sider-dark-lighten-2-bg-color;
      }
    }

    .ant-menu-submenu-title {
      display: flex;
      height: @app-menu-item-height;
      // margin: 0;
      align-items: center;
    }

    &.ant-menu-inline-collapsed {
      .ant-menu-submenu-selected,
      .ant-menu-item-selected {
        position: relative;
        font-weight: 500;
        color: @white;
        background: @sider-dark-darken-bg-color !important;

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 3px;
          height: 100%;
          background: @primary-color;
          content: '';
        }
      }
    }
  }

  &.ant-menu-light:not(.@{basic-menu-prefix-cls}__sidebar-hor) {
    // overflow: hidden;
    border-right: none;

    .ant-menu-item.ant-menu-item-selected.@{basic-menu-prefix-cls}-menu-item__level1,
    .ant-menu-submenu-selected.@{basic-menu-prefix-cls}-menu-item__level1 {
      color: @primary-color;
    }
  }

  &.@{basic-menu-prefix-cls}__second.ant-menu-inline-collapsed:not(.@{basic-menu-prefix-cls}__sidebar-hor) {
    // Reset menu item row height
    .@{basic-menu-prefix-cls}-item__level1 {
      display: flex;
      height: @app-menu-item-height * 1.4;
      padding: 6px 0 !important;
      margin: 0;
      font-size: 12px;
      line-height: @app-menu-item-height;
      align-items: center;
      text-align: center;

      > div {
        padding: 6px 0 !important;
        font-size: 12px;
      }

      .@{basic-menu-content-prefix-cls}__name {
        display: inline-block;
        width: 50%;
        overflow: hidden;
      }
    }
  }

  .ant-menu-submenu,
  .ant-menu-submenu-inline {
    transition: unset;
@@ -298,65 +70,5 @@
  .ant-menu-inline.ant-menu-sub {
    box-shadow: unset !important;
    transition: unset;
  }
}

.ant-menu-dark {
  &.ant-menu-submenu-popup {
    > ul {
      background: @sider-dark-bg-color;
    }
    .active-menu-style();
  }
}

// collapsed show title end
.ant-menu-item,
.ant-menu-submenu-title {
  > .@{basic-menu-content-prefix-cls}__name {
    width: 100%;

    .@{basic-menu-tag-prefix-cls} {
      float: right;
      margin-top: @app-menu-item-height / 2;
      transform: translate(0%, -50%);
    }
  }
}

.@{basic-menu-tag-prefix-cls} {
  position: absolute;
  top: calc(50% - 8px);
  right: 30px;
  display: inline-block;
  padding: 2px 4px;
  margin-right: 4px;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  border-radius: 2px;

  &--dot {
    top: calc(50% - 4px);
    width: 6px;
    height: 6px;
    padding: 0;
    border-radius: 50%;
  }

  &--primary {
    background: @primary-color;
  }

  &--error {
    background: @error-color;
  }

  &--success {
    background: @success-color;
  }

  &--warn {
    background: @warning-color;
  }
}