Антон Романков

onMouseEnter => открыть меню
onClick на документе, исключая сам дропдаун => закрыть меню

С onMouseEnter, думаю, все понятно.

const menuItems = document.querySelectorAll('.menu-item')
document.addEventListener('click', (e) => {
  event.stopPropagation() // это надо, чтобы прекратить распространение события
  if (!menuItems.includes(e.target)) {
    // close dropdown
  }
})

Это делается в функции onSubmit, которая вешается на форму.
Например, есть есть обработчик, который отвечает за отправку данных на сервер и onSubmit. Тогда можно сделать так:

const sendForm = async (data) => await api.post(data)

const onSubmit = async (data) => {
  // добавить сюда получение данных из формы
  try {
    const res = await sendForm(data)
    document.querySelector('#your-form').classList.add('active')
  } catch (error) {
    console.error(error)
  }
}

Да нативной реализации отмены функции в JS нет, но ведь можно и самому написать это

Собственно, из документации...

Зависит от задачи и того, что у вас внутри компонента Layout.
renderAfter нужно вызывать так: after={renderAfter()} либо внутри компонента так сделать.
Функцию делать не рекомендую, т.к. при каждом ререндере она будет пересозаваться.
Я сам всегда использую вариант объявления констант в компоненте, чтобы минимизировать размер рендера.
В useMemo тоже смысла тут не вижу. Его стоит использовать для хранения результата тяжелых вычислений для минимизации нагрузки на браузер.

Пример

import { Divider } from '@mui/material'
import React, { FC, forwardRef } from 'react'

import { Typography, Button, Tooltip, Icon, Link } from '../../atoms'
import { Dropdown } from '../../molecules'
import { theme } from '../../theme'

import {
  SSectionBoxWrapper,
  SSectionBoxHeader,
  SSectionBoxContent,
  SSectionBoxHeaderSection,
  SSectionBoxDropdown,
  SSectionBoxSubtitle,
  SSectionBoxTitle,
  SSectionBoxTooltipIconWrapper,
  SSectionBoxSearchWrapper,
  SSectionBoxSearchInput,
  SSectionBoxSearchIcon,
} from './styles'
import { SectionBoxProps } from './types'

export const SectionBox: FC<SectionBoxProps> = forwardRef(({
  leadIcon,
  title,
  subTitle,
  tooltip,
  actionButtons,
  action,
  link,
  selectOptions,
  searchOptions,
  children,
  noChildrenText = 'Nothing here',
  withBackground,
  customComponent,
  withPaddings = true,
  showHeaderDivider = false,
  ...props
}, ref) => {
  const hasLeftSide = Boolean(leadIcon || title || subTitle || tooltip || actionButtons)
  const hasRightSide = Boolean(action || link || selectOptions || searchOptions || customComponent)

  const dropdownNode = leadIcon && <SSectionBoxDropdown {...leadIcon} />

  const titleNode = title && <SSectionBoxTitle>{title}</SSectionBoxTitle>

  const subtitleNode = subTitle && <SSectionBoxSubtitle>{subTitle}</SSectionBoxSubtitle>

  const tooltipNode = tooltip && (
    <Tooltip placement="top" {...tooltip}>
      <SSectionBoxTooltipIconWrapper>
        <Icon name="InfoOutlined" fontSize="small" />
      </SSectionBoxTooltipIconWrapper>
    </Tooltip>
  )

  const actionsNode =
    actionButtons &&
    actionButtons.length > 0 &&
    actionButtons.map((item, index) => (
      <Button {...item} key={index}>
        {item.label}
      </Button>
    ))

  const actionNode = action && <Button {...action}>{action.label}</Button>

  const linkNode = link && <Link {...link}>{link.label}</Link>

  const noChildrenNode = (
    <Typography align="center" fontStyle="italic" color={theme.palette.grey[500]} fontWeight={400}>
      {noChildrenText}
    </Typography>
  )

  const selectOptionsNode = selectOptions && <Dropdown {...selectOptions} />

  const searchNode = searchOptions && (
    <SSectionBoxSearchWrapper>
      <SSectionBoxSearchIcon name="Search" />
      <SSectionBoxSearchInput label="Search" variant="standard" autoComplete="off" {...searchOptions} />
    </SSectionBoxSearchWrapper>
  )

  const header = (hasLeftSide || hasRightSide) && (
    <SSectionBoxHeader $hasLeftSide={hasLeftSide} $hasRightSide={hasRightSide}>
      <SSectionBoxHeaderSection>
        {actionsNode}
        {dropdownNode}
        {titleNode}
        {subtitleNode}
        {tooltipNode}
      </SSectionBoxHeaderSection>
      <SSectionBoxHeaderSection>
        {actionNode}
        {linkNode}
        {searchNode}
        {selectOptionsNode}
        {customComponent}
      </SSectionBoxHeaderSection>
    </SSectionBoxHeader>
  )

  return (
    <SSectionBoxWrapper
      $withBackground={withBackground}
      $withPaddings={withPaddings}
      ref={ref}
      {...props}
    >
      {header}
      {showHeaderDivider && <Divider />}
      <SSectionBoxContent>{children ? React.Children.map(children, item => item) : noChildrenNode}</SSectionBoxContent>
    </SSectionBoxWrapper>
  )
})

