@redneckz/wildless-cms-uni-blocks 0.3.32 → 0.3.35

package/src/components/ContentPage/ContentPageContext.tsx

@@ -3,8 +3,8 @@ export interface Router {
   query: Record<string, string | string[] | undefined>;
   href?: string;
   basePath?: string;
-  push: (url?: string) => void;
-  replace: (url?: string) => void;
+  push: (url: string) => void;
+  replace: (url: string) => void;
 }
 
 export interface LikeService {

package/src/components/CreditCalculator/CreditCalculator.example.json

@@ -3,17 +3,23 @@
     {
       "title": "Вкладка 1",
       "description": "Описание",
-      "icon": "CardIcon"
+      "icon": {
+        "icon": "CardIcon"
+      }
     },
     {
       "title": "Вкладка 2",
       "description": "Описание",
-      "icon": "ChartSquareIcon"
+      "icon": {
+        "icon": "ChartSquareIcon"
+      }
     },
     {
       "title": "Вкладка 3",
       "description": "Описание",
-      "icon": "DiscountShapeIcon"
+      "icon": {
+        "icon": "DiscountShapeIcon"
+      }
     }
   ]
 }

package/src/components/CreditCalculator/CreditCalculator.fixture.tsx

@@ -7,19 +7,19 @@ const TABS: CreditCalculatorTab[] = [
     title: 'Кредит',
     description: 'Ставка от 6% до 7 лет',
     directoryName: 'credit-calculator-data',
-    icon: 'CardIcon',
+    icon: { icon: 'CardIcon' },
   },
   {
     title: 'Кредит',
     description: 'Ставка от 4% до 7 лет',
     directoryName: 'credit-calculator-data1',
-    icon: 'ChartSquareIcon',
+    icon: { icon: 'ChartSquareIcon' },
   },
   {
     title: 'Кредит',
     description: 'Ставка от 3% до 6 лет',
     directoryName: 'credit-calculator-data2',
-    icon: 'DiscountShapeIcon',
+    icon: { icon: 'DiscountShapeIcon' },
   },
 ];
 

package/src/components/CreditCalculator/defaultTabs.ts

@@ -5,18 +5,18 @@ export const DEFAULT_TABS: CreditCalculatorTab[] = [
     title: 'Кредит',
     description: 'Ставка от 6% до 7 лет',
     directoryName: 'credit-calculator-data',
-    icon: 'CardIcon',
+    icon: { icon: 'CardIcon' },
   },
   {
     title: 'Кредит',
     description: 'Ставка от 4% до 7 лет',
     directoryName: 'credit-calculator-data1',
-    icon: 'ChartSquareIcon',
+    icon: { icon: 'ChartSquareIcon' },
   },
   {
     title: 'Кредит',
     description: 'Ставка от 3% до 6 лет',
     directoryName: 'credit-calculator-data2',
-    icon: 'DiscountShapeIcon',
+    icon: { icon: 'DiscountShapeIcon' },
   },
 ];

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
 import { formatCurrency } from './formatCurrency';
 
@@ -36,7 +36,7 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
     <tr key={code} className="pb-1">
       <td className="pt-4">
         <div className="flex items-center">
