侧边栏导航问题 about antd-admin

[zuiidea]

第一个问题：#42 有待讨论和优化
第二个问题：

我这边正常的

[tim2anna]

1. 改成只展示当前菜单的父级菜单，其他的收缩起来
2. components/layout/menu.js defaultSelectedKeys改成selectedKeys
   

[tim2anna]

第一个问题：左侧导航菜单过多，不能实现上下滚动的问题
height: 100%;
overflow-y: auto;

components/layout/sider.js

const Sider = ({ siderFold, location }) => {
  const menusProps = {
    siderFold,
    location,
  };

  return (
    <div className={styles.left_bar}>
      <div className={styles.logo}>
        <img alt="{config.logoText}" src={config.logoSrc} />
        {siderFold ? '' : <span>{config.logoText}</span>}
      </div>
      <div className={styles.left_menus}>
        <Menus {...menusProps} />
      </div>
    </div>
  );
};

export default Sider;

components/layout/main.less

@import "../vars.less";

.layout {
  position: relative;
  height: 100vh;

  &.withnavbar {
    .main {
      margin-left: 0;
    }
  }

  &.fold {
    .sider {
      width: 42px;

      .left_bar {
        overflow-y: visible;
      }

      .logo {
        img {
          width: 28px;
          margin: 6px 7px;
        }
      }

      :global {
        .ant-menu-root {
          width: 100%;

          & > .ant-menu-item {
            padding: 0;
            text-align: center;

            .anticon {
              font-size: 14px;
              margin-right: 0;
            }
          }

          & > .ant-menu-submenu {
            & > .ant-menu-submenu-title {
              padding: 0;
              text-align: center;

              .anticon {
                font-size: 14px;
                margin-right: 0;
              }

              &::after {
                display: none;
              }
            }
          }
        }
      }
    }

    .main {
      margin-left: 42px;
    }
  }

  .sider {
    width: 224px;
    background: #3e3e3e;
    position: absolute;
    overflow: visible;
    height: 100vh;
    transition: @transition-ease-out;
    box-shadow: @shadow-1;
    z-index: 1994;
    color: #999;

    &.light {
      background: #fff;

      .switchtheme {
        background: #fff;
        border-top: solid 1px #f8f8f8;
      }
    }

    .left_bar {
      height: 100%;
      overflow-y: auto;
    }

    .logo {
      text-align: center;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      margin: 28px 0;
      transition: @transition-ease-out;
      overflow: hidden;

      img {
        width: 40px;
        margin-right: 8px;
        transition: @transition-ease-out;
      }

      span {
        vertical-align: text-bottom;
        font-size: 16px;
        text-transform: uppercase;
        display: inline-block;
      }

      .anticon {
        transition: @transition-ease-out;
      }
    }

    .switchtheme {
      width: 100%;
      position: absolute;
      bottom: 0;
      height: 48px;
      background-color: @dark-half;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px 0 24px;
      overflow: hidden;
      z-index: 1000;

      span {
        white-space: nowrap;
        overflow: hidden;
      }

      :global {
        .anticon {
          min-width: 14px;
          margin-right: 8px;
          font-size: 14px;
        }
      }
    }

    :global {
      .ant-menu-dark,
      .ant-menu-dark .ant-menu-sub {
        color: #999;
      }

      .ant-menu {
        transition: @transition-ease-out;

        .ant-menu-item,
        .ant-menu-submenu-title {
          overflow: auto;
          white-space: normal;
        }
      }
    }
  }

  .header {
    :global .ant-menu-horizontal {
      & > .ant-menu-submenu {
        float: right;
      }
      border: none;
    }
    box-shadow: @shadow-2;
    position: relative;

    .siderbutton {
      height: 47px;
      width: 47px;
      line-height: 47px;
      text-align: center;
      font-size: 18px;
      cursor: pointer;
      position: absolute;
      transition: @transition-ease-in;

      &:hover {
        color: @primary-color;
        background-color: fade(@primary-color, 15%);
      }
    }
  }

  .bread {
    height: 64px;
    line-height: 64px;
    padding: 0 24px;
    margin-bottom: -24px;
  }

  .main {
    margin-left: 224px;
    overflow: auto;
    height: 100vh;
    transition: @transition-ease-out;

    .container {
      margin: 24px;

      .content {
        min-height: e("calc(100vh - 184px)");
        position: relative;

        :global .content-inner {
          background: #fff;
          padding: 24px;
          box-shadow: @shadow-1;
          min-height: e("calc(100vh - 184px)");
        }
      }
    }
  }

  .footer {
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 12px;
    color: #999;
    background: #fff;
    box-shadow: @shadow-2;
    width: 100%;
  }
}

:global .ant-menu-dark {
  color: #999;
  background-color: #3e3e3e;

  .ant-menu-submenu-title:hover,
  .ant-menu-submenu:hover {
    color: @primary-color;
  }

  .ant-menu-sub {
    color: #999;
  }

  .ant-menu-submenu-selected {
    color: @primary-color;

    &:not(.ant-menu-submenu-open) {
      background-color: @dark-half;
    }
  }

  .ant-menu-item,
  .ant-menu-submenu-title {
    & > a {
      color: #999;
    }

    &:hover > a {
      color: @primary-color;
    }
  }

  &.ant-menu-inline {
    .ant-menu-item-selected {
      background-color: @dark-half;
    }
  }

  .ant-menu-item-selected {
    color: @primary-color;
    background-color: @dark-half;

    & > a {
      color: @primary-color;
    }

    &:hover {
      background-color: @dark-half;
    }
  }
}

.popovermenu {
  width: 280px;
  left: 12px!important;

  :global .ant-popover-inner-content {
    padding: 0;

    .ant-menu-inline .ant-menu-item,
    .ant-menu-vertical .ant-menu-item {
      border-right: 0;
      height: 48px;
      line-height: 48px;
    }

    .ant-menu-inline .ant-menu-item-selected,
    .ant-menu-inline .ant-menu-selected {
      border-right: 0;
    }
  }
}

.spin {
  :global .ant-spin-container {
    height: 100vh;
  }
}

[zuiidea]

@wanghao524151 这样会有另外一个问题，就是菜单收拢时，二级菜单被overflow了

[tim2anna]

没明白，你说的是下面的样子，会不显示二级菜单？

[zuiidea]

对的，使用了overflow:hidden;或者overflow-y:hidden;收拢时都会使二级菜单显示不了

[tim2anna]

我加了这个：收起来的时候fold left_bar去除overflow-y,这样就可以了

&.fold {
    .sider {
      width: 42px;

      .left_bar {
        overflow-y: visible;
      }
   }
}

[zuiidea]

@wanghao524151 讲道理可以，晚点我加上，极端情况就是收拢也需要滚动，不过这应该是最好的解决方法了

[zuiidea]

fix: a2abe41

[myqianlan]

我自己的解决方案是取消了侧边栏的固定，整页滚动

[myqianlan]

还有就是某些页面可能不在侧边栏菜单中进行导航，比如某个列表中某一项的详情页，但是是需要菜单高亮的。我目前的做法是从菜单数据中找到这条路径，如果找不到，就截取最后一段继续找。
比如 /product/list/123
我会依次寻找 /product/list/123，/product/list，/product。。。
这种做法需要约定无菜单的页面与有菜单的页面的路径关系

[zuiidea]

@myqianlan 最新的代码没有问题了啊

[myqianlan]

@zuiidea
1.当前方案收拢时并不能上下滚动
2.当前方案并未考虑到无侧边栏菜单页面在侧边栏高亮其父级菜单