@redneckz/wildless-cms-uni-blocks 0.7.1 → 0.7.3

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

@@ -1,18 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { MediaButton } from './MediaButton';
 
 export interface SocialMediaProps {
   className?: string;
   media?: Omit<LinkProps, 'text'>[];
-  version?: BlockVersion;
 }
 
-export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media, version }) => (
+export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media }) => (
   <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className}`}>
     {media?.map((_, index) => (
-      <MediaButton key={String(index)} version={version} {..._} />
+      <MediaButton key={String(index)} {..._} />
     ))}
   </div>
 ));

package/src/components/Footer/SocialMedia.tsx

@@ -1,28 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import { type ButtonSize, MediaButton } from './MediaButton';
+import { MediaButton, type ButtonSize } from './MediaButton';
 
 export interface SocialMediaProps {
   className?: string;
-  media?: Omit<LinkProps, 'text'>[];
-  version?: BlockVersion;
+  media?: LinkProps[];
   isRounded?: boolean;
   buttonSize?: ButtonSize;
 }
 
 export const SocialMedia = JSX<SocialMediaProps>(
-  ({ className = '', media, version, isRounded = false, buttonSize, children }) => (
+  ({ className = '', media, isRounded = false, buttonSize, children }) => (
     <div className="font-sans">
       <div className={`flex gap-2.5 ${className}`}>
         {media?.map((_, index) => (
-          <MediaButton
-            key={String(index)}
-            version={version}
-            isRounded={isRounded}
-            buttonSize={buttonSize}
-            {..._}
-          />
+          <MediaButton key={String(index)} isRounded={isRounded} buttonSize={buttonSize} {..._} />
         ))}
       </div>
       <span className="text-s-light text-secondary-text">{children}</span>

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

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

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

@@ -1,37 +1,34 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
+import { blockStyles, BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { ListItemVersion } from '../../ui-kit/List/ListProps';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
 
 export const Gallery = JSX<GalleryProps>(
-  ({ title, description, cards = [], className, orientation = 'horizontal' }) => {
-    const headingClassName = description ? 'mb-2' : 'mb-5';
-
-    return (
-      <section
-        className={`relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`}
-      >
-        <div className="flex flex-col items-center mb-5">
-          {title ? (
-            <Heading headingType="h3" className={`text-center ${headingClassName}`} title={title} />
-          ) : null}
-          {description ? (
-            <div className="text-m max-w-[600px] text-center mb-5">{description}</div>
-          ) : null}
-        </div>
-        {renderCardsLayout(orientation, cards)}
-      </section>
-    );
-  },
+  ({ className = '', title, description, cards = [], orientation = 'horizontal', ...rest }) => (
+    <BlockWrapper className={`relative px-4 py-6 overflow-hidden ${className}`} {...rest}>
+      <div className="flex flex-col items-center mb-5">
+        {title ? (
+          <Heading
+            headingType="h3"
+            className={`text-center ${description ? 'mb-2' : 'mb-5'}`}
+            title={title}
+          />
+        ) : null}
+        {description ? (
+          <div className="text-m max-w-[600px] text-center mb-5">{description}</div>
+        ) : null}
+      </div>
+      {renderCardsLayout(orientation, cards)}
+    </BlockWrapper>
+  ),
 );
 
 function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps[]) {
@@ -46,7 +43,7 @@ function renderCard(card: GalleryCardProps, key: number) {
   return (
     <div
       className={`w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-gray p-4
-      ${VersionStyleMap[card.version ?? 'primary']}`}
+      ${blockStyles[card.version ?? 'primary']}`}
       key={key}
     >
       <div>
@@ -83,10 +80,12 @@ function renderDescription(card: GalleryCardProps) {
   );
 }
 
-const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
+const LIST_DOT_STYLE_MAP: Record<BlockVersion, string> = {
   primary: 'bg-primary-text',
   secondary: 'bg-white',
-  gray: 'bg-secondary-text',
+  gray: 'bg-primary-text',
+  transparent: '',
+  '': '',
 };
 
 function renderItems(

package/src/components/Gallery/Gallery.tsx

@@ -2,4 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { GalleryInner } from './GalleryInner';
 import type { GalleryProps } from './GalleryProps';
 
-export const Gallery = JSX<GalleryProps>((props) => <GalleryInner {...props} version="normal" />);
+export const Gallery = JSX<GalleryProps>((props) => (
+  <GalleryInner {...props} galleryVersion="normal" />
+));

package/src/components/Gallery/GalleryCardInner.tsx

@@ -1,9 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { AlignText } from '../../model/AlignText';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionAdditionalStyleMap } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
@@ -19,36 +18,37 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
     icon,
     items,
     button,