export default SectionBox

transform: rotate
requestAnimationFrame

Сделать рекурсивный setTimeout с увеличивающимся таймаутом для замедления вращения.

Вам нужно прописать разрешенные домены, с которых будут идти запросы к вашему серверу.
https://expressjs.com/en/resources/middleware/cors.html

Наверное, задать onclick

Дело в свойстве max-height, которое ограничивает высоту. Паддинги остаются, но они вне "вьюпорта" этого блока. Попробуйте добавить overflow: auto и проскроллить до конца. Вы найдете ваших потеряшек :-)

Например, так

Я бы делал картинкой. Реализовать точь-в-точь не уверен, что возможно.
Либо искать какую-то JS либу, которая сделает анимированным фон.

Используйте useRef вместо querySelector.
Пример тут: https://codesandbox.io/s/beautiful-shape-8dm1ti?fi...

Стили для контейнера

display: flex;
flex-wrap: wrap;

Стили для потомков
flex: 1 0 50%;

https://codepen.io/romant094/pen/jOZmaJg
Набросал пример, но надо поиграться со значениями

Вот тут ситуация похожая.
https://stackoverflow.com/questions/43707076/how-d...

Но в вашем случае, не уверен, что поможет. Проблема во флоатах. Рекомендую переписать на флексах. Флоаты — это сильно устаревшая технология, ее никто не использует сейчас.

Ну и по стилю кода, лучше использовать классы, а не id.

Обратите внимание на то, как сделана верстка. Добавил скрин, чтобы продемонстрировать, как ведут себя элементы. Красная обводка — это ul, черная — li.



Набросал, как это может быть: https://codepen.io/romant094/pen/ZEagLWz

Если анимация этих элементов не нужна, то я бы весь фон картинкой сделал.
Если они должны как-то себя вести (следовать за мышью, увеличиваться при наведении и проч), то однозначно элементами с абсолютным позиционированием.

Я бы сделал по контейнеру на каждую линию и прописал бы для каждой css:

display: flex;
gap: 10px;
flex-wrap: wrap;

Также надо прописать для каждого элемента стили, отвечающие за ширину.
flex: 1 0 300px;

Либо сделать сетку, как в бутстрапе, например.

padding: 0 10px;
width: 25%;
media screen and (max-width: 992px) {
    padding: 0;
    width: 100%;
}

Чтобы 3 изображения вставить, вам надо их позиционировать абсолютом.
Но надо ли? Не проще ли взять из макета уже целое изображение? В фигме это делается на 1-2-3

Может, проще будет сразу готовый взять?
https://freefrontend.com/css-hamburger-menu-icons/

Свойство display не анимируется. Используйте для этой цели transform rotate, height, opacity и проч