practical-react-components

practical-react-components copied to clipboard

Describe the bug

Bare in mind, this could just be me who is stupid. But it seems like the <Menu /> alignment properties have no affect what so ever.

My thinking would be that changing these props would open up the menu at different points from the button.

<PracticalProvider theme={generateDefaultTheme('blue')}>
<div
        style={{
          width: '800px',
          margin: 'auto',
          marginTop: '100px',
          display: 'flex',
          justifyContent: 'space-evenly',
        }}
      >
        <Menu
          horizontalAlignment="left"
          horizontalPosition="left"
          verticalAlignment="top"
          verticalPosition="top"
          items={[
            {
              label: 'Item 1',
              onClick: () => {},
            },
            {
              label: 'Item 2',
              onClick: () => {},
              danger: true,
            },
          ]}
        />
        <Menu
          horizontalAlignment="right"
          horizontalPosition="right"
          verticalAlignment="top"
          verticalPosition="top"
          items={[
            {
              label: 'Item 1',
              onClick: () => {},
            },
            {
              label: 'Item 2',
              onClick: () => {},
              danger: true,
            },
          ]}
        />
        <Menu
          horizontalAlignment="left"
          horizontalPosition="left"
          verticalAlignment="bottom"
          verticalPosition="bottom"
          items={[
            {
              label: 'Item 1',
              onClick: () => {},
            },
            {
              label: 'Item 2',
              onClick: () => {},
              danger: true,
            },
          ]}
        />
        <Menu
          horizontalAlignment="right"
          horizontalPosition="right"
          verticalAlignment="center"
          verticalPosition="center"
          items={[
            {
              label: 'Item 1',
              onClick: () => {},
            },
            {
              label: 'Item 2',
              onClick: () => {},
              danger: true,
            },
          ]}
        />
      </div>
</PracticalProvider>