Ant Design: Vertical submenu pop up grow from bottom to top

Issue

Is it possible to display the popup of a vertical submenu "the other way around" ? I have one SubMenu item in a fixed Sidebar at the bottom of my page. It contains links for the users profile and the logout link. But since it is at the bottom of the page the submenu will open and part of it is outside the of the page.

Here is a screenshot of the current situation.

I searched for options the documentation but I couldn't find a suitable solution for the problem. So basically what I want to achieve is growing the popup from bottom to top and not top to bottom.

Here is the source for the Sidebar component. It is quite a early stage so there are still other improvements to the code to do.

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)
);

Is there a way to achieve this ?

Solution

Yes it should be possible. <Menu>uses the rc-menu package, and supports all the properties from this package, even if they are not documented in the and.design doc page.

Menu position is guided by the builtinPlacements property, which in turn uses https://github.com/yiminghe/dom-align, which gives you lot of flexibility in how to position the elements.

Answered By - Jesper We