-          {code ? <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" /> : null}
+          {code ? <Img image={{ icon: CURRENCY_ICONS_MAP[code] }} width="24" height="24" /> : null}
           <span className="text-m-title-md ml-2">{code}</span>
         </div>
       </td>

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 
 interface CurrentLocationProps {
   className?: string;
@@ -10,7 +10,7 @@ interface CurrentLocationProps {
 export const CurrentLocation = JSX<CurrentLocationProps>(
   ({ className = '', address, distance }) => (
     <div className={`flex text-sm ${className}`}>
-      <Icon className="min-w-fit" name="GpsIcon" width="24" height="24" asSVG />
+      <Img className="min-w-fit" image={{ icon: 'GpsIcon' }} width="24" height="24" asSVG />
       <div className="ml-3 font-light">
         {address ? <p className="m-0 mb-[3px]">{address}</p> : null}
         {distance ? (

package/src/components/Footer/Contacts.tsx

@@ -9,17 +9,17 @@ export interface ContactsProps extends UniBlockProps {
   hasButton?: boolean;
 }
 
-export const Contacts = JSX<ContactsProps>(({ className, items, hasButton, context }) => {
+export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
 
   return (
-    <div className={`flex flex-col ${className || ''}`}>
+    <div className={className}>
       {items?.length ? items.map(renderContact) : null}
       {hasButton ? (
         <Button
           version="primary"
-          className="mt-0.5 mb-5"
+          className="mb-6 w-full"
           {...useLink(
             { router, handlerDecorator },
             {
@@ -38,9 +38,9 @@ const renderContact = (item: ContactInfo, index: number) => {
   const { type, text, description } = item;
 
   return (
-    <div className="mb-3.5" key={String(index)}>
+    <div className="mb-4" key={String(index)}>
       <div>{renderText(type, text)}</div>
-      <div className="font-sans text-sm text-secondary-text">{description}</div>
+      <div className="mt-1 font-sans font-light text-sm text-secondary-text">{description}</div>
     </div>
   );
 };
@@ -50,7 +50,7 @@ const renderText = (type: ContactInfo['type'], text = '') => {
     case 'tel':
       return (
         <a
-          className="font-sans font-medium text-xl text-primary-text no-underline"
+          className="font-sans text-xl text-primary-text no-underline"
           href={`tel:${formatTel(text)}`}
         >
           {text}
@@ -58,10 +58,7 @@ const renderText = (type: ContactInfo['type'], text = '') => {
       );
     case 'email':
       return (
-        <a
-          className="font-sans font-medium text-xl text-primary-text no-underline"
-          href={`mailto:${text}`}
-        >
+        <a className="font-sans text-xl text-primary-text no-underline" href={`mailto:${text}`}>
           {text}
         </a>
       );

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

@@ -20,9 +20,9 @@ export default {
             type: 'tel',
           },
           {
-            text: 'example@example.com',
-            description: 'Для писем',
-            type: 'email',
+            text: '8 (800) 100-01-00',
+            description: 'По России',
+            type: 'tel',
           },
           {
             text: '7787',

package/src/components/Footer/Footer.fixture.tsx

@@ -70,6 +70,7 @@ export default {
           { href: 'https://vk.com' },
           { href: 'https://ok.ru' },
         ]}
+        mobileApps={[{ href: 'https://apps.apple.com' }, { href: 'https://play.google.com' }]}
         contacts={[
           {
             text: '+7 (495) 787-7-787',
@@ -77,9 +78,9 @@ export default {
             type: 'tel',
           },
           {
-            text: 'example@example.com',
-            description: 'Для писем',
-            type: 'email',
+            text: '8 (800) 100-01-00',
+            description: 'По России',
+            type: 'tel',
           },
           {
             text: '7787',

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

@@ -10,7 +10,7 @@ import { TextInformation } from './TextInformation';
 
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { Button } from '../../ui-kit/Button/Button';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { getAccordionItems } from '../../utils/getAccordionItems';
 
@@ -59,7 +59,7 @@ const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
   return (
     <Button version="link" key={`footer-${i}`} href={href} className="flex text-sm mb-4">
-      {icon ? <Icon className="pr-1" name={icon} width="24" height="24" asSVG /> : null}
+      {icon ? <Img className="pr-1" image={icon} width="24" height="24" asSVG /> : null}
       <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>
   );

package/src/components/Footer/Footer.tsx

@@ -9,8 +9,7 @@ import { Sitemap } from './Sitemap';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
-const LEFT_COL_WIDTH_FULL_HD = 'w-[280px]';
-const LEFT_COL_WIDTH_SMALL_DESKTOP = 'xl:w-[220px]';
+const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
 
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
@@ -21,27 +20,30 @@ export const Footer = JSX<FooterProps>(
     relatedEnterprises,
     contacts,
     socialMedia,
+    mobileApps,
     topItems,
     context,
     anchor = null,
   }) => {
     return (
-      <footer className={`px-9 py-10 bg-white ${className || ''}`} id={anchor}>
-        <div className="flex items-stretch gap-[54px] pb-8 xl:gap-8">
-          <Logo className={`${LEFT_COL_WIDTH_FULL_HD} ${LEFT_COL_WIDTH_SMALL_DESKTOP}`} />
+      <footer className={`px-9 pt-9 pb-8 bg-white ${className || ''}`} id={anchor}>
+        <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">
+          <Logo className={LEFT_COL_WIDTH_FULL_HD} />
           <SearchBar context={context} className="grow" />
         </div>
         <div className="flex items-stretch gap-[54px] xl:gap-8">
-          <Contacts
-            className={`${LEFT_COL_WIDTH_FULL_HD} shrink-0 overflow-hidden ${LEFT_COL_WIDTH_SMALL_DESKTOP}`}
-            items={contacts}
-            context={context}
-            hasButton
-          />
+          <div className={`${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`}>
+            <Contacts items={contacts} context={context} hasButton />
+            <SocialMedia media={socialMedia} context={context}>
+              Соцсети
+            </SocialMedia>
+            <SocialMedia className="mt-6" media={mobileApps} context={context}>
+              Мобильное приложение
+            </SocialMedia>
+          </div>
           <Sitemap className="pt-[3px]" context={context} items={topItems} />
         </div>
-        <SocialMedia media={socialMedia} context={context} />
-        <HorizontalNavigation links={relatedEnterprises} context={context} />
+        <HorizontalNavigation className="mt-24" links={relatedEnterprises} context={context} />
         <TextInformation links={documents} context={context} />
       </footer>
     );

package/src/components/Footer/FooterContent.ts

@@ -1,6 +1,7 @@
+import type { IconName } from '../../icons/IconName';
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Тип контакта
@@ -32,7 +33,7 @@ export type SocialMedia = Omit<LinkProps, 'text'>;
  */
 export interface SubMenuItem extends LinkProps {
   /** @title Иконка подменю */
-  icon?: IconName;
+  icon?: Picture;
 }
 
 /**
@@ -48,6 +49,8 @@ export interface FooterContent extends SitemapProps {
   contacts?: ContactInfo[];
   /** @title Социальные сети */
   socialMedia?: SocialMedia[];
+  /** @title Мобильные приложения */
+  mobileApps?: SocialMedia[];
   /** @title Заголовок для меню */
   horizontalNavigationTitle?: string; // TODO: для мобильной версии
   /** @title Подменю */

package/src/components/Footer/HorizontalNavigation.tsx

@@ -40,7 +40,7 @@ interface HorizontalNavigationLinkProps extends LinkProps {
 const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
   ({ className = '', index, text, href, target, onClick }) => (
     <a
-      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline  max-w-[292px] ${className}`}
+      className={`font-sans font-light text-secondary-text hover:text-primary-main inline-block no-underline  max-w-[292px] ${className}`}
       href={href}
       target={target}
       onClick={onClick}

package/src/components/Footer/MediaButton.tsx

@@ -1,23 +1,49 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
+import type { Picture } from '../../model/Picture';
 
 const ICONS_MAP: Array<{
   origins: string[];
-  icon: IconName;
+  icon: Picture;
   label: string;
   width: string;
   height: string;
 }> = [
   {
     origins: ['t.me', 'telegram.org'],
-    icon: 'TelegramIcon',
+    icon: { icon: 'TelegramIcon' },
     label: 'Телеграм',
     width: '20px',
     height: '16px',
   },
-  { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте', width: '24px', height: '12px' },
-  { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
+  {
+    origins: ['vk.com'],
+    icon: { icon: 'VKIcon' },
+    label: 'ВКонтакте',
+    width: '24px',
+    height: '12px',
+  },
+  {
+    origins: ['ok.ru'],
+    icon: { icon: 'OkIcon' },
+    label: 'Одноклассники',
+    width: '12px',
+    height: '20px',
+  },
+  {
+    origins: ['apps.apple.com'],
+    icon: { icon: 'AppleIcon' },
+    label: 'App Store',
+    width: '20px',
+    height: '22px',
+  },
+  {
+    origins: ['play.google.com'],
+    icon: { icon: 'PlayMarketIcon' },
+    label: 'Google Play',
+    width: '21px',
+    height: '21px',
+  },
 ];
 
 interface MediaButtonProps {
@@ -32,15 +58,15 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
 
   return (
     <a
-      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[40px] h-[40px] box-border hover:text-primary-main"
+      className="flex items-center justify-center border border-solid rounded-md border-main-divider no-underline outline-none w-14 h-14 box-border text-primary-main hover:text-white hover:bg-primary-main hover:border-primary-main"
       href={href}
       aria-label={label}
       target="_blank"
       rel="noopener noreferrer"
     >
-      {Icon && (
-        <Icon name={icon} width={width} height={height} asSVG className="block" color="none" />
-      )}
+      {icon ? (
+        <Img image={icon} width={width} height={height} asSVG className="block" color="none" />
+      ) : null}
     </a>
   );
 });

package/src/components/Footer/Sitemap.tsx

@@ -10,7 +10,7 @@ export interface SitemapProps extends UniBlockProps {
   items?: TopMenuItem[];
 }
 
-export const Sitemap = JSX<SitemapProps>(({ className, items, context }) => {
+export const Sitemap = JSX<SitemapProps>(({ className = '', items, context }) => {
   const sitemap = useSitemap(context.useAsyncData);
   const mergedItems = mergeTopItems(sitemap.topItems, items);
   const linkParams = {
@@ -19,7 +19,7 @@ export const Sitemap = JSX<SitemapProps>(({ className, items, context }) => {
   };
 
   return (
-    <div className={`flex items-start justify-start gap-11 xl:gap-5 ${className || ''}`}>
+    <div className={`flex items-start justify-between gap-11 xl:gap-5 ${className}`}>
       {mergedItems?.map((_, i) => renderColumn(_, i, linkParams))}
     </div>
   );
@@ -29,9 +29,9 @@ const renderColumn = (c: TopMenuItem, index: number, { router, handlerDecorator
   const { text, href, items, target } = c;
 
   return (
-    <div key={String(index)} className="flex flex-col gap-[14px]">
+    <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-[14px]">
       <a
-        className="block font-sans font-medium text-base text-primary-text no-underline"
+        className="block font-sans leading-5 text-base text-primary-text no-underline"
         href={href}
         target={target || '_self'}
       >
@@ -50,7 +50,7 @@ interface ColumnItemProps extends LinkProps {
 
 const ColumnItem = JSX<ColumnItemProps>(({ text, href, target, index }) => (
   <a
-    className="block font-sans font-normal text-base text-secondary-text hover:text-primary-main no-underline"
+    className="block font-sans font-light text-base text-secondary-text hover:text-primary-main no-underline"
     href={href}
     target={target || '_self'}
   >

package/src/components/Footer/SocialMedia.tsx

@@ -8,14 +8,17 @@ export interface SocialMediaProps extends UniBlockProps {
   media?: Omit<LinkProps, 'text'>[];
 }
 
-export const SocialMedia = JSX<SocialMediaProps>(({ className, media, context }) => {
+export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media, context, children }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
   return (
-    <div className={`flex items-end justify-end gap-2 pt-[30px] pb-7 ${className || ''}`}>
-      {media?.map((_, index) => (
-        <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
-      ))}
+    <div>
+      <div className={`flex gap-2.5 mb-1.5 ${className}`}>
+        {media?.map((_, index) => (
+          <MediaButton key={String(index)} {...useLink({ router, handlerDecorator }, _)} />
+        ))}
+      </div>
+      <span className="font-light text-sm text-secondary-text">{children}</span>
     </div>
   );
 });

package/src/components/Footer/TextInformation.tsx

@@ -9,7 +9,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   return (
     <div className={`${className || ''}`}>
       <div className="pt-5 pb-[5px]">
-        <span className="font-sans font-normal text-xs text-secondary-text">
+        <span className="font-sans font-light text-xs text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>
@@ -37,7 +37,7 @@ interface TextInformationLinkProps extends LinkProps {
 const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
   ({ className, index, text, href, target, onClick }) => (
     <a
-      className={`font-sans font-normal text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
+      className={`font-sans font-light text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
         className || ''
       }`}
       href={href}

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

@@ -20,7 +20,7 @@ const buttonPrimary: ButtonCommonProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'secondary',
-  icon: 'BankIcon',
+  icon: { icon: 'BankIcon' },
 };
 const link: ButtonCommonProps = {
   href: '/credit-cards',

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

@@ -26,7 +26,7 @@ const buttonPrimaryIcon: ButtonCommonProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'secondary',
-  icon: 'BankIcon',
+  icon: { icon: 'BankIcon' },
 };
 
 const defaultItems = [

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

@@ -1,14 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BlockVersion } from '../../model/BlockVersion';
+import type { ListOrientation } from '../../model/ListOrientation';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { GalleryCard } from './GalleryContent';
 import { GalleryItem } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
-import type { ListOrientation } from '../../model/ListOrientation';
 
 const blockStyle: Record<BlockVersion, string> = {
   primary: 'bg-white',
@@ -75,7 +74,7 @@ function renderButton(button) {
   return (
     <Button
       className="mt-3"
-      appendLeft={button?.icon && <Icon name={button?.icon} width="24px" height="24px" asSVG />}
+      appendLeft={button?.icon && <Img image={button?.icon} width="24px" height="24px" asSVG />}
       {...button}
     />
   );

package/src/components/Gallery/GalleryCardInner.tsx

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import type { GalleryCard, GalleryItem } from './GalleryContent';
-import type { BlockVersion } from '../../model/BlockVersion';
 
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version }) => {
@@ -33,7 +32,7 @@ function renderButton(button) {
   return (
     <Button
       className="mt-6 w-full"
-      appendLeft={button.icon && <Icon name={button.icon} width="24px" height="24px" asSVG />}
+      appendLeft={button.icon && <Img image={button.icon} width="24px" height="24px" asSVG />}
       {...button}
     />
   );

package/src/components/Header/Header.tsx

@@ -1,16 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { BgColorVersion } from '../../model/BgColorVersion';
-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 type { UniBlockProps } from '../../types';
-import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
+import { HeaderSubMenu } from './HeaderSubMenu';
 
 const BORDER_COLORS: Record<BgColorVersion, string> = {
   'bg-white': 'bg-main-divider',
@@ -21,7 +20,7 @@ export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
   ({
-    className,
+    className = '',
     defaultLocation = 'Москва',
     bgColor = 'bg-white',
     context,
@@ -34,8 +33,6 @@ export const Header = JSX<HeaderProps>(
 
     const mergedItems = mergeTopItems(sitemap.topItems, topItems);
     const activeTopItem = mergedItems.find(isTopItemActive(router));
-    const subItems = activeTopItem?.items;
-    const activeSubItem = findActiveSubItem(router)(subItems);
 
     const topMenu = mergedItems.map((_, i) => (
       <TopItem
@@ -47,18 +44,8 @@ export const Header = JSX<HeaderProps>(
       />
     ));
 
-    const subMenu = subItems?.map((_) => (
-      <HeaderItem
-        key={_.href}
-        className="mr-8"
-        active={_ === activeSubItem}
-        {...useLink({ router, handlerDecorator }, _)}
-        bgColor={bgColor}
-      />
-    ));
-
     return (
-      <header className={`pt-5 pb-8 px-20 ${bgColor} ${className || ''}`} id={anchor}>
+      <header className={`pt-6 pb-8 px-20 ${bgColor} ${className}`} id={anchor}>
         <div className="container">
           <div className="flex items-center">
             <Logo className="mr-8" bgColor={bgColor} />
@@ -70,8 +57,8 @@ export const Header = JSX<HeaderProps>(
               bgColor={bgColor}
             />
           </div>
-          <div className={`mt-5 h-[1px] ${BORDER_COLORS[bgColor]}`} />
-          <nav className="mt-5">{subMenu}</nav>
+          <div className={`mt-6 h-[1px] ${BORDER_COLORS[bgColor]}`} />
+          <HeaderSubMenu context={context} subItems={activeTopItem?.items} bgColor={bgColor} />
         </div>
       </header>
     );

package/src/components/Header/HeaderBurger.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { DispositionItem } from './HeaderContent';
@@ -21,14 +21,14 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
           className="absolute top-4 right-4 border-none bg-transparent cursor-pointer"
           onClick={onClick}
         >
-          <Icon name="CloseIcon" width="24" height="24" asSVG />
+          <Img image="CloseIcon" width="24" height="24" asSVG />
         </button>
         <button
           onClick={getCity}
           className="flex items-center text-sm text-secondary-text p-0 mb-4 bg-transparent cursor-pointer"
         >
-          <Icon
-            name="GeolocationIcon"
+          <Img
+            image="GeolocationIcon"
             width="20"
             height="20"
             className="text-primary-main box-border mr-2"
@@ -49,7 +49,7 @@ const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
   return (
     <a key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4 hover:text-primary-main">
       {icon ? (
-        <Icon className="text-primary-main pr-1" name={icon} width="24" height="24" asSVG />
+        <Img className="text-primary-main pr-1" image={icon} width="24" height="24" asSVG />
       ) : null}
       <span className="pl-0.5 font-medium">{text}</span>
     </a>