@redneckz/wildless-cms-uni-blocks 0.6.23 → 0.6.25

package/src/components/Calculator/Calculator.tsx

@@ -81,6 +81,8 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
     ? 'text-l-light text-white'
     : `text-m-light text-secondary-text`;
   const iconClassName = isActiveBtn ? '' : `text-primary-main`;
+  const iconVersion = tab?.icon?.iconVersion;
+  const activeIconStyle = isActiveBtn ? 'white' : 'normal';
 
   return (
     <button
@@ -93,7 +95,10 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
     >
       <Img
         className={`h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`}
-        image={{ ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }}
+        image={{
+          ...tab?.icon,
+          iconVersion: iconVersion ?? activeIconStyle,
+        }}
         width="24"
         height="24"
         asSVG

package/src/components/Catalog/CatalogContent.ts

@@ -2,6 +2,7 @@ import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 export interface CatalogCardType extends HeadlineCommonProps, ImageContent {
   /** @title Цена в рублях */
@@ -24,4 +25,5 @@ export interface CatalogCardType extends HeadlineCommonProps, ImageContent {
 export type CatalogContent = HeadlineCommonProps & {
   /** @title Список карточек */
   cards?: CatalogCardType[];
+  version?: BlockVersion;
 };

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -5,6 +5,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { BORDER_CLASSES, GRADIENT } from './constants';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export interface HeaderCellProps {
   icon?: Picture;
@@ -22,9 +23,10 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
     {icon && !image?.src && (
       <Img
         className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
-        image={icon}
+        image={getIconWithVersion(icon)}
         width="63"
         height="63"
+        asSVG
       />
     )}
     {image?.src && <Img className="mb-[18px]" image={image} />}

package/src/components/ContentPage/normalizeBlock.mobile.ts

@@ -4,26 +4,23 @@ import { mapSlot } from './mapSlot';
 
 export function normalizeBlock<S extends Slot>(block?: S, blocksRegistry?: BlocksRegistry): S {
   const { mobile, ...rest } = (block || {}) as BlockDef;
-
-  const normalizedBlock = mobile
+  const result = mobile
     ? { ...rest, ...mobile, content: { ...rest.content, ...mobile.content } }
     : block;
 
-  return {
-    ...mapSlot((blocks) => filterBlocks(blocks, blocksRegistry))(normalizedBlock || {}),
-  } as S;
+  return mapSlot(filterBlocks(blocksRegistry))(result || {}) as S;
 }
 
-const filterBlocks = (blocks?: BlockDef[], blocksRegistry?: BlocksRegistry) =>
-  blocks
-    ? blocks
-        ?.filter(
-          (block) =>
-            blocksRegistry &&
-            (block?.type || block?.mobile?.type || '') in blocksRegistry &&
-            !block.mobile?.hidden,
-        )
-        .map((block) => ({
-          ...normalizeBlock(block, blocksRegistry),
-        }))
-    : [];
+const filterBlocks =
+  (blocksRegistry?: BlocksRegistry) =>
+  (blocks?: BlockDef[]): BlockDef[] =>
+    blocks
+      ? blocks
+          ?.filter(
+            (block) =>
+              blocksRegistry &&
+              (block?.type || block?.mobile?.type || '') in blocksRegistry &&
+              !block.mobile?.hidden,
+          )
+          .map((block) => normalizeBlock(block, blocksRegistry))
+      : [];

package/src/components/ContentPage/normalizeBlock.ts

@@ -4,18 +4,16 @@ import { mapSlot } from './mapSlot';
 
 export function normalizeBlock<S extends Slot>(block?: S, blocksRegistry?: BlocksRegistry): S {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { mobile, ...rest } = (block || {}) as BlockDef;
+  const { mobile, ...result } = (block || {}) as BlockDef;
 
-  return {
-    ...mapSlot((blocks) => filterBlocks(blocks, blocksRegistry))({ ...rest }),
-  } as S;
+  return mapSlot(filterBlocks(blocksRegistry))({ ...result }) as S;
 }
 
-const filterBlocks = (blocks?: BlockDef[], blocksRegistry?: BlocksRegistry) =>
-  blocks
-    ? blocks
-        .filter((block) => blocksRegistry && (block?.type || '') in blocksRegistry)
-        .map((block) => ({
-          ...normalizeBlock(block, blocksRegistry),
-        }))
-    : [];
+const filterBlocks =
+  (blocksRegistry?: BlocksRegistry) =>
+  (blocks?: BlockDef[]): BlockDef[] =>
+    blocks
+      ? blocks
+          .filter((block) => blocksRegistry && (block?.type || '') in blocksRegistry)
+          .map((block) => normalizeBlock(block, blocksRegistry))
+      : [];

package/src/components/ContentPage/normalizePage.ts

@@ -4,10 +4,5 @@ import { normalizeBlock } from './normalizeBlock';
 
 export const normalizePage =
   (blocksRegistry: BlocksRegistry) =>
-  (contentPage: ContentPageDef | undefined | null): ContentPageDef | undefined => {
-    if (!contentPage) {
-      return undefined;
-    }
-
-    return normalizeBlock(contentPage, blocksRegistry);
-  };
+  (contentPage: ContentPageDef | undefined | null): ContentPageDef =>
+    contentPage ? normalizeBlock(contentPage, blocksRegistry) : {};

package/src/components/Footer/Footer.mobile.tsx

@@ -1,19 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Fallback } from '../../model/Fallback';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
-import { AccordionItem } from '../AccordionItem/AccordionItem';
 import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { Contacts } from './Contacts';
-import type { FooterContent, SubMenuItem } from './FooterContent';
 import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import type { Fallback } from '../../model/Fallback';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { FooterContent, SubMenuItem } from './FooterContent';
+import type { Picture } from '../../model/Picture';
+import { AccordionItem } from '../AccordionItem/AccordionItem';
 
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
@@ -66,7 +68,15 @@ const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
 
   return (
     <Button version="link" key={`footer-${i}`} href={href} className="flex text-s mb-4 w-6">
-      {icon ? <Img className="pr-1" image={icon} width="24" height="24" asSVG /> : null}
+      {icon ? (
+        <Img
+          className="pr-1"
+          image={getIconWithVersion({ icon: icon } as Picture)}
+          width="24"
+          height="24"
+          asSVG
+        />
+      ) : null}
       <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>
   );

package/src/components/Footer/MediaButton.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 const ICONS_MAP: Array<{
   origins: string[];
@@ -66,7 +67,13 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       rel="noopener noreferrer"
     >
       {icon ? (
-        <Img image={icon} imageClassName="group-hover:text-white" width="24" height="24" asSVG />
+        <Img
+          image={getIconWithVersion(icon)}
+          imageClassName="group-hover:text-white"
+          width="24"
+          height="24"
+          asSVG
+        />
       ) : null}
     </a>
   );

package/src/components/Gallery/Gallery.fixture.tsx

@@ -194,6 +194,7 @@ const onlyTitleProps: GalleryProps = {
     {
       title: 'Фермерские продукты',
       icon: { icon: 'WalletIcon' },
+      version: 'secondary',
     },
   ],
   button: buttonPrimary,

package/src/components/Gallery/Gallery.mobile.tsx

@@ -11,7 +11,7 @@ import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
-import { Picture } from '../../model/Picture';
+import type { Picture } from '../../model/Picture';
 
 export const Gallery = JSX<GalleryProps>(
   ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {

package/src/components/Gallery/GalleryCardInner.tsx

@@ -7,6 +7,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 export const GalleryCardInner = JSX<GalleryCardProps>(
   ({
@@ -24,7 +25,7 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
     return (
       <div className={`h-full flex flex-col justify-between ${AlignText[align]}`}>
         <div className="flex flex-col h-full">
-          {renderImage(icon)}
+          {renderImage(icon, version)}
           {renderCardTitle(headlineSmallVersion, title)}
           {renderDescription(description, title)}
           {items?.length ? renderItems(items, isDotted, version) : null}
@@ -36,11 +37,15 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
   },
 );
 
-const renderImage = (image?: Picture) => (
+const renderImage = (image?: Picture, version?: BlockVersion) => (
   <div className="flex justify-center">
     {image?.src ? <Img className="mb-5" image={image} /> : null}
     {image?.icon ? (
-      <Img className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`} image={image} asSVG />
+      <Img
+        className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`}
+        image={getIconWithVersion(image, version)}
+        asSVG
+      />
     ) : null}
   </div>
 );

package/src/components/Header/DropdownMenu.tsx

@@ -1,84 +1,67 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
 import type { BgColorVersion } from '../../model/BgColorVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
-import type {
-  ContentPageContext,
-  HandlerDecorator,
-  Router,
-} from '../ContentPage/ContentPageContext';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 
 const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'bg-primary-text',
   transparent: 'bg-white',
 };
 
-interface DropdownMenuProps extends UniBlockProps {
-  menuVisible: boolean;
-  toggleMenu: () => void;
-  menuItems: LinkProps[];
-  bgColor?: BgColorVersion;
+interface DropdownMenuProps {
   context: ContentPageContext;
-  activeSubItem?: LinkProps;
+  className?: string;
+  items: LinkProps[];
+  activeItem?: LinkProps;
+  bgColor?: BgColorVersion;
 }
 
-export const DropdownMenu = JSX<DropdownMenuProps>((props) => {
-  const { menuVisible, toggleMenu, menuItems, bgColor, context, activeSubItem } = props;
+export const DropdownMenu = JSX<DropdownMenuProps>(
+  ({ context, className, items, activeItem, bgColor }) => {
+    const { useRouter, handlerDecorator } = context;
+    const router = useRouter();
 
-  const { useRouter, handlerDecorator } = context;
-  const router = useRouter();
+    const [visible, setVisible] = useState(false);
+    const handleToggle = useCallback(() => setVisible((_) => !_), []);
 
-  return (
-    <div
-      className={`absolute w-52 -top-4 right-0 pt-4 z-40 ${
-        menuVisible ? 'bg-white rounded-md shadow-blue-gray/24' : ''
-      }`}
-    >
-      <button
-        className="flex justify-between items-center cursor-pointer h-6 ml-6"
-        onClick={toggleMenu}
-        aria-label={`${menuVisible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
-      >
-        {Array(3).fill(bgColor).map(renderDot)}
-      </button>
+    const handleClickOutside = useCallback(() => setVisible(false), []);
+    const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
+
+    return (
       <div
-        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`}
-        aria-hidden={!menuVisible}
+        className={`${visible ? 'bg-white rounded-md shadow-blue-gray/24' : ''} ${className || ''}`}
+        ref={ref}
       >
-        {renderDotsSubMenuItems({ menuItems, router, handlerDecorator, activeSubItem })}
+        <button
+          className="flex justify-between items-center cursor-pointer h-6 ml-6"
+          aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+          onClick={handleToggle}
+        >
+          {Array(3).fill(bgColor).map(renderDot)}
+        </button>
+        <div
+          className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
+          aria-hidden={!visible}
+        >
+          {items?.map((item, i) => (
+            <a
+              key={item.href || String(i)}
+              className={`text-l-light pb-4 hover:text-primary-main ${
+                item === activeItem ? 'text-primary-main' : ''
+              }`}
+              {...useLink({ router, handlerDecorator }, item)}
+            >
+              {item.text}
+            </a>
+          ))}
+        </div>
       </div>
-    </div>
-  );
-});
-
-type DotsSubMenuItemsProps = {
-  menuItems: LinkProps[];
-  router: Router;
-  handlerDecorator: HandlerDecorator | undefined;
-  activeSubItem?: LinkProps;
-};
-
-const renderDotsSubMenuItems = ({
-  menuItems,
-  router,
-  handlerDecorator,
-  activeSubItem,
-}: DotsSubMenuItemsProps) => {
-  const isActive = (item: LinkProps) => item === activeSubItem;
-
-  return menuItems?.map(({ text, ...rest }) => (
-    <a
-      key={rest.href}
-      {...useLink({ router, handlerDecorator }, rest)}
-      className={`text-l-light pb-4 hover:text-primary-main ${
-        isActive(rest) ? 'text-primary-main' : ''
-      }`}
-    >
-      {text}
-    </a>
-  ));
-};
+    );
+  },
+);
 
 const renderDot = (bgColor: BgColorVersion, i: number) => (
   <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />

package/src/components/Header/Header.mobile.tsx

@@ -5,7 +5,6 @@ import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
-import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
@@ -19,15 +18,14 @@ import { HeaderTop } from './HeaderTop';
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, page }) => {
+  ({ className = '', defaultLocation, bgColor = 'bg-white', context, page }) => {
     const { handlerDecorator } = context;
     const router = context.useRouter();
 
     const fallback: Fallback | undefined = page?.fallback;
-    const sitemap = useSitemap(fallback);
+    const { topItems, dispositions } = useSitemap(fallback);
 
-    const mergedItems = mergeTopItems(sitemap.topItems, topItems);
-    const activeTopItem = mergedItems.find(isTopItemActive(router));
+    const activeTopItem = topItems?.find(isTopItemActive(router));
     const subItems = activeTopItem?.items;
     const activeSubItem = findActiveSubItem(router)(subItems);
 
@@ -58,15 +56,17 @@ export const Header = JSX<HeaderProps>(
           <HeaderBurger
             context={context}
             onClick={toggleBurgerMenu}
-            burgerSubMenu={sitemap?.dispositions}
+            burgerSubMenu={dispositions}
             defaultLocation={defaultLocation}
           >
             <AccordionItemsList>
-              {sitemap.topItems?.map((item, i) => (
-                <AccordionItem key={String(i)} context={context} label={item.text}>
-                  <LinkList context={context} documents={item.items} />
-                </AccordionItem>
-              ))}
+              {topItems?.map((item, i) => {
+                item?.text ? (
+                  <AccordionItem key={String(i)} context={context} label={item.text}>
+                    <LinkList context={context} documents={item.items} />
+                  </AccordionItem>
+                ) : null;
+              })}
             </AccordionItemsList>
           </HeaderBurger>
         ) : null}

package/src/components/Header/Header.tsx

@@ -3,12 +3,13 @@ import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import type { TopMenuItem } from '../../model/SitemapProps';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
-import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
+import type { Router } from '../ContentPage/ContentPageContext';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderSubMenu } from './HeaderSubMenu';
@@ -22,27 +23,24 @@ export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
   ({
-    className = '',
-    defaultLocation = 'Москва',
-    showSubMenu = true,
     bgColor = 'bg-white',
+    className = '',
     context,
-    topItems,
+    defaultLocation = 'Москва',
     logo,
     page,
+    showSubMenu = true,
     ...rest
   }) => {
     const router = context.useRouter();
     const fallback: Fallback | undefined = page?.fallback;
-    const sitemap = useSitemap(fallback);
     const { handlerDecorator } = context;
 
-    const mergedItems = mergeTopItems(sitemap.topItems, topItems);
-    const [firstPortal] = mergedItems;
-    const activeTopItem = showSubMenu
-      ? mergedItems.find(isTopItemActive(router)) || firstPortal // Если по слагу невозможно понять к какому подпорталу этот слаг относиться, то выбираем первый подпортал.
-      : null;
-    const topMenu = mergedItems.map((_, i) => (
+    const { topItems } = useSitemap(fallback);
+
+    const activeTopItem = showSubMenu ? getActiveItem(topItems, router) : null;
+
+    const topMenu = topItems?.map((_, i) => (
       <TopItem
         key={String(i)}
         active={_ === activeTopItem}
@@ -80,3 +78,10 @@ export const Header = JSX<HeaderProps>(
     );
   },
 );
+
+const getActiveItem = (topItems: TopMenuItem[] | undefined, router: Router) => {
+  const [firstPortal] = topItems || [];
+
+  // Если по слагу невозможно понять к какому подпорталу этот слаг относиться, то выбираем первый подпортал.
+  return topItems?.find(isTopItemActive(router)) || firstPortal;
+};

package/src/components/Header/HeaderContent.ts

@@ -1,7 +1,6 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconProps, Picture } from '../../model/Picture';
-import type { SitemapProps } from '../../services/sitemap/SitemapProps';
 
 /**
  * @title Пункт подменю
@@ -31,7 +30,7 @@ export interface Logo {
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  * @required ["defaultLocation", "topItems"]
  */
-export interface HeaderContent extends SitemapProps {
+export interface HeaderContent {
   logo?: Logo;
   /**
    * @title Город по-умолчанию

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
-import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import { IntersectionObserverTag } from '../../ui-kit/IntersectionObserverTag';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { DropdownMenu } from './DropdownMenu';
+import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 
 export interface HeaderSubMenuProps {
   context: ContentPageContext;
@@ -16,69 +14,52 @@ export interface HeaderSubMenuProps {
 }
 
 export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
-  const { handlerDecorator } = context;
   const router = context.useRouter();
 
-  const subItemsListRef = useRef<HTMLDivElement | null>(null);
-
-  const [menuVisible, setMenuVisible] = useState(false);
+  const activeSubItem = findActiveSubItem(router)(subItems);
 
   const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
   const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
+  const subItemsListRef = useRef<HTMLDivElement | null>(null);
   const observerOptions = useMemo(
     () => ({ threshold: 1, root: subItemsListRef.current }),
     [subItemsListRef.current],
   );
-
-  const observerCallbacks = useMemo(
+  const subItemsVisibilityHandlers = useMemo(
     () =>
-      subItems.map((_, index) => (entries: IntersectionObserverEntry[]) => {
-        if (!entries.length) {
-          return;
-        }
-
-        // Assumption about sorting entries by time
-        const entry = entries[entries.length - 1];
-
-        if (entry.isIntersecting) {
-          setVisibleItemsCount(handleIntersectionActivation(index));
-        } else {
-          setVisibleItemsCount(handleIntersectionDeactivation(index));
-        }
+      subItems.map((_, index) => (isIntersecting: boolean) => {
+        setVisibleItemsCount(
+          isIntersecting
+            ? handleIntersectionActivation(index)
+            : handleIntersectionDeactivation(index),
+        );
       }),
     [subItems],
   );
 
-  const activeSubItem = findActiveSubItem(router)(subItems);
-  const toggleMenu = () => setMenuVisible(!menuVisible);
-
   return (
     <nav className="relative mt-6">
       <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap mr-52 pb-3">
         {subItems.map((_, i) => (
-          <IntersectionObserverTag
+          <HeaderSubMenuItem
             key={String(i)}
-            tag="span"
-            observerCallback={observerCallbacks[i]}
+            context={context}
+            className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
+            active={_ === activeSubItem}
+            bgColor={bgColor}
             observerOptions={observerOptions}
-          >
-            <HeaderItem
-              className={`mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`}
-              active={_ === activeSubItem}
-              {...useLink({ router, handlerDecorator }, _)}
-              bgColor={bgColor}
-            />
-          </IntersectionObserverTag>
+            onVisibilityChange={subItemsVisibilityHandlers[i]}
+            {..._}
+          />
         ))}
       </div>
       {dropDownMenuItems.length ? (
         <DropdownMenu
           context={context}
-          activeSubItem={activeSubItem}
-          menuVisible={menuVisible}
-          toggleMenu={toggleMenu}
-          menuItems={dropDownMenuItems}
+          className="absolute w-52 -top-4 right-0 pt-4 z-40"
+          items={dropDownMenuItems}
+          activeItem={activeSubItem}
           bgColor={bgColor}
         />
       ) : null}