@redneckz/wildless-cms-uni-blocks 0.15.339 → 0.15.340

package/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -5,13 +5,13 @@ import { type VNode } from '../../model/VNode';
 import { Button } from '../../ui-kit/Button/Button';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
+import { getVersion } from '../../utils/getVersion';
 import { style } from '../../utils/style';
 import { type AtmsDef } from './OfficesAtmsMapContent';
-import { type Atm, type Branch } from './OfficesAtmsMapProps';
+import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
+import { renderDescriptionBlock } from './renderDescriptionBlock';
 import { renderFiltrationForm } from './renderFiltrationForm';
 import { type BalloonContent } from './YandexMapProps';
 
@@ -23,9 +23,12 @@ export type InitFilterState = Record<string, boolean>;
 export interface OfficesAtmsMapLayoutProps<T> {
   className?: string;
   data?: T[];
+  remoteWorkplaces?: T[];
   renderCard?: (item: T, index: number) => VNode;
+  renderRemoteWorkplaceCard?: (item: T, index: number) => VNode;
   filterItems?: (data: T[], filtrationState: InitFilterState) => T[];
   getBalloon?: (item: T) => BalloonContent;
+  getBalloonRemoteWorkplaces?: (item: T) => BalloonContent;
   initFilterState?: InitFilterState;
   descriptionData?: AtmsDef;
   title?: string;
@@ -34,13 +37,16 @@ export interface OfficesAtmsMapLayoutProps<T> {
 const filtersVisibleStyles = (activeButton: string) =>
   activeButton === 'all' ? 'block' : 'hidden';
 
-export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm>>(
+export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm | RemoteWorkplace>>(
   ({
     className,
     data = [],
+    remoteWorkplaces = [],
     renderCard = defaultEmptyFunction,
+    renderRemoteWorkplaceCard = defaultEmptyFunction,
     filterItems = defaultFilterItems,
     getBalloon = defaultEmptyFunction,
+    getBalloonRemoteWorkplaces = defaultEmptyFunction,
     initFilterState = {},
     descriptionData,
     title,
@@ -49,18 +55,30 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm>>
 
     const [filtrationState, { field, reset }] = useForm(initFilterState);
 
-    const [filteredItems, points, lengthItems] = useMemo(() => {
+    const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
       const _filteredItems = filterItems(data, filtrationState);
+      const _filteredRemoteWorkplaces = filterItems(remoteWorkplaces, filtrationState);
 
-      const _points = _filteredItems
-        .map((_) => ({
+      const _points = [
+        ..._filteredItems.map((_) => ({
+          type: 'offices',
           coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
           content: getBalloon(_),
-        }))
-        .filter((_) => _.coords && _.coords.length === 2);
+        })),
+        ..._filteredRemoteWorkplaces.map((_: RemoteWorkplace) => ({
+          type: 'workplaces',
+          coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
+          content: getBalloonRemoteWorkplaces({
+            address: _.address,
+            workScheduleDescription: _.workScheduleDescription,
+          }),
+        })),
+      ].filter((_) => _.coords && _.coords.length === 2);
+
+      const itemsLength = _filteredItems.length + _filteredRemoteWorkplaces?.length;
 
-      return [_filteredItems, _points, _filteredItems.length];
-    }, [data, filtrationState]);
+      return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
+    }, [data, remoteWorkplaces, filtrationState]);
 
     const [activeButton, setActiveButton] = useState('all');
 
@@ -89,6 +107,7 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm>>
           </div>
         </div>
         {filteredItems.map(renderCard)}
+        {filteredRemoteWorkplaces.map(renderRemoteWorkplaceCard)}
       </div>
     );
   },
@@ -97,13 +116,13 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm>>
 const renderButtonsGroup = (
   data: Branch[],
   activeButton: string,
-  setActiveButton: (item: string) => void,
+  onButtonClick: (item: string) => void,
 ) => {
-  const allButtonVersion = activeButton === 'all' ? 'primary' : 'secondary';
+  const allButtonVersion = getVersion(activeButton === 'all');
 
-  const businessButtonVersion = activeButton === 'business' ? 'primary' : 'secondary';
+  const businessButtonVersion = getVersion(activeButton === 'business');
 
-  const handleOnClick = (e: any, key: string, branches: Branch[]) => {
+  const handleClick = (e: any, key: string, branches: Branch[]) => {
     if (e.currentTarget === e.target && key === 'business') {
       branches.filter(
         (branch) =>
@@ -113,23 +132,19 @@ const renderButtonsGroup = (
       );
     }
 
-    setActiveButton(key);
+    onButtonClick(key);
 
     return branches;
   };
 
   return (
     <div className="flex gap-lg flex-col sm:flex-row pb-lg">
-      <Button
-        data-id="all"
-        onClick={(e) => handleOnClick(e, 'all', data)}
-        version={allButtonVersion}
-      >
+      <Button data-id="all" onClick={(e) => handleClick(e, 'all', data)} version={allButtonVersion}>
         Для физических лиц
       </Button>
       <Button
         data-id="business"
-        onClick={(e) => handleOnClick(e, 'business', data)}
+        onClick={(e) => handleClick(e, 'business', data)}
         version={businessButtonVersion}
       >
         Для юридических лиц
@@ -137,28 +152,3 @@ const renderButtonsGroup = (
     </div>
   );
 };
-
-const renderDescriptionBlock = ({ __html, list }: AtmsDef) =>
-  __html || list?.length ? (
-    <div className="mb-2xl border-b sm:border border-main-divider sm:rounded-md">
-      {__html ? (
-        <div className="mb-2xl">
-          <RichText __html={__html} />
-        </div>
-      ) : null}
-      {list?.length ? (
-        <div className="flex flex-col sm:flex-row gap-2xl sm:flex-wrap pb-2xl sm:pb-xl">
-          {list.map((item, i) => (
-            <div key={String(i)} className="flex gap-xs items-center">
-              {item?.image ? <Img image={item.image} /> : null}
-              {item?.text ? (
-                <Text size="text-m" font="font-light">
-                  {item.text}
-                </Text>
-              ) : null}
-            </div>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  ) : null;

package/src/components/OfficesAtmsMap/OfficesAtmsMapProps.tsx

@@ -82,6 +82,21 @@ export interface Branch {
   transferringDataToBiometricSystem?: false;
 }
 
+export interface RemoteWorkplace {
+  id?: number;
+  region?: {
+    id?: number;
+    code?: string;
+    name?: string;
+    slug?: string;
+  };
+  landmark?: string;
+  workScheduleDescription?: string;
+  description?: string;
+  gpsLatitude?: number;
+  gpsLongitude?: number;
+  address?: string;
+}
 export interface Atm {
   location?: string;
   address?: string;

package/src/components/OfficesAtmsMap/OfficesMap.tsx

@@ -1,14 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLocation } from '../../hooks/useLocation';
 import { OfficesAtmsMapLayout } from './OfficesAtmsMapLayout';
-import { type Branch } from './OfficesAtmsMapProps';
+import { type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
 import { getOfficePoint, renderOfficeCard } from './renderOfficeCard';
+import { getRemoteWorkplacePoint, renderRemoteWorkplaceCard } from './renderRemoteWorkplaceCard';
 import { useOffices } from './useOffices';
 
 const INITIAL_FILTRATION_STATE = {
   workingSaturday: false,
   premiumService: false,
   privateBanking: false,
+  remoteWorkplace: false,
   sellingCoins: false,
   buyingCoins: false,
   bullionOperations: false,
@@ -17,15 +19,23 @@ const INITIAL_FILTRATION_STATE = {
 };
 
 const FILTRATION_PREDICATES = {
-  workingSaturday: (item: Branch) => Boolean(item.workSchedule?.workingSaturday),
-  premiumService: (item: Branch) => Boolean(item.premiumService),
-  privateBanking: (item: Branch) => Boolean(item.privateBanking),
-  sellingCoins: (item: Branch) => Boolean(item.sellingCoins),
-  buyingCoins: (item: Branch) => Boolean(item.buyingCoins),
-  bullionOperations: (item: Branch) => Boolean(item.bullionOperations),
-  preciousMetalsOperations: (item: Branch) => Boolean(item.preciousMetalsOperations),
-  transferringDataToBiometricSystem: (item: Branch) =>
-    Boolean(item.transferringDataToBiometricSystem),
+  workingSaturday: (item: Branch | RemoteWorkplace) =>
+    Boolean('workSchedule' in item && item.workSchedule?.workingSaturday),
+  premiumService: (item: Branch | RemoteWorkplace) =>
+    Boolean('premiumService' in item && item.premiumService),
+  privateBanking: (item: Branch | RemoteWorkplace) =>
+    Boolean('privateBanking' in item && item.privateBanking),
+  remoteWorkplace: (item: Branch | RemoteWorkplace) => Boolean('workScheduleDescription' in item),
+  sellingCoins: (item: Branch | RemoteWorkplace) =>
+    Boolean('sellingCoins' in item && item.sellingCoins),
+  buyingCoins: (item: Branch | RemoteWorkplace) =>
+    Boolean('buyingCoins' in item && item.buyingCoins),
+  bullionOperations: (item: Branch | RemoteWorkplace) =>
+    Boolean('bullionOperations' in item && item.bullionOperations),
+  preciousMetalsOperations: (item: Branch | RemoteWorkplace) =>
+    Boolean('preciousMetalsOperations' in item && item.preciousMetalsOperations),
+  transferringDataToBiometricSystem: (item: Branch | RemoteWorkplace) =>
+    Boolean('transferringDataToBiometricSystem' in item && item.transferringDataToBiometricSystem),
 };
 
 export interface OfficesMapProps {
@@ -43,16 +53,22 @@ export const OfficesMap = JSX<OfficesMapProps>(({ className }) => {
     <OfficesAtmsMapLayout
       className={className}
       filterItems={filterItems}
-      data={officesData}
+      data={officesData[0]?.branches}
+      remoteWorkplaces={officesData[0]?.remoteWorkplaces}
       initFilterState={INITIAL_FILTRATION_STATE}
       renderCard={renderOfficeCard}
+      renderRemoteWorkplaceCard={renderRemoteWorkplaceCard}
       getBalloon={getOfficePoint}
+      getBalloonRemoteWorkplaces={getRemoteWorkplacePoint}
       title={`Офисы филиала ${currentLocation?.name}`}
     />
   );
 });
 
-const filterItems = (data: Branch[], filtrationState: Record<string, boolean>) => {
+const filterItems = (
+  data: (Branch | RemoteWorkplace)[],
+  filtrationState: Record<string, boolean>,
+) => {
   const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
 
   return data.filter((item) => truthyFilters.every((_) => FILTRATION_PREDICATES[_](item)));

package/src/components/OfficesAtmsMap/YandexMapProps.ts

@@ -1,4 +1,5 @@
 export type BalloonPoints = {
+  type?: string;
   coords: number[];
   content?: BalloonContent;
 };

package/src/components/OfficesAtmsMap/renderDescriptionBlock.tsx

@@ -0,0 +1,29 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { Text } from '../../ui-kit/Text/Text';
+import { type AtmsDef } from './OfficesAtmsMapContent';
+
+export const renderDescriptionBlock = ({ __html, list }: AtmsDef) =>
+  __html || list?.length ? (
+    <div className="mb-2xl border-b sm:border border-main-divider sm:rounded-md">
+      {__html ? (
+        <div className="mb-2xl">
+          <RichText __html={__html} />
+        </div>
+      ) : null}
+      {list?.length ? (
+        <div className="flex flex-col sm:flex-row gap-2xl sm:flex-wrap pb-2xl sm:pb-xl">
+          {list.map((item, i) => (
+            <div key={String(i)} className="flex gap-xs items-center">
+              {item?.image ? <Img image={item.image} /> : null}
+              {item?.text ? (
+                <Text size="text-m" font="font-light">
+                  {item.text}
+                </Text>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  ) : null;

package/src/components/OfficesAtmsMap/renderFiltrationForm.tsx

@@ -21,6 +21,7 @@ const FILTRATION_LABELS = {
   bullionOperations: 'Операции со слитками',
   preciousMetalsOperations: 'Операции с драгоценными металлами',
   transferringDataToBiometricSystem: 'Передача фото и голоса в Единую биометрическую систему',
+  remoteWorkplace: 'Удаленное рабочее место',
 };
 
 const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
@@ -30,7 +31,7 @@ export const renderFiltrationForm = (
   { field, reset }: { field: FormFieldRegisterer<any>; reset: () => void },
   onlyOffice?: boolean,
 ) => {
-  const visibleFiltersNum = onlyOffice ? 3 : 4;
+  const visibleFiltersNum = 4;
 
   const filtersCheckbox = (filters || []).map((key) => (
     <Checkbox key={key} text={FILTRATION_LABELS[key]} {...field(key)} />

package/src/components/OfficesAtmsMap/renderRemoteWorkplaceCard.tsx

@@ -0,0 +1,86 @@
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Text } from '../../ui-kit/Text/Text';
+import { CardCell } from './CardCell';
+import { CardRow } from './CardRow';
+import { type RemoteWorkplace } from './OfficesAtmsMapProps';
+import { renderFoldButton } from './renderFoldButton';
+
+export const renderRemoteWorkplaceCard = (
+  { address, workScheduleDescription }: RemoteWorkplace,
+  index: number,
+) => {
+  if (!workScheduleDescription) {
+    return null;
+  }
+
+  return (
+    <div key={String(index)} className="bg-white col-span-12 p-3xl sm:border-green sm:border">
+      <div className="sm:flex sm:justify-between">
+        <div>
+          <Text size="text-h4">Удаленное рабочее место</Text>
+          {address ? (
+            <div className="flex pb-xl pt-xs gap-2xs">
+              <Icon name="GeolocationIcon" width="24" height="24" />
+              <Text size="text-l">{address}</Text>
+            </div>
+          ) : null}
+        </div>
+      </div>
+      <div className="hidden sm:block">
+        {renderCardContent({
+          workScheduleDescription,
+        })}
+      </div>
+      <Foldable
+        className="block sm:hidden"
+        renderFoldableSection={({ isUnfolded }) => {
+          return (
+            <FoldableSection isUnfolded={isUnfolded}>
+              {renderCardContent({
+                workScheduleDescription,
+              })}
+            </FoldableSection>
+          );
+        }}
+        //** TODO: remove styles with refactoring  DefaultFoldButton*/
+        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
+      />
+    </div>
+  );
+};
+
+const renderCardContent = ({ workScheduleDescription }: RemoteWorkplace) => {
+  return (
+    <div>
+      <CardRow className="flex">
+        <CardCell label="Операции для физических лиц">
+          <Text>Оформление и обслуживание кредитов, счетов, вкладов</Text>
+        </CardCell>
+        <CardCell label="Операции для физических лиц">
+          <Text>Оформление и обслуживание банковских карт</Text>
+        </CardCell>
+        <CardCell label="Операции для физических лиц">
+          <Text>Инвестиционное и накопительное страхование</Text>
+        </CardCell>
+        <CardCell label="Операции для физических лиц">
+          <Text>Безналичные операции в рублях, переводы без открытия счёта</Text>
+        </CardCell>
+      </CardRow>
+      <CardCell label="Режим работы" className="max-w-none">
+        <Text>{workScheduleDescription}</Text>
+      </CardCell>
+    </div>
+  );
+};
+
+export const getRemoteWorkplacePoint = ({
+  address = '',
+  workScheduleDescription,
+}: RemoteWorkplace) => {
+  const header = 'Удаленное рабочее место';
+  const body = `${address} ${workScheduleDescription}`;
+
+  return { header, body };
+};

package/src/components/OfficesAtmsMap/useOffices.ts

@@ -1,20 +1,27 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import { fetchJSON } from '../../utils/fetchJSON';
-import { type Branch } from './OfficesAtmsMapProps';
+import { type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
 
 const EMPTY_VALUE = [];
 
 export function useOffices(regionCode?: string) {
   const { data = EMPTY_VALUE } = useAsyncData(
-    `/api/v1/branches?regionCode=${regionCode}`,
+    `/api/v1/branchesAndRemoteWorkplaces?regionCode=${regionCode}`,
     fetchMap,
   );
 
   return data;
 }
 
-const fetchMap = async (url: string): Promise<Branch[]> => {
-  const result = await fetchJSON<Branch[]>(url, { method: 'GET' });
+const fetchMap = async (
+  url: string,
+): Promise<{ branches: Branch[]; remoteWorkplaces: RemoteWorkplace[] }[]> => {
+  const result = await fetchJSON<{ branches: Branch[]; remoteWorkplaces: RemoteWorkplace[] }[]>(
+    url,
+    {
+      method: 'GET',
+    },
+  );
 
   return Array.isArray(result) ? result : EMPTY_VALUE;
 };

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,21 +1,30 @@
-import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/LinkButton/ArrowButton';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { type ProductGalleryContent, type ProductSlide } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-export const ProductGallery = JSX<ProductGalleryProps>(
+const scrollButtonStyle = 'hidden sm:flex absolute z-40 top-10';
+
+export const ProductGallery = UniBlock<ProductGalleryProps>(
   ({ className = '', padding, slides = [], ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
 
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+      itemCount: slides?.length || 0,
+    });
+
     return (
       <BlockWrapper
         className={style('box-border overflow-hidden', className)}
-        defaultPadding="py-6xl"
+        defaultPadding="pt-6xl"
         padding={padding}
         {...rest}
       >
@@ -36,8 +45,29 @@ export const ProductGallery = JSX<ProductGalleryProps>(
             </div>
           ))}
         </div>
-        <div className="h-28 px-xs mt-m -mb-m flex gap-xs box-border">
-          {slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex }))}
+
+        <div className="relative pr-xs mt-m -mb-m flex gap-xs box-border">
+          <SwipeListContainer
+            containerRef={containerRef}
+            snapAlign="snap-start"
+            onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+            itemClassName={'h-40 flex items-stretch w-screen'}
+            gap={8}
+          >
+            {slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex }))}
+          </SwipeListContainer>
+          {scroll.canScrollLeft ? (
+            <ScrollLeftButton
+              className={style('left-6', scrollButtonStyle)}
+              onClick={scroll.scrollLeft}
+            />
+          ) : null}
+          {scroll.canScrollRight ? (
+            <ScrollRightButton
+              className={style('right-6', scrollButtonStyle)}
+              onClick={scroll.scrollRight}
+            />
+          ) : null}
         </div>
       </BlockWrapper>
     );
@@ -55,7 +85,7 @@ const renderNavButton =
     const isActive = i === activeSlideIndex;
     const btnClassName = isActive
       ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
-      : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:py-xl backdrop-blur';
+      : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:backdrop-blur';
     const btnTitleClassName = isActive
       ? 'text-primary-text text-h6 py-xs'
       : 'text-l pb-2xs text-secondary-text group-data-secondary:text-white';
@@ -70,7 +100,7 @@ const renderNavButton =
         onClick={() => onClick(i)}
         aria-label={nav?.title}
         className={style(
-          'relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50',
+          'max-h-28 mt-xs ml-xs relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50 whitespace-nowrap',
           btnClassName,
         )}
       >

package/src/components/StickyBottomMenu/BurgerMenuDialog.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type SitemapData } from '../../data/SitemapData';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
+import { useLocation } from '../../hooks/useLocation';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
 import { StickyBottomMenuDialog } from './StickyBottomMenuDialog';
@@ -19,6 +20,7 @@ export interface BurgerMenuDialogProps {
 export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
   ({ menuRef, menuItem, locationDialogProps, closeAll }) => {
     const locationDialog = useLocationDialog(locationDialogProps || {});
+    const [{ name: location }] = useLocation();
     const menuDimensions = menuRef?.current?.getBoundingClientRect();
 
     const handleIframeLoad = useCallback(() => {
@@ -28,9 +30,15 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
       ifDoc.style.height = String(ifDoc?.contentWindow?.document.body.offsetHeight) + 'px';
 
       const [, basePath] = globalThis?.location?.pathname?.split('/') || [];
-      iframeWindow.postMessage(basePath, '*');
+      iframeWindow.postMessage({ type: 'currentTab', data: basePath }, '*');
+      iframeWindow.postMessage({ type: 'currentLocation', data: location }, '*');
     }, []);
 
+    useEffect(() => {
+      const iframeWindow: Window = globalThis.frames['burger-menu-iframe'];
+      iframeWindow.postMessage({ type: 'currentLocation', data: location }, '*');
+    }, [location]);
+
     useEffect(() => {
       const onMessage = (e: MessageEvent<any>) => {
         if (e.data.type === 'location') {