feat(menu): add popover component

src/components/Popover/Popover.module.scss

@@ -0,0 +1,16 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.popover {
+  position: absolute;
+  top: 55px;
+  right: 5px;
+  z-index: variables.$header-z-index;
+  width: 250px;
+  height: 240px;
+  overflow: hidden;
+  border-radius: 5px 5px;
+  > div {
+    z-index: variables.$header-z-index;
+  }
+}

src/components/Popover/Popover.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import MenuButton from '../MenuButton/MenuButton';
+import UserMenu from '../UserMenu/UserMenu';
+
+import Popover from './Popover';
+
+describe('<Popover>', () => {
+  test('renders and matches snapshot', () => {
+    const menuItems = [<MenuButton key="key" label="Home" to="/" />];
+    const { container } = render(<Popover popoverButtonIcon={<UserMenu />}>{menuItems}</Popover>);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Popover/Popover.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode, useRef } from 'react';
+import classNames from 'classnames';
+
+import DetectOutsideClick from '../DetectOutsideClick/DetectOutsideClick';
+import Slide from '../Animation/Slide/Slide';
+
+import styles from './Popover.module.scss';
+
+type Props = {
+  children: ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const Popover: React.FC<Props> = ({ children, isOpen, onClose }: Props) => {
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  return isOpen ? (
+    <DetectOutsideClick isActive={isOpen} callback={onClose} el={popoverRef}>
+      <Slide open={isOpen} duration={300} onCloseAnimationEnd={() => onClose()} fromRight>
+        <div ref={popoverRef} className={classNames(styles.popover)}>
+          {children}
+        </div>
+      </Slide>
+    </DetectOutsideClick>
+  ) : null;
+};
+
+export default Popover;

src/components/Popover/__snapshots__/Popover.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Popover> renders and matches snapshot 1`] = `<div />`;