menu finally supports dividers (codesandbox#4031)

Author: siddharthkp

packages/app/src/app/overmind/namespaces/dashboard/actions.ts

@@ -37,6 +37,9 @@ export const setTrashSandboxes: Action<{
 export const setActiveTeam: Action<{
   id: string;
 }> = ({ state, effects }, { id }) => {
+  // ignore if its already selected
+  if (id === state.dashboard.activeTeam) return;
+
   state.dashboard.activeTeam = id;
   effects.browser.storage.set(TEAM_ID_LOCAL_STORAGE, id);
   state.dashboard.sandboxes = {

packages/app/src/app/pages/NewDashboard/Components/SandboxCard/Menu.tsx

@@ -44,6 +44,7 @@ export const MenuOptions = ({ sandbox, isTemplate, onRename }) => {
         >
           Open sandbox in new tab
         </Menu.Item>
+        <Menu.Divider />
         <Menu.Item
           onSelect={() => {
             effects.browser.copyToClipboard(`https://codesandbox.io${url}`);
@@ -68,6 +69,7 @@ export const MenuOptions = ({ sandbox, isTemplate, onRename }) => {
         >
           Export {isTemplate ? 'template' : 'sandbox'}
         </Menu.Item>
+        <Menu.Divider />
         <Menu.Item onSelect={() => onRename()}>Rename sandbox</Menu.Item>
         {isTemplate ? (
           <Menu.Item
@@ -86,6 +88,7 @@ export const MenuOptions = ({ sandbox, isTemplate, onRename }) => {
             Make sandbox a template
           </Menu.Item>
         )}
+        <Menu.Divider />
         {isTemplate ? (
           <Menu.Item onSelect={() => {}}>Delete template</Menu.Item>
         ) : (

packages/components/src/components/Menu/index.tsx

@@ -59,6 +59,12 @@ const PortalStyles = createGlobalStyle(
       // override reach ui styles
       font: 'inherit',
     },
+    '[data-component=MenuDivider]': {
+      margin: 0,
+      border: 'none',
+      borderBottom: '1px solid',
+      borderColor: 'menuList.border',
+    },
   }),
   styledcss`
       [data-reach-menu-list][data-trigger=MenuButton] {
@@ -126,10 +132,15 @@ const MenuItem = props => (
   <Element as={ReachMenu.MenuItem} data-component="MenuItem" {...props} />
 );
 
+const MenuDivider = props => (
+  <Element as="hr" data-component="MenuDivider" {...props} />
+);
+
 Menu.Button = MenuButton;
 Menu.IconButton = MenuIconButton;
 Menu.List = MenuList;
 Menu.Item = MenuItem;
+Menu.Divider = MenuDivider;
 
 export const isMenuClicked = event => {
   // don't trigger comment if you click on the menu