javascript – reactjs – button and popin module – displacing issues css


I am trying to create a react component where I have badges/buttons/icons — and when you click on them – I want a material popin menu to appear. I’ve got the component working – but the styling is causing me issues – where it displaces things when popin is open – the popin is relative to the button clicked – but then pushes the other buttons out — I’ve tried to take away the div wrapper – etc.. but can’t figure out how to fix the styling.


this is the parent menu

import PopOverMenu from '../_SharedGlobalComponents/PopOverMenu/PopOverMenu';
import MailIcon from '@material-ui/icons/Mail';
import NotificationsIcon from '@material-ui/icons/Notifications';
import PersonIcon from '@material-ui/icons/Person';

      <div className="login-badges">
        <PopOverMenu
          icon={<NotificationsIcon />}
          badgecount="3"
          menu={(
              { "label": "xxx", "value": "/" },
              { "label": "xxxx", "value": "/" },
              { "label": "xxxxx", "value": "/" },
          )}
        />

        <PopOverMenu
          icon={<MailIcon />}
          badgecount="5"
          menu={(
              { "label": "xxx", "value": "/" },
              { "label": "xxxx", "value": "/" },
              { "label": "xxxxx", "value": "/" },
          )}
        />

        <PopOverMenu
          icon={<PersonIcon />}
          badgecount="2"
          menu={(
              { "label": "Profile", "value": "/profile" },
              { "label": "My account", "value": "/my-account" },
              { "label": "Logout", "value": "/logout" },
          )}
        />

      </div>


the popin component

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Grow from '@material-ui/core/Grow';
import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper';
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import Badge from '@material-ui/core/Badge';

import './PopOverMenu.scss';

class PopOverMenu extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = { open: false };
        this.anchorRef = React.createRef(null);
    }


    handleToggle = () => {
        this.setState({open: !this.state.open});
    };

    handleClose = () => {        
        this.setState({open: false});
    };

    handleListKeyDown = (event) => {
        if (event.key === 'Tab') {
            event.preventDefault();
            this.setState({open: false});
        }
    }

showMenuItems = () => (
    this.props.menu.map((item, i) => (
        <MenuItem onClick={this.handleClose}>{item.label}</MenuItem>
    ))
)

render() {
    return (
        <div className="popover-menu">
                <Button
                    ref={this.anchorRef}
                    aria-controls={this.state.open ? 'menu-list-grow' : null}
                    aria-haspopup="true"
                    onClick={this.handleToggle}
                >
                    <Badge badgeContent={this.props.badgecount} color="primary">
                        {this.props.icon}
                    </Badge>
                </Button>

                <Popper style={{position: 'relative', display: 'flex'}} open={this.state.open} role={undefined} transition disablePortal>
                    {({ TransitionProps, placement }) => (
                        <Grow
                            {...TransitionProps}
                            style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
                        >
                            <Paper>
                                <ClickAwayListener onClickAway={this.handleClose}>
                                    <MenuList autoFocusItem={this.state.open} id="menu-list-grow" onKeyDown={this.handleListKeyDown}>
                                        {this.showMenuItems()}
                                    </MenuList>
                                </ClickAwayListener>
                            </Paper>
                        </Grow>
                    )}
                </Popper>
        </div>
    );
}

}

export default PopOverMenu;

//scss

.login-badges{
    overflow: hidden;
    position: absolute;
    z-index: 2;

    .popover-menu{
        float: left;

        button{
            min-width: 40px;
        }
    }

    & > * {
      margin: 4px 0px;
    }
}


.popover-menu{
     display: inline;
}