fix(web): fix the wrong components usage(#18995) (#19065)

web/app/components/header/nav/nav-selector/index.tsx

   RiArrowDownSLine,
   RiArrowRightSLine,
 } from '@remixicon/react'
-import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { useRouter } from 'next/navigation'
 import { debounce } from 'lodash-es'
 import cn from '@/utils/classnames'
               <div className="overflow-auto px-1 py-1" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
                 {
                   navs.map(nav => (
-                    <MenuItems key={nav.id}>
+                    <MenuItem key={nav.id}>
                       <div className='flex w-full cursor-pointer items-center truncate rounded-lg px-3 py-[6px] text-[14px] font-normal text-gray-700 hover:bg-gray-100' onClick={() => {
                         if (curNav?.id === nav.id)
                           return
                           {nav.name}
                         </div>
                       </div>
-                    </MenuItems>
+                    </MenuItem>
                   ))
                 }
               </div>
               {!isApp && isCurrentWorkspaceEditor && (
-                <MenuButton className='w-full p-1'>
+                <MenuItem as="div" className='w-full p-1'>
                   <div onClick={() => onCreate('')} className={cn(
                     'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-gray-100',
                   )}>
                     </div>
                     <div className='grow text-left text-[14px] font-normal text-gray-700'>{createText}</div>
                   </div>
-                </MenuButton>
+                </MenuItem>
               )}
               {isApp && isCurrentWorkspaceEditor && (
                 <Menu as="div" className="relative h-full w-full">