[WEB] Simplify "New project" dropdown (#34290)

* Simplify the new project dropdown

* Simplify the New project dropdown

* removing artefact of rebase

GitOrigin-RevId: e7e4dc48c10f2297abcd7c5b489ff2308bf9e18b

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

@@ -3,7 +3,7 @@ import {
   OLDropdownMenu,
   OLDropdownToggle,
 } from '@/shared/components/ol/ol-dropdown-menu'
-import { FC, forwardRef, useCallback } from 'react'
+import { FC, forwardRef, useCallback, useEffect, useRef } from 'react'
 import classNames from 'classnames'
 import { useNestableDropdown } from '@/shared/hooks/use-nestable-dropdown'
 import { NestableDropdownContextProvider } from '@/shared/context/nestable-dropdown-context'
@@ -71,75 +71,109 @@ const NestableDropdownMenu: FC<
   )
 }
 
-const NestedDropdownToggle: FC<React.PropsWithChildren> = 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'
-      )}
-      role="menuitem"
-      aria-haspopup
-    >
-      {children}
-      <MaterialIcon type="chevron_right" />
-    </a>
-  )
-})
+const NestedDropdownToggle = forwardRef<HTMLAnchorElement, AnchorProps>(
+  function NestedDropdownToggle(
+    { children, className, onMouseEnter, id, ...rest },
+    ref
+  ) {
+    return (
+      // eslint-disable-next-line jsx-a11y/anchor-is-valid
+      <a
+        id={id}
+        href="#"
+        ref={ref}
+        {...rest}
+        onMouseEnter={onMouseEnter}
+        onClick={onMouseEnter}
+        className={classNames(
+          className,
+          'nested-dropdown-toggle',
+          'dropdown-item'
+        )}
+        role="menuitem"
+        aria-haspopup="menu"
+      >
+        {children}
+        <MaterialIcon type="chevron_right" />
+      </a>
+    )
+  }
+)
 
 export const NestedMenuBarDropdown: FC<
-  React.PropsWithChildren<{ id: string; title: string }>
-> = ({ children, id, title }) => {
+  React.PropsWithChildren<{
+    id: string
+    title: string
+    drop?: 'start' | 'end'
+  }>
+> = ({ children, id, title, drop = 'end' }) => {
   const { menuId, selected, setSelected } = useNestableDropdown()
+  const closeTimerRef = useRef<number | null>(null)
+
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    return () => clearCloseTimer()
+  }, [clearCloseTimer])
+
   const select = useCallback(() => {
+    clearCloseTimer()
     setSelected(id)
-  }, [id, setSelected])
+  }, [id, setSelected, clearCloseTimer])
+
+  const scheduleClose = useCallback(() => {
+    clearCloseTimer()
+    closeTimerRef.current = window.setTimeout(() => {
+      setSelected(prev => (prev === id ? null : prev))
+    }, 150)
+  }, [clearCloseTimer, setSelected, id])
+
   const onToggle = useCallback(
     (show: boolean) => {
-      // Only handle opening
       if (show) {
         setSelected(id)
       }
     },
     [setSelected, id]
   )
+
   const active = selected === id
+
   return (
-    <OLDropdown
-      align="start"
-      drop="end"
-      show={active}
-      autoClose
-      onToggle={onToggle}
-      as="li"
+    <li
       role="none"
+      onPointerLeave={e => {
+        if (e.pointerType !== 'touch') scheduleClose()
+      }}
+      onMouseEnter={clearCloseTimer}
     >
-      <OLDropdownToggle
-        id={`${menuId}-${id}`}
-        onMouseEnter={select}
-        className={classNames({ 'nested-dropdown-toggle-shown': active })}
-        as={NestedDropdownToggle}
+      <OLDropdown
+        align="start"
+        drop={drop}
+        show={active}
+        autoClose
+        onToggle={onToggle}
+        className="w-100"
       >
-        {title}
-      </OLDropdownToggle>
-      {active && (
-        <NestableDropdownMenu renderOnMount id={`${menuId}-${id}`}>
-          {children}
-        </NestableDropdownMenu>
-      )}
-    </OLDropdown>
+        <OLDropdownToggle
+          id={`${menuId}-${id}`}
+          onMouseEnter={select}
+          className={classNames({ 'nested-dropdown-toggle-shown': active })}
+          as={NestedDropdownToggle}
+        >
+          {title}
+        </OLDropdownToggle>
+        {active && (
+          <NestableDropdownMenu renderOnMount id={`${menuId}-${id}`}>
+            {children}
+          </NestableDropdownMenu>
+        )}
+      </OLDropdown>
+    </li>
   )
 }