feat: responsive popovers & menus (#1323)

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx

@@ -23,7 +23,9 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
   isOpen,
   hideWorkspaceOptions = false,
 }: Props) => {
-  const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>([])
+  const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>(
+    mainApplicationGroup.getDescriptors(),
+  )
 
   useEffect(() => {
     const applicationDescriptors = mainApplicationGroup.getDescriptors()

packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx

@@ -1,13 +1,13 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { ViewControllerManager } from '@/Services/ViewControllerManager'
-import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
+import { FunctionComponent, useCallback, useRef, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import WorkspaceSwitcherMenu from './WorkspaceSwitcherMenu'
 import MenuItem from '@/Components/Menu/MenuItem'
 import { MenuItemType } from '@/Components/Menu/MenuItemType'
+import Popover from '@/Components/Popover/Popover'
 
 type Props = {
   mainApplicationGroup: ApplicationGroup
@@ -16,32 +16,11 @@ type Props = {
 
 const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGroup, viewControllerManager }) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
   const [isOpen, setIsOpen] = useState(false)
-  const [menuStyle, setMenuStyle] = useState<SubmenuStyle>()
 
   const toggleMenu = useCallback(() => {
-    if (!isOpen) {
-      const menuPosition = calculateSubmenuStyle(buttonRef.current)
-      if (menuPosition) {
-        setMenuStyle(menuPosition)
-      }
-    }
-
-    setIsOpen(!isOpen)
-  }, [isOpen, setIsOpen])
-
-  useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => {
-        const newMenuPosition = calculateSubmenuStyle(buttonRef.current, menuRef.current)
-
-        if (newMenuPosition) {
-          setMenuStyle(newMenuPosition)
-        }
-      })
-    }
-  }, [isOpen])
+    setIsOpen((isOpen) => !isOpen)
+  }, [])
 
   return (
     <>
@@ -58,19 +37,20 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
         </div>
         <Icon type="chevron-right" className="text-neutral" />
       </MenuItem>
-      {isOpen && (
-        <div
-          ref={menuRef}
-          className="max-h-120 fixed min-w-68 overflow-y-auto rounded bg-default py-2 shadow-main"
-          style={menuStyle}
-        >
-          <WorkspaceSwitcherMenu
-            mainApplicationGroup={mainApplicationGroup}
-            viewControllerManager={viewControllerManager}
-            isOpen={isOpen}
-          />
-        </div>
-      )}
+      <Popover
+        align="end"
+        anchorElement={buttonRef.current}
+        className="py-2"
+        open={isOpen}
+        side="right"
+        togglePopover={toggleMenu}
+      >
+        <WorkspaceSwitcherMenu
+          mainApplicationGroup={mainApplicationGroup}
+          viewControllerManager={viewControllerManager}
+          isOpen={isOpen}
+        />
+      </Popover>
     </>
   )
 }