fix(menu): top submenu disappeared problem #214

vben

2021-01-25 0ec1a62e596c363f3f017d6ac3b374a1b5caa7c5

 src/components/Menu/src/index.less

@@ -1,134 +1,20 @@
@import (reference) '../../../design/index.less';
@basic-menu-prefix-cls: ~'@{namespace}-basic-menu';

.active-style() {
  color: @white;
  background: linear-gradient(
    118deg,
    rgba(@primary-color, 0.8),
    rgba(@primary-color, 1)
  ) !important;
.app-top-menu-popup {
  min-width: 150px;
}

.active-menu-style() {
  .ant-menu-item-selected,
  .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
    .active-style();
  }
}

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

  &-wrap {
    height: 100%;
  }

  //  collapsed show title start
  .show-title {
    max-width: unset !important;
    opacity: 1 !important;
  }

  &.collapsed-show-title.ant-menu-inline-collapsed {
    .basic-menu-item__level1 {
      padding: 2px 0;
    }

    & > 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;
    }
  }

  .ant-menu-item {
    transition: unset;
  }

  // scrollbar -s tart
  &__content {
    /* 滚动槽 */
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0);
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: @border-color-dark;
    }
  }
  // scrollbar  end

  &__sidebar-hor {
    // overflow: hidden;

    &.ant-menu-horizontal {
      display: flex;
      border: 0;
      align-items: center;

      .basic-menu-item__level1 {
        margin-right: 2px;
      }

      &.ant-menu-light {
        .basic-menu-item__level1 {
          &.top-active-menu {
            color: @primary-color;
            border-bottom: 3px solid @primary-color;
          }
        }

        .ant-menu-item {
          &.basic-menu-item__level1 {
            height: @header-height;
            line-height: @header-height;
          }
        }

        .ant-menu-submenu:hover,
        .ant-menu-item-open,
        .ant-menu-submenu-open,
        .ant-menu-item-selected,
        .ant-menu-submenu-selected,
        .ant-menu-item:hover,
        .ant-menu-item-active,
        .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
        .ant-menu-submenu-active,
        .ant-menu-submenu-title:hover {
          color: @primary-color !important;
          border-bottom: 3px solid @primary-color;
        }

        .ant-menu-submenu {
          &:hover {
            border-bottom: 3px solid @primary-color;
          }

          &.ant-menu-selected,
          &.ant-menu-submenu-selected {
            border-bottom: 3px solid @primary-color;
          }
        }
      }

      &.ant-menu-dark {
        background: transparent;
@@ -155,14 +41,8 @@
          background: @top-menu-active-bg-color;
        }

        .basic-menu-item__level1 {
        .@{basic-menu-prefix-cls}-item__level1 {
          background: transparent;

          &.top-active-menu {
            color: @white;
            background: @top-menu-active-bg-color;
            border-radius: 2px 2px 0 0;
          }

          &.ant-menu-item-selected,
          &.ant-menu-submenu-selected {
@@ -172,7 +52,7 @@

        .ant-menu-item,
        .ant-menu-submenu {
          &.basic-menu-item__level1,
          &.@{basic-menu-prefix-cls}-item__level1,
          .ant-menu-submenu-title {
            height: @header-height;
            line-height: @header-height;
@@ -182,209 +62,13 @@
    }
  }

  &:not(.basic-menu__sidebar-hor).ant-menu-inline-collapsed {
    .basic-menu-item__level1 {
      > div {
        align-items: center;
      }
    }
  .ant-menu-submenu,
  .ant-menu-submenu-inline {
    transition: unset;
  }

  &.ant-menu-dark:not(.basic-menu__sidebar-hor):not(.basic-menu__second) {
    // Reset menu item row height
    .ant-menu-item:not(.basic-menu-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-item__level1 {
      height: @app-menu-item-height;
      line-height: @app-menu-item-height;
    }
  }

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

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

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

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

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

    .basic-menu-item__level3:not(.ant-menu-item-selected) {
      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 {
        background: @sider-dark-darken-bg-color !important;
      }
    }
  }

  &.ant-menu-light:not(.basic-menu__sidebar-hor) {
    overflow-x: hidden;
    border-right: none;

    // .ant-menu-item-selected {
    //   background: fade(@primary-color, 18%);
    // }

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

  // 关键字的颜色
  &__keyword {
    color: lighten(@primary-color, 20%);
  }

  // 激活的子菜单样式
  .ant-menu-item.ant-menu-item-selected {
    position: relative;
  }

  &.basic-menu__second.ant-menu-inline-collapsed:not(.basic-menu__sidebar-hor) {
    // Reset menu item row height
    .ant-menu-item,
    .ant-menu-sub.ant-menu-inline > .ant-menu-item,
    .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
      display: flex;
      height: @app-menu-item-height * 1.4;
      padding: 6px 0 !important;
      margin: 0;
      line-height: @app-menu-item-height;
      align-items: center;
    }
  }
}

// 触发器样式
.ant-layout-sider {
  &-dark {
    .ant-layout-sider-trigger {
      color: darken(@white, 25%);
      background: @trigger-dark-bg-color;

      &:hover {
        color: @white;
        background: @trigger-dark-hover-bg-color;
      }
    }
  }

  &-light {
    .ant-layout-sider-trigger {
      color: @text-color-base;
      border-top: 1px solid @border-color-light;
    }
  }
}

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

    .active-menu-style();
  }
}

.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 > .ant-menu-submenu-title {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .ant-menu-inline-collapsed {
    .basic-menu-item__level1 {
      display: flex;
      justify-content: center;
    }
  }
}
// collapsed show title end
.ant-menu-item,
.ant-menu-submenu-title {
  > .basic-menu__name {
    width: 100%;

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

.basic-menu__tag {
  display: inline-block;
  padding: 2px 4px;
  margin-right: 4px;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  border-radius: 2px;

  &.dot {
    width: 8px;
    height: 8px;
    padding: 0;
    margin-top: 21px !important;
    margin-bottom: 2px;
    border-radius: 50%;
  }

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

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

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

  &.warn {
    background: @warning-color;
  .ant-menu-inline.ant-menu-sub {
    box-shadow: unset !important;
    transition: unset;
  }
}