Merge pull request #24210 from overleaf/mj-nested-menu-bar

[web] Editor redesign: Make menu bar nestable

GitOrigin-RevId: 5c08126499ff96494d6af9adcbd75126ddd596af

services/web/frontend/js/shared/components/menu-bar/menu-bar-dropdown.tsx

@@ -3,14 +3,19 @@ import {
   DropdownMenu,
   DropdownToggle,
 } from '@/features/ui/components/bootstrap-5/dropdown-menu'
-import { FC, useCallback } from 'react'
+import { FC, forwardRef, useCallback } from 'react'
 import classNames from 'classnames'
-import { useMenuBar } from '@/shared/hooks/use-menu-bar'
+import { useNestableDropdown } from '@/shared/hooks/use-nestable-dropdown'
+import { NestableDropdownContextProvider } from '@/shared/context/nestable-dropdown-context'
+import { AnchorProps } from 'react-bootstrap-5'
+import MaterialIcon from '../material-icon'
+import { DropdownMenuProps } from '@/features/ui/components/types/dropdown-menu-props'
 
 type MenuBarDropdownProps = {
   title: string
   id: string
   className?: string
+  align?: 'start' | 'end'
 }
 
 export const MenuBarDropdown: FC<MenuBarDropdownProps> = ({
@@ -18,8 +23,9 @@ export const MenuBarDropdown: FC<MenuBarDropdownProps> = ({
   children,
   id,
   className,
+  align = 'start',
 }) => {
-  const { menuId, selected, setSelected } = useMenuBar()
+  const { menuId, selected, setSelected } = useNestableDropdown()
 
   const onToggle = useCallback(
     show => {
@@ -38,7 +44,12 @@ export const MenuBarDropdown: FC<MenuBarDropdownProps> = ({
   }, [id, setSelected])
 
   return (
-    <Dropdown show={selected === id} align="start" onToggle={onToggle}>
+    <Dropdown
+      show={selected === id}
+      align={align}
+      onToggle={onToggle}
+      autoClose
+    >
       <DropdownToggle
         id={`${menuId}-${id}`}
         variant="secondary"
@@ -47,7 +58,88 @@ export const MenuBarDropdown: FC<MenuBarDropdownProps> = ({
       >
         {title}
       </DropdownToggle>
-      <DropdownMenu renderOnMount>{children}</DropdownMenu>
+      <NestableDropdownMenu renderOnMount id={`${menuId}-${id}`}>
+        {children}
+      </NestableDropdownMenu>
+    </Dropdown>
+  )
+}
+
+const NestableDropdownMenu: FC<DropdownMenuProps & { id: string }> = ({
+  children,
+  id,
+  ...props
+}) => {
+  return (
+    <DropdownMenu {...props}>
+      <NestableDropdownContextProvider id={id}>
+        {children}
+      </NestableDropdownContextProvider>
+    </DropdownMenu>
+  )
+}
+
+const NestedDropdownToggle: FC = forwardRef<HTMLAnchorElement, AnchorProps>(
+  function NestedDropdownToggle(
+    { children, className, onMouseEnter, id },
+    ref
+  ) {
+    return (
+      // eslint-disable-next-line jsx-a11y/anchor-is-valid
+      <a
+        id={id}
+        href="#"
+        ref={ref}
+        onMouseEnter={onMouseEnter}
+        onClick={onMouseEnter}
+        className={classNames(
+          className,
+          'nested-dropdown-toggle',
+          'dropdown-item'
+        )}
+      >
+        {children}
+        <MaterialIcon type="chevron_right" />
+      </a>
+    )
+  }
+)
+
+export const NestedMenuBarDropdown: FC<{ id: string; title: string }> = ({
+  children,
+  id,
+  title,
+}) => {
+  const { menuId, selected, setSelected } = useNestableDropdown()
+  const select = useCallback(() => {
+    setSelected(id)
+  }, [id, setSelected])
+  const onToggle = useCallback(
+    show => {
+      setSelected(show ? id : null)
+    },
+    [setSelected, id]
+  )
+  const active = selected === id
+  return (
+    <Dropdown
+      align="start"
+      drop="end"
+      show={active}
+      autoClose
+      onToggle={onToggle}
+    >
+      <DropdownToggle
+        id={`${menuId}-${id}`}
+        onMouseEnter={select}
+        className={classNames({ 'nested-dropdown-toggle-shown': active })}
+        as={NestedDropdownToggle}
+      >
+        {title}
+      </DropdownToggle>
+      <NestableDropdownMenu renderOnMount id={`${menuId}-${id}`}>
+        {children}
+      </NestableDropdownMenu>
     </Dropdown>
   )
 }

services/web/frontend/js/shared/components/menu-bar/menu-bar-option.tsx

@@ -1,5 +1,6 @@
 import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 import { DropdownItem } from '@/features/ui/components/bootstrap-5/dropdown-menu'
+import { useNestableDropdown } from '@/shared/hooks/use-nestable-dropdown'
 
 type MenuBarOptionProps = {
   title: string
@@ -7,9 +8,12 @@ type MenuBarOptionProps = {
 }
 
 export const MenuBarOption = ({ title, onClick }: MenuBarOptionProps) => {
+  const { setSelected } = useNestableDropdown()
   return (
     <DropdownListItem>
-      <DropdownItem onClick={onClick}>{title}</DropdownItem>
+      <DropdownItem onMouseEnter={() => setSelected(null)} onClick={onClick}>
+        {title}
+      </DropdownItem>
     </DropdownListItem>
   )
 }

services/web/frontend/js/shared/components/menu-bar/menu-bar.tsx

@@ -1,17 +1,16 @@
-import { MenuBarContext } from '@/shared/context/menu-bar-context'
-import { FC, HTMLProps, useState } from 'react'
+import { NestableDropdownContextProvider } from '@/shared/context/nestable-dropdown-context'
+import { FC, HTMLProps } from 'react'
 
 export const MenuBar: FC<HTMLProps<HTMLDivElement> & { id: string }> = ({
   children,
   id,
   ...props
 }) => {
-  const [selected, setSelected] = useState<string | null>(null)
   return (
     <div {...props}>
-      <MenuBarContext.Provider value={{ selected, setSelected, menuId: id }}>
+      <NestableDropdownContextProvider id={id}>
         {children}
-      </MenuBarContext.Provider>
+      </NestableDropdownContextProvider>
     </div>
   )
 }