Ant Design: всплывающее вертикальное подменю растет снизу вверх

Question

Можно ли отобразить всплывающее окно вертикального подменю "наоборот"?У меня есть один элемент SubMenu в фиксированной боковой панели внизу моей страницы.Он содержит ссылки на профиль пользователя и ссылку выхода из системы.Но так как оно находится внизу страницы, откроется подменю, и часть его находится за пределами страницы.

Вот скриншот текущей ситуации.

Я искал варианты документации, но не смог найти подходящее решение для этой проблемы.Поэтому в основном я хочу добиться увеличения всплывающего окна снизу вверх, а не сверху вниз.

Вот источник компонента Sidebar.Это довольно ранняя стадия, поэтому в коде есть и другие улучшения.

import React from 'react';
import { connect } from 'react-redux';
import { Layout, Menu, Icon } from 'antd';

import { withRouter } from 'react-router-dom';

import styled from 'styled-components';

import { toggleSidebar } from '../../actions/ui';
import { logoutUser } from '../../actions/user';

const { Sider } = Layout;
const SubMenu = Menu.SubMenu;

const Logo = styled.div`
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
`;

const UserMenu = styled(SubMenu)`
  position: fixed;
  text-align: center;
  bottom: 0;
  cursor: pointer;
  height: 48px;
  line-height: 48px;
  color: #fff;
  background: #002140;
  z-index: 1;
  transition: all 0.2s;
`;

const mapStateToProps = state => ({
  ui: state.ui
});

const mapDispatchToProps = dispatch => {
  return {
    toggleSidebar: () => dispatch(toggleSidebar()),
    logoutUser: () => dispatch(logoutUser())
  };
};

class Sidebar extends React.Component {
  componentDidMount() {}

  render() {
    const { ui, logoutUser } = this.props;
    return (
      <Sider
        collapsed={ui.sidebarCollapsed}
        //onCollapse={toggleSidebar} // toggle is disabled
        style={{
          overflow: 'auto',
          height: '100vh',
          position: 'fixed',
          left: 0
        }}
      >
        <Logo />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
          <UserMenu
            key="sub1"
            placement="topLeft"
            title={
              <span>
                <Icon type="user" />
                <span>User</span>
              </span>
            }
          >
            <Menu.Item onClick={logoutUser} key="3">
              Logout
            </Menu.Item>
            <Menu.Item key="4">Profile</Menu.Item>
          </UserMenu>
        </Menu>
      </Sider>
    );
  }
}

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Sidebar)
);

Есть ли способ достичь этого?

Answer 1

Да, это должно быть возможно.<Menu> использует пакет rc-menu и поддерживает все свойства этого пакета, даже если они не документированы на странице документа and.design.

Положение меню определяетсясвойство builtinPlacements, которое в свою очередь использует https://github.com/yiminghe/dom-align,, что дает вам большую гибкость в расположении элементов.