-    version,
     isFullWidth = true,
     isDotted = true,
     align = 'center',
+    ...rest
   }) => (
-    <div className={`h-full flex flex-col justify-between ${AlignText[align]}`}>
+    <BlockWrapper
+      className={`h-full flex flex-col justify-between ${AlignText[align]}`}
+      tag="div"
+      {...rest}
+    >
       <div className="flex flex-col h-full">
-        {renderImage(icon, version)}
+        {renderImage(icon)}
         {renderCardTitle(headlineSmallVersion, title)}
         {renderDescription(description, title)}
-        {items?.length ? renderItems(items, isDotted, version) : null}
-        {renderAdditionalDescription(additionalDescription, version)}
+        {items?.length ? renderItems(items, isDotted) : null}
+        {renderAdditionalDescription(additionalDescription)}
       </div>
-      {button?.text
-        ? renderButton({
-            button,
-            buttonClassName: `mt-6 ${isFullWidth ? '' : 'self-center'}`,
-          })
-        : null}
-    </div>
+      {renderButtonsSection([button], {
+        buttonClassName: `mt-6 ${isFullWidth ? 'w-full' : 'self-center'}`,
+      })}
+    </BlockWrapper>
   ),
 );
 
-const renderImage = (image?: Picture, version?: BlockVersion) => (
+const renderImage = (image?: Picture) => (
   <div className="flex justify-center">
     {image?.src ? <Img className="mb-5" image={image} /> : null}
     {image?.icon ? (
       <Img
         className={`w-8 h-8 min-w-8 mb-5 rounded-full`}
-        image={getIconWithVersion(image, version)}
+        image={getIconWithVersion(image)}
         asSVG
       />
     ) : null}
@@ -61,23 +61,18 @@ const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
 const renderDescription = (description?: string, title?: string) =>
   description ? <div className={`text-l ${title ? 'mt-2' : ''}`}>{description}</div> : null;
 
-const renderAdditionalDescription = (additionalDescription?: string, version?: BlockVersion) =>
+const renderAdditionalDescription = (additionalDescription?: string) =>
   additionalDescription ? (
-    <div className={`text-m-light mt-auto ${VersionAdditionalStyleMap[version ?? 'primary']}`}>
+    <div className={`text-m-light mt-auto group-data-primary:text-secondary-text`}>
       {additionalDescription}
     </div>
   ) : null;
 
-const renderItems = (
-  items: GalleryItemProps[],
-  isDotted: boolean,
-  version: BlockVersion = 'primary',
-) => (
+const renderItems = (items: GalleryItemProps[], isDotted: boolean) => (
   <List
-    className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
+    className="max-w-[308px] mt-2 text-s group-data-primary:text-secondary-text"
     itemClassName="text-left"
     items={items.filter((item) => item?.text).map((item) => item.text as string)}
     isDotted={isDotted}
-    version={version}
   />
 );

package/src/components/Gallery/GalleryContainer.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { GalleryVersion } from '../../model/GalleryVersion';
+import { blockStyles } from '../../ui-kit/BlockWrapper';
 import { Headline } from '../Headline/Headline';
 import { cardStyleMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
 import { GalleryCardInner } from './GalleryCardInner';
@@ -13,32 +13,44 @@ export interface GalleryContainerProps extends GalleryInnerProps {
 
 export interface GalleryCardData {
   card: GalleryCardProps;
-  version: GalleryVersion;
+  galleryVersion: GalleryVersion;
 }
 
 export const GalleryContainer = JSX<GalleryContainerProps>(
-  ({ headlineVersion = 'M', cards = [], version = 'normal', activeIndex, ...rest }) => (
+  ({
+    headlineVersion = 'M',
+    cards = [],
+    galleryVersion = 'normal',
+    activeIndex,
+    title,
+    description,
+  }) => (
     <div>
-      <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} />
+      <Headline
+        className="!p-0"
+        title={title}
+        description={description}
+        headlineVersion={headlineVersion}
+      />
       <div
         className={`flex mt-8 ${
-          cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
+          cards?.length <= galleryLengthForScrollMap[galleryVersion] ? 'justify-center' : ''
         } duration-1000`}
-        style={{ transform: `translateX(-${activeIndex * cardWidthMap[version]}px)` }}
+        style={{ transform: `translateX(-${activeIndex * cardWidthMap[galleryVersion]}px)` }}
         role="list"
       >
-        {cards?.map((card, i) => renderCard({ card, version }, i))}
+        {cards?.map((card, i) => renderCard({ card, galleryVersion }, i))}
       </div>
     </div>
   ),
 );
 
-function renderCard({ card, version }: GalleryCardData, i: number) {
+function renderCard({ card, galleryVersion }: GalleryCardData, i: number) {
   return (
     <section
       className={`box-border border-solid border border-gray p-6 mx-2 flex flex-col justify-between
-        items-stretch ${cardStyleMap[version]} ${
-        VersionStyleMap[card.version ?? 'primary']
+        items-stretch ${cardStyleMap[galleryVersion]} ${
+        blockStyles[card.version ?? 'primary'] // TODO Replace with direct BlockWrapper usage
       } w-full col-span-4`}
       key={String(i)}
       role="listitem"

package/src/components/Gallery/GalleryInner.tsx

@@ -3,30 +3,35 @@ import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { GalleryVersion } from '../../model/GalleryVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { galleryLengthForScrollMap } from './constants';
 import { GalleryContainer } from './GalleryContainer';
 import type { GalleryContent } from './GalleryContent';
 
 export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
-  version?: GalleryVersion;
+  galleryVersion?: GalleryVersion;
 }
 
 export const GalleryInner = JSX<GalleryInnerProps>(
-  ({ cards = [], className = '', version = 'normal', button, ...rest }) => {
+  ({ cards = [], className = '', galleryVersion = 'normal', button, ...rest }) => {
     const [activeIndex, controls] = useCarouselControls({
       itemCount: cards?.length,
-      visibleItemCount: galleryLengthForScrollMap[version],
+      visibleItemCount: galleryLengthForScrollMap[galleryVersion],
     });
     const { isScrollAvailable } = controls;
 
     return (
       <BlockWrapper
-        className={`relative font-sans text-primary-text bg-white p-[42px] overflow-hidden flex flex-col ${className}`}
+        className={`relative p-[42px] overflow-hidden flex flex-col ${className}`}
         {...rest}
       >
-        <GalleryContainer cards={cards} version={version} activeIndex={activeIndex} {...rest} />
+        <GalleryContainer
+          cards={cards}
+          galleryVersion={galleryVersion}
+          activeIndex={activeIndex}
+          {...rest}
+        />
         {renderArrows({
           ...controls,
           btnClass: ['left-8', 'right-8'],
@@ -38,7 +43,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
             <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
           </div>
         ) : null}
-        {button ? renderButton({ button, buttonClassName: 'mt-8 mx-auto' }) : null}
+        {renderButtonsSection([button], { className: 'mt-8 mx-auto' })}
       </BlockWrapper>
     );
   },

package/src/components/GracePeriod/GracePeriod.tsx

@@ -13,14 +13,8 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={`font-sans bg-white p-12 ${className}`} {...rest}>
-      <Headline
-        className="!p-0 mb-4"
-        title={title}
-        description={description}
-        headlineVersion="M"
-        {...rest}
-      />
+    <BlockWrapper className={`p-12 ${className}`} {...rest}>
+      <Headline className="!p-0 mb-4" title={title} description={description} headlineVersion="M" />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>
   ),

package/src/components/Header/DropdownMenu.tsx

@@ -2,64 +2,58 @@ 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 { LinkProps } from '../../model/LinkProps';
 
-const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'bg-primary-text',
-  transparent: 'bg-white',
-};
-
 interface DropdownMenuProps {
   className?: string;
   items: LinkProps[];
   activeItem?: LinkProps;
-  bgColor?: BgColorVersion;
 }
 
-export const DropdownMenu = JSX<DropdownMenuProps>(
-  ({ className = '', items, activeItem, bgColor }) => {
-    const link = useLink();
+export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, activeItem }) => {
+  const link = useLink();
 
-    const [visible, setVisible] = useState(false);
-    const handleToggle = useCallback(() => setVisible((_) => !_), []);
+  const [visible, setVisible] = useState(false);
+  const handleToggle = useCallback(() => setVisible((_) => !_), []);
 
-    const handleClickOutside = useCallback(() => setVisible(false), []);
-    const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
+  const handleClickOutside = useCallback(() => setVisible(false), []);
+  const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
 
-    return (
-      <div
-        className={`${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`}
-        ref={ref}
+  return (
+    <div
+      className={`${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`}
+      ref={ref}
+    >
+      <button
+        className="group/btn flex justify-between items-center h-6 ml-6"
+        aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+        onClick={handleToggle}
       >
-        <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' : ''
-              }`}
-              {...link(item)}
-            >
-              {item.text}
-            </a>
+        {Array(3)
+          .fill(null)
+          .map((_, i) => (
+            <div
+              key={String(i)}
+              className="w-[3px] h-[3px] rounded mr-1 bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white"
+            />
           ))}
-        </div>
+      </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' : ''
+            }`}
+            {...link(item)}
+          >
+            {item.text}
+          </a>
+        ))}
       </div>
-    );
-  },
-);
-
-const renderDot = (bgColor: BgColorVersion, i: number) => (
-  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
-);
+    </div>
+  );
+});

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

