Fixes MenuBar bugs and adds a better storybook for them

lib/components/MenuBar.tsx

@@ -1,7 +1,8 @@
-import { type ReactNode, type RefObject, useEffect, useRef } from 'react';
+import { type ReactNode, type RefObject, useRef } from 'react';
 import { classes } from '../common/react';
 import { Box, type BoxProps } from './Box';
 import { Icon } from './Icon';
+import { Popper } from './Popper';
 
 type MenuProps = {
   children: any;
@@ -11,21 +12,7 @@ type MenuProps = {
 };
 
 function Menu(props: MenuProps) {
-  const { children, menuRef, onOutsideClick, width } = props;
-
-  function handleClick(event: MouseEvent) {
-    if (!menuRef.current?.contains(event.target as Node)) {
-      onOutsideClick();
-    }
-  }
-
-  useEffect(() => {
-    document.addEventListener('click', handleClick);
-
-    return () => {
-      document.removeEventListener('click', handleClick);
-    };
-  }, []);
+  const { children, width } = props;
 
   return (
     <div
@@ -79,15 +66,20 @@ function MenuBarButton(props: MenuBarDropdownProps) {
       >
         <span className="MenuBar__MenuBarButton-text">{display}</span>
       </Box>
-      {open && (
-        <Menu
-          width={openWidth}
-          menuRef={menuRef}
-          onOutsideClick={onOutsideClick}
-        >
-          {children}
-        </Menu>
-      )}
+      <Popper
+        onClickOutside={onOutsideClick}
+        placement="bottom-start"
+        content={
+          <Menu
+            width={openWidth}
+            menuRef={menuRef}
+            onOutsideClick={onOutsideClick}
+          >
+            {children}
+          </Menu>
+        }
+        isOpen={open}
+      />
     </div>
   );
 }
@@ -161,7 +153,7 @@ function MenuItemToggle(props) {
       onClick={() => onClick(value)}
     >
       <div className="MenuBar__MenuItemToggle__check">
-        {checked && <Icon size={1.3} name="check" />}
+        <Icon size={1.3} name={checked ? 'check' : ''} />
       </div>
       {displayText}
     </Box>

stories/MenuBar.stories.tsx

@@ -1,18 +1,100 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import type { ComponentProps } from 'react';
+import { type ComponentProps, useState } from 'react';
+import { Section, Stack } from '../lib/components';
 import { MenuBar } from '../lib/components/MenuBar';
 
-type StoryProps = ComponentProps<typeof MenuBar>;
+type StoryProps = ComponentProps<typeof MenuBar.Dropdown>;
 
 export default {
-  component: MenuBar,
-  title: 'Components/MenuBar',
+  component: MenuBar.Dropdown,
+  subcomponents: {
+    Menubar: MenuBar,
+    'MenuBar.Dropdown.MenuItem': MenuBar.Dropdown.MenuItem,
+    'MenuBar.Dropdown.MenuItemToggle': MenuBar.Dropdown.MenuItemToggle,
+  },
+  title: 'Components/MenuBar.Dropdown',
+  decorators: (Story) => (
+    <Stack direction="column">
+      <Stack.Item>
+        <Story />
+      </Stack.Item>
+      <Stack.Item>
+        <Section title="Foo">Bar</Section>
+      </Stack.Item>
+    </Stack>
+  ),
 } satisfies Meta<StoryProps>;
 
-type Story = StoryObj<StoryProps>;
-
-export const Default: Story = {
+export const Default: StoryObj<StoryProps> = {
   args: {
-    children: 'MenuBar',
+    disabled: false,
+    openWidth: '22rem',
+  },
+  render: (args) => {
+    const [openMenuBar, setOpenMenuBar] = useState<string | null>(null);
+    const [openOnHover, setOpenOnHover] = useState<boolean>(false);
+    const [checkbox, setCheckbox] = useState<boolean>(false);
+
+    const menuBarProps = {
+      openMenuBar: openMenuBar,
+      setOpenMenuBar: setOpenMenuBar,
+      openOnHover: openOnHover,
+      setOpenOnHover: setOpenOnHover,
+    };
+
+    const closeMenu = () => {
+      setOpenMenuBar(null);
+      setOpenOnHover(false);
+    };
+
+    return (
+      <MenuBar>
+        <MenuBar.Dropdown
+          {...args}
+          {...menuBarProps}
+          entry="file"
+          display="File"
+        >
+          <MenuBar.Dropdown.MenuItem
+            displayText="Open File"
+            onClick={closeMenu}
+          />
+          <MenuBar.Dropdown.MenuItem displayText="Save" onClick={closeMenu} />
+          <MenuBar.Dropdown.MenuItem
+            displayText="Save As"
+            onClick={closeMenu}
+          />
+        </MenuBar.Dropdown>
+        <MenuBar.Dropdown
+          {...args}
+          {...menuBarProps}
+          entry="settings"
+          display="Settings"
+        >
+          <MenuBar.Dropdown.MenuItem
+            displayText="User Settings"
+            onClick={closeMenu}
+          />
+          <MenuBar.Dropdown.MenuItemToggle
+            displayText="Save on file edit"
+            checked={checkbox}
+            onClick={() => {
+              setCheckbox(!checkbox);
+            }}
+          />
+        </MenuBar.Dropdown>
+        <MenuBar.Dropdown
+          {...args}
+          {...menuBarProps}
+          entry="help"
+          display="Help"
+        >
+          <MenuBar.Dropdown.MenuItem
+            displayText="More Info"
+            onClick={closeMenu}
+          />
+        </MenuBar.Dropdown>
+      </MenuBar>
+    );
   },
 };

styles/components/MenuBar.scss

@@ -50,7 +50,7 @@ $dropdown-z-index: 5;
   display: inline-block;
   vertical-align: middle;
   min-width: 3rem;
-  margin-left: 0.3rem;
+  padding-left: 0.3rem;
 }
 
 .MenuBar__over {