Александр

Почти понял "удобство" такого меню, пока смотрел. Курсор то и дело "вылетал" за пределы области наведения и меню закрывалось. Стоит предусмотреть тот вариант, что пользователь может немного выйти за пределы области наведения. Вот хорошая статья про это: https://react-spectrum.adobe.com/blog/creating-a-p....

1. Высота 100% работает по-разному в зависимости от, того в каком типе контейнера лежит. В Вашем случае достаточно ограничить контейнер через overflow: hidden у .global-catalogue-menu-wrapper и выставить height: 100% для внутренних оболочек. Или использовать flex/grid с настройкой высоты уже из них.
2. Скролл огромный потому, что у вложенных менюшек высота 100% установлена (.submenu-wrapper), если её убрать, то скроллу нормально. Ну кроме таких случаев:


Чтобы первый уровень меню переставал скроллится можно попробовать задать ему position: sticky к верху, но тогда не сможете проскролить вложенные менюшки.

Для удобного позиционирования можно попробовать заюзать floating-ui.

Ну и либо overscroll-behavior настройте, либо уберите скролл у body, а то скроллится и то, что под меню.

А почему бы не посмотреть в профайлере для Реакта, почему компонент рендерится? Консоль выводится на каждый рендер, это значит и родительский рендер в данном случае тоже считается.

Ну раз переместили index.html, то и конфигурацию поправьте.
https://vite.dev/config/server-options.html#server-open

"Голый" проект совсем иначе выглядит: https://github.com/vitejs/vite/tree/main/packages/...

В наглую как-то так

export const useVerifyAuth = () => {
  const { setIsAuth, setUser, setIsLoading } = useUserStore();
  const pathname = usePathname();

  const { data, error, isLoading, isFetching, refetch } = useQuery({
    queryKey: ["verify-auth"],
    queryFn: () => authService.getNewTokens()
  });

  useLayoutEffect(() => {
    if (error !== null) {
      setIsAuth(false);
      setUser(null);
    }

    if (data !== null) {
       setIsAuth(true);
       setUser(data.data.user);
    }
  }, [data, error])

  useEffect(() => {
    // Тут бы проверить, что прошлый pathname не равен текущему
    refetch();
  }, [pathname, refetch]);

  useEffect(() => {
    setIsLoading(isLoading || isFetching)
  }, [isLoading, isFetching]);
};

У Вас перекрывается блок со всем попапом блоком со свайпером. Выносите отображение попапа в другой элемент, который будет поверх всех (например в body). В этом может помочь либа для работы с тултипами, например floating-ui. Ну и никогда по ховеру такое не показывайте, только по клику.

А чтобы в HTML на тэге увидеть жмёте ПКМ - Edit as HTML

Для VS Code ставите курсор на переменную и нажимаете Ctrl + F12.

Видимо нет такого изображения, точнее размера с индексом 9.

Добавляете родителю, который обрамляет ссылку и иконку position: relative, а ссылке добавляете

a::after {
 position: absolute;
 inset: 0;
 content: '';
}

Изучить API: https://gulpjs.com/docs/en/getting-started/creatin...

Как минимум не хватает position у modal, ну и, видимо, воспроизведения. Посмотрите сюда ещё: ::backdrop.

А Outlet не пробовали использовать, а не пытаться рядом с роутером положить компонент? Посмотрите внимательно в девтулзах, дотягиваетесь ли со своего компонента до нужного Вам провайдера?

const routes: RouteObject[] = [
  {
    path: "*",
    element: <Outlet />,
    children: [
      {
        id: "page-a",
        path: "page-a",
        element: <PageA />,
      },
      {
        id: "page-b",
        path: "page-b",
        element: <PageB />,
      },
    ],
  },
];

export const Router: FC = () => {
  const router = createBrowserRouter(routes);

  return <RouterProvider router={router} />;
};

Если надо, чтобы странички были обёрнуты в какой-то провайдер, вот, пожалуйста:

export const SuperWrapper: FC = () => {
  return (
    <ThemeProvider theme={theme}>
      <Notifications />
      <Outlet />
    </ThemeProvider>
  );
};

ЗЫ - не перестанете использовать someComponent(), то Вас ждёт удивительный мир потери состояний и прочего.

Поработав какое-то время с React Query могу выделить следующие моменты:
1. Не стоит пытаться объявлять все query за один раз - они "подвисают" в приложении и не используются. Это можно увидеть в React Query Devtools.
2. Можете вынести сами запросы в функци на отдельный слой/уровень/файл, и уже в useQuery в queryFn и в useMutation в mutationFn использовать функции.
3. Сложную бизнес-логику можно смело убрать под хук, в котором будете вызывать, обрабатывать и возвращать данные из useQuery/useMutation'а.
4. React Query - библиотека не для работы с запросами, это, по сути, ещё одно хранилище, которое просто хранит результаты Promise-операций.

Для начала настройте build: для vite / для wepback, чтобы ссылка в итоге совпадала. Вы открываете /build/index.html, а остальные файлы загружаете по /static/something/file.ext, в начале которых нету /build. Ну и надо почитать, как сделать редирект на файл index.html, если юзаете браузерный роутинг.