@@ -1,6 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useRouter } from '../../hooks/useRouter';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
@@ -8,6 +10,7 @@ import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import type { SitemapDataProps } from '../../services/sitemap/SitemapProps';
 import { useSWRResource } from '../../services/sitemap/useSWRResource';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
 import { AccordionItem } from '../AccordionItem/AccordionItem';
@@ -18,54 +21,60 @@ import { HeaderTop } from './HeaderTop';
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
-export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white', ...rest }) => {
-  const router = useRouter();
+const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
+  'bg-white': 'primary',
+  transparent: 'transparent',
+};
 
-  const fallback: Fallback | undefined = rest.options?.page?.fallback;
-  const { topItems, dispositions, defaultLocation, logo } = useSWRResource<SitemapDataProps>(
-    projectSettings.SITEMAP || 'sitemap',
-    fallback,
-  );
+export const Header = JSX<HeaderProps>(
+  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
+    const router = useRouter();
 
-  const activeTopItem = topItems?.find(isTopItemActive(router));
-  const subItems = activeTopItem?.items;
-  const activeSubItem = findActiveSubItem(router)(subItems);
-  const [burgerMenuShow, setBurgerMenuShow] = useState(false);
-  const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
+    const fallback: Fallback | undefined = rest.options?.page?.fallback;
+    const { topItems, dispositions, defaultLocation, logo } = useSWRResource<SitemapDataProps>(
+      projectSettings.SITEMAP || 'sitemap',
+      fallback,
+    );
 
-  return (
-    <header className={`${bgColor} ${className}`}>
-      <div className="container px-4 py-0 box-border">
-        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} logo={logo} />
-        <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
-          <div className="flex no-scrollbar horizontal-list h-full items-center">
-            {subItems?.map((_, i) => (
-              <HeaderItem
-                key={String(i)}
-                className="mr-8 whitespace-nowrap text-s"
-                active={_ === activeSubItem}
-                bgColor={bgColor}
-                {..._}
-              />
-            ))}
-          </div>
-        </nav>
-      </div>
-      {burgerMenuShow ? (
-        <HeaderBurger
-          onClick={handleBurgerMenuShow}
-          burgerSubMenu={dispositions}
-          defaultLocation={defaultLocation}
-        >
-          <AccordionItemsList>
-            {topItems?.map((item, i) => (
-              <AccordionItem key={String(i)} label={item.text}>
-                <LinkList documents={item.items} />
-              </AccordionItem>
-            ))}
-          </AccordionItemsList>
-        </HeaderBurger>
-      ) : null}
-    </header>
-  );
-});
+    const activeTopItem = topItems?.find(isTopItemActive(router));
+    const subItems = activeTopItem?.items;
+    const activeSubItem = findActiveSubItem(router)(subItems);
+    const [burgerMenuShow, setBurgerMenuShow] = useState(false);
+    const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
+
+    return (
+      <BlockWrapper tag="header" version={version} {...rest}>
+        <div className="container px-4 py-0 box-border">
+          <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} logo={logo} />
+          <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
+            <div className="flex no-scrollbar horizontal-list h-full items-center">
+              {subItems?.map((_, i) => (
+                <HeaderItem
+                  key={String(i)}
+                  className="mr-8 whitespace-nowrap text-s"
+                  active={_ === activeSubItem}
+                  {..._}
+                />
+              ))}
+            </div>
+          </nav>
+        </div>
+        {burgerMenuShow ? (
+          <HeaderBurger
+            onClick={handleBurgerMenuShow}
+            burgerSubMenu={dispositions}
+            defaultLocation={defaultLocation}
+          >
+            <AccordionItemsList>
+              {topItems?.map((item, i) => (
+                <AccordionItem key={String(i)} label={item.text}>
+                  <LinkList documents={item.items} />
+                </AccordionItem>
+              ))}
+            </AccordionItemsList>
+          </HeaderBurger>
+        ) : null}
+      </BlockWrapper>
+    );
+  },
+);