@redneckz/wildless-cms-uni-blocks 0.13.9 → 0.13.10

package/mobile/src/ui-kit/BaseTile/BaseTile.tsx

@@ -15,9 +15,9 @@ interface BaseTileProps extends UniBlockProps {
 }
 
 const imageAlignmentMap: Record<Align, string> = {
-  start: 'self-start',
-  center: 'self-center',
-  end: 'self-end',
+  start: '@xl:self-start',
+  center: '@xl:self-center',
+  end: '@xl:self-end',
 };
 
 export const BaseTile = JSX<BaseTileProps>(
@@ -42,7 +42,7 @@ export const BaseTile = JSX<BaseTileProps>(
       )}
     >
       {title ? <div className="relative">{title}</div> : null}
-      <div className="grow relative flex flex-wrap @xl:flex-nowrap justify-around @xl:justify-between items-stretch gap-3xl">
+      <div className="grow relative flex flex-col @xl:flex-row justify-around @xl:justify-between items-stretch gap-3xl">
         {renderImageContainer(leftImage, { imageAlign })}
         <div
           className={style(
@@ -53,11 +53,16 @@ export const BaseTile = JSX<BaseTileProps>(
           {insetTitle}
           <div className="grow">{children}</div>
           {backImage ? (
-            <div className="mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4">{backImage}</div>
+            <div className="justify-center mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4">
+              {backImage}
+            </div>
           ) : null}
           {buttons}
         </div>
-        {renderImageContainer(rightImage, { className: '-order-1 @xl:order-1', imageAlign })}
+        {renderImageContainer(rightImage, {
+          className: '-order-1 @xl:order-1',
+          imageAlign,
+        })}
       </div>
     </div>
   ),
@@ -69,7 +74,11 @@ const renderImageContainer = (
 ) =>
   image ? (
     <div
-      className={style('md:flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className)}
+      className={style(
+        'md:flex-shrink-0 self-center',
+        imageAlign && imageAlignmentMap[imageAlign],
+        className,
+      )}
     >
       {image}
     </div>

package/mobile/src/ui-kit/DialogManager/Dialog.tsx

@@ -20,8 +20,8 @@ export const Dialog = JSX<DialogProps>(({ className, head, children, onClose })
   }, [onClose]);
 
   return (
-    <div className={style('relative min-h-full bg-white', className)}>
-      <div className="sticky py-xl top-0 bg-white">
+    <div className={style('relative min-h-full bg-white p-5', className)}>
+      <div className="sticky py-xl top-0 bg-white z-10">
         <CloseButton className="absolute top-0 right-0" onClose={handleClose} />
         <div className="container">{head}</div>
       </div>

package/mobile/src/ui-kit/DialogManager/isDialogOpen.ts

@@ -0,0 +1,4 @@
+import type { DialogOpenAction } from './DialogAction';
+
+export const isDialogOpen = (id: string, dialogs: DialogOpenAction[]) =>
+  dialogs.find((item) => item.id === id, id);

package/mobile/src/ui-kit/LocationDialog/LocationDialog.tsx

@@ -62,7 +62,7 @@ export const LocationDialog = JSX<UniBlockProps>(() => {
             .map(renderRegion(handleChangeLocation))}
         </div>
       ) : (
-        <div className="columns-5">
+        <div className="columns-2 sm:columns-5">
           {Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation))}
         </div>
       )}

package/mobile/src/ui-kit/SearchBar/SearchBar.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { CloseButton } from '../DialogManager/CloseButton';
 import { SearchInput } from '../SearchDialog/SearchInput';
 import { useSearchDialog } from '../SearchDialog/useSearchDialog';
+import { style } from '../../utils/style';
 
 interface SearchBarProps {
   className?: string;
@@ -27,9 +28,9 @@ export const SearchBar = JSX<SearchBarProps>(({ className }) => {
   );
 
   return (
-    <div className={className}>
+    <div className={style('relative', className)}>
       <SearchInput value={value} onChange={handleInitialInputChange} />
-      <CloseButton className="absolute top-2 right-3 sm:hidden" onClose={resetQueryOnDialogClose} />
+      <CloseButton className="absolute top-0 right-0 sm:hidden" onClose={resetQueryOnDialogClose} />
     </div>
   );
 });

package/mobile/src/ui-kit/SearchDialog/SearchInput.tsx

@@ -23,11 +23,11 @@ export const SearchInput = JSX<SearchInputProps>(
     return (
       <div className={style('font-sans relative', className)} role="form">
         <div className="absolute h-full flex items-center pl-m pointer-events-none">
-          <Img image={{ icon: 'LoupeIcon' }} width="24" height="24" />
+          <Img image={{ icon: 'LoupeIcon', iconVersion: 'black' }} width="24" height="24" />
         </div>
         <input
           className={style(
-            'h-12 pl-6xl w-full text-l text-black outline-none box-border',
+            'h-12 w-full px-10 text-l text-black outline-none box-border',
             'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text',
           )}
           value={value}

package/mobile/src/ui-kit/Sitemap/Sitemap.tsx

@@ -34,9 +34,11 @@ const renderColumn = (menuItem: TopMenuItemProps & { onClick: () => void }, inde
       >
         {text || `Раздел ${index}`}
       </a>
-      {items?.map((_, i) => (
-        <ColumnItem key={String(i)} {..._} basePath={appendSlash(href)} index={i} />
-      ))}
+      {items
+        ?.filter((_) => !_.displayArea || _.displayArea === 'Footer')
+        .map((_, i) => (
+          <ColumnItem key={String(i)} {..._} basePath={appendSlash(href)} index={i} />
+        ))}
     </div>
   );
 };

package/mobile/src/ui-kit/SwipeListControl/useSwipeListScroll.ts

@@ -9,6 +9,7 @@ import { scrollToStart } from './scrollToStart';
 export interface SwipeListScroll {
   scrollLeft: () => void;
   scrollRight: () => void;
+  scrollTo: (idx: number) => void;
   canScrollLeft: boolean;
   canScrollRight: boolean;
   visibleIndicesRange: [number, number];
@@ -68,11 +69,21 @@ export const useSwipeListScroll = <E extends HTMLElement>({
     }
   }, [itemCount, canScrollRight]);
 
+  const scrollTo = useCallback(
+    (idx) => {
+      if (containerRef?.current) {
+        containerRef.current.children[idx]?.scrollIntoView();
+      }
+    },
+    [containerRef],
+  );
+
   return [
     containerRef,
     {
       scrollLeft,
       scrollRight,
+      scrollTo,
       canScrollLeft,
       canScrollRight,
       visibleIndicesRange: [minIndex, maxIndex],

package/mobile/src/wlc.json

@@ -3,5 +3,6 @@
   "FORCED_DRAFT_FLOW": false,
   "YANDEX_MAP_API_KEY": "f4b40c1e-1891-45f2-b307-90c481af210b",
   "SITEMAP": "sayt-rshb",
+  "STICKY_MOBILE_MENU": "sticky-mobile-menu",
   "CHAT_BOT": "personal"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.13.9",
+  "version": "0.13.10",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/ProjectSettings.ts

@@ -7,7 +7,9 @@ export interface ProjectSettings {
   FORCED_DRAFT_FLOW?: boolean;
   ASSIST_PROJECT_ID?: string;
   SITEMAP?: string;
+  STICKY_MOBILE_MENU?: string;
   FOOTER?: string;
+  PORTAL_DATA?: string;
   CHAT_BOT?: string; // "personal" or "business"
   CDN?: string; // Should ends with "/"
   BASE_PATH?: string; // Should ends with "/"
@@ -42,9 +44,15 @@ export const projectSettings = new (class implements ProjectSettings {
   get SITEMAP() {
     return this._.SITEMAP;
   }
+  get STICKY_MOBILE_MENU() {
+    return this._.STICKY_MOBILE_MENU;
+  }
   get FOOTER() {
     return this._.FOOTER;
   }
+  get PORTAL_DATA() {
+    return this._.PORTAL_DATA;
+  }
   get CHAT_BOT() {
     return this._.CHAT_BOT;
   }

package/src/components/ApplicationForm/ResponseNotification.tsx

@@ -14,9 +14,9 @@ export const ResponseNotification = JSX<ResponseNotificationProps>(({ responseTy
   return (
     <div className={`flex items-center p-lg rounded-md space-x-m ${backgroundColor}`}>
       {responseOK ? (
-        <Img image={{ icon: 'ResponceOKIcon' }} width="42" height="42" />
+        <Img image={{ icon: 'ResponseOKIcon' }} width="42" height="42" />
       ) : (
-        <Img image={{ icon: 'ResponceFailIcon' }} width="37" height="34" />
+        <Img image={{ icon: 'ResponseFailIcon' }} width="37" height="34" />
       )}
       <div>
         <Heading

package/src/components/Blocks.mobile.ts

@@ -34,6 +34,7 @@ import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { StickyBottomMenu } from './StickyBottomMenu/StickyBottomMenu';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
@@ -76,6 +77,7 @@ export const Blocks: BlocksRegistry = {
   RollupItem,
   SafeDepositRental,
   StepsBlock,
+  StickyBottomMenu,
   Tabs,
   TariffsTable,
   TextBlock,

package/src/components/Blocks.ts

@@ -50,6 +50,7 @@ import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { StickyBottomMenu } from './StickyBottomMenu/StickyBottomMenu';
 import { SwipeListControlBlock } from './SwipeListControlBlock/SwipeListControlBlock';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
@@ -110,6 +111,7 @@ export const Blocks: BlocksRegistry = {
   SafeDepositRental,
   StepsBlock,
   SwipeListControlBlock,
+  StickyBottomMenu,
   Tabs,
   TariffsTable,
   TextBlock,

package/src/components/ContentPage/ContentPage.page.json

@@ -28,6 +28,43 @@
         "type": "Footer",
         "style": ["col-span-12"]
       }
+    ],
+    "stickyBottomMenu": [
+      {
+        "type": "StickyBottomMenu",
+        "content": {
+          "menuItems": [
+            {
+              "title": "Кредиты",
+              "url": "#EmptyWalletIcon",
+              "icon": {
+                "icon": "EmptyWalletIcon"
+              }
+            },
+            {
+              "title": "Карты",
+              "url": "#CardIcon",
+              "icon": {
+                "icon": "CardIcon"
+              }
+            },
+            {
+              "title": "Вклады",
+              "url": "#SafeIcon",
+              "icon": {
+                "icon": "SafeIcon"
+              }
+            },
+            {
+              "title": "Инвестиции",
+              "url": "#ChartIcon",
+              "icon": {
+                "icon": "ChartIcon"
+              }
+            }
+          ]
+        }
+      }
     ]
   },
   "blocks": []

package/src/components/ContentPage/ContentPage.tsx

@@ -11,6 +11,7 @@ import { CookiePopup } from '../../ui-kit/CookiePopup/CookiePopup';
 import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
 import { style } from '../../utils/style';
 import { LikeControl } from '../LikeControl/LikeControl';
+import { StickyBottomMenu } from '../StickyBottomMenu/StickyBottomMenu';
 
 interface ContentPageProps extends UniBlockProps {
   blocksRegistry: BlocksRegistry;
@@ -49,6 +50,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
           </div>
           {likeControl ? renderLikeControl() : null}
         </section>
+        <StickyBottomMenu />
         <DialogManager />
         <CookiePopup
           termLink={{ href: '/pd-policy#cookie', target: '_blank' }}
@@ -60,7 +62,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
 );
 
 ContentPage.childrenTypes = [];
-ContentPage.slots = () => ['header', 'footer'];
+ContentPage.slots = () => ['header', 'footer', 'StickyBottomMenu'];
 
 function renderLikeControl() {
   return (

package/src/components/ContentPage/useContentPageData.ts

@@ -3,7 +3,7 @@ import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { BlockDef, ContentPageDef } from '../../model/ContentPageDef';
 import baseData from './ContentPage.page.json';
 
-const BLOCK_TYPES_BLACK_LIST = ['Header', 'Footer', 'Placeholder'];
+const BLOCK_TYPES_BLACK_LIST = ['Header', 'Footer', 'Placeholder', 'StickyBottomMenu'];
 
 export function useContentPageData(blocksRegistry: BlocksRegistry): ContentPageDef {
   const [data, setData] = useState<ContentPageDef>(baseData);

package/src/components/Header/Header.tsx

@@ -1,7 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useRouter } from '../../hooks/useRouter';
+import { projectSettings } from '../../ProjectSettings';
+import { useActiveRoute } from '../../hooks/useActiveRoute';
+import { useSWRResource } from '../../hooks/useSWRResource';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
@@ -10,7 +13,6 @@ import { style } from '../../utils/style';
 import type { HeaderProps } from './HeaderProps';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderSubMenu } from './HeaderSubMenu';
-import { isTopItemActive } from './isTopItemActive';
 
 const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
   'bg-white': 'primary',
@@ -19,12 +21,16 @@ const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
 
 export const Header = JSX<HeaderProps>(
   ({ className, bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
-    const router = useRouter();
-
-    const { topItems, logo, officesLink, internetBankUrl, defaultLocation } = useSitemap(
+    const { topItems, logo, officesLink, defaultLocation } = useSitemap(
       rest.options?.page?.fallback,
     );
-    const activeTopItem = topItems?.find(isTopItemActive(router));
+    const [, activeTopItem] = useActiveRoute(topItems);
+
+    const { internetBankUrl } = useSWRResource<SitemapData>(
+      projectSettings.PORTAL_DATA || 'portal-data',
+      {},
+      'portal-resources',
+    );
 
     return (
       <BlockWrapper

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,20 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { projectSettings } from '../../ProjectSettings';
 import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { useRouter } from '../../hooks/useRouter';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import type { LinkProps } from '../../model/LinkProps';
+import { projectSettings } from '../../ProjectSettings';
 import { DropdownMenu } from './DropdownMenu';
+import { findActiveSubItem } from './findActiveSubItem';
 import { HeaderChatBotButton } from './HeaderChatBotButton';
 import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 import { InternetBankButton } from './InternetBankButton';
-import { findActiveSubItem } from './findActiveSubItem';
+
+interface HeaderSubMenuLinkProps extends LinkProps {
+  displayArea?: string;
+}
 
 export interface HeaderSubMenuProps {
   version?: BlockVersion;
-  subItems?: LinkProps[];
+  subItems?: HeaderSubMenuLinkProps[];
   internetBankUrl?: string;
 }
 
@@ -24,24 +28,28 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
 
     const router = useRouter();
 
+    const visibleSubItems = useMemo(
+      () => subItems.filter((item) => !item.displayArea || item.displayArea === 'Header'),
+      [subItems],
+    );
     const activeSubItem = findActiveSubItem(router)(subItems);
 
-    const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
+    const [visibleItemsCount, setVisibleItemsCount] = useState(visibleSubItems.length);
 
-    const dropDownMenuItems = subItems.slice(visibleItemsCount);
+    const dropDownMenuItems = visibleSubItems.slice(visibleItemsCount);
 
     const subItemsListRef = useRef<HTMLDivElement | null>(null);
     const observerOptions: IntersectionObserverOptions = { rootRef: subItemsListRef };
     const subItemsVisibilityHandlers = useMemo(
       () =>
-        subItems.map((_, index) => (isIntersecting: boolean) => {
+        visibleSubItems.map((_, index) => (isIntersecting: boolean) => {
           setVisibleItemsCount(
             isIntersecting
               ? handleIntersectionActivation(index)
               : handleIntersectionDeactivation(index),
           );
         }),
-      [subItems],
+      [visibleSubItems],
     );
 
     return (
@@ -50,7 +58,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
           ref={subItemsListRef}
           className="overflow-hidden whitespace-nowrap pb-s mt-xs space-x-3xl"
         >
-          {subItems.map((_, i) => (
+          {visibleSubItems.map((_, i) => (
             <HeaderSubMenuItem
               key={String(i)}
               className={visibleItemsCount - 1 < i ? 'invisible' : ''}

package/src/components/PictureText/PictureText.tsx

@@ -25,7 +25,7 @@ export const PictureText = JSX<PictureTextProps>(
         padding={padding}
         headlineVersion={headlineVersion}
         align={align}
-        isInsetTitle={false}
+        isFullWidthTitle={false}
         imageOptions={{ directionRight: false, imageAlign: 'center', ...imageOptions }}
         {...rest}
       >

package/src/components/StickyBottomMenu/ActiveSubMenu.tsx

@@ -0,0 +1,16 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import { ActiveSubMenuItem } from './ActiveSubMenuItem';
+
+interface ActiveSubMenuProps {
+  activeMenuSubItems?: LinkProps[];
+}
+export const ActiveSubMenu = JSX<ActiveSubMenuProps>(({ activeMenuSubItems }) => {
+  return activeMenuSubItems ? (
+    <div className="mb-5">
+      {activeMenuSubItems.map((_, i) => (
+        <ActiveSubMenuItem item={_} i={i} />
+      ))}
+    </div>
+  ) : null;
+});

package/src/components/StickyBottomMenu/ActiveSubMenuItem.tsx

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import { useLink } from '../../hooks/useLink';
+import { Img } from '../../ui-kit/Img/Img';
+
+interface ActiveSubMenuItemProps {
+  item: LinkProps;
+  i: number;
+}
+
+export const ActiveSubMenuItem = JSX<ActiveSubMenuItemProps>(({ item, i }) => {
+  const link = useLink();
+  const { href, target, onClick } = link(item);
+
+  return (
+    <a
+      key={`subItems-${String(i)}`}
+      className="py-3 text-h5 font-light flex justify-between cursor-pointer"
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {item.text}
+      <Img
+        image={{ icon: 'ChevronLeftIcon', iconVersion: 'black' }}
+        width="24"
+        height="24"
+        className="text-secondary-text rotate-180 opacity-30"
+      />
+    </a>
+  );
+});

package/src/components/StickyBottomMenu/BurgerMenuDialog.tsx

@@ -0,0 +1,102 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLocation } from '../../hooks/useLocation';
+import { Img } from '../../ui-kit/Img/Img';
+import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { Text } from '../../ui-kit/Text/Text';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { useSitemap } from '../../services/sitemap/useSitemap';
+import { TopItemMobile } from './TopItemMobile';
+import { ActiveSubMenu } from './ActiveSubMenu';
+import { Dialog } from '../../ui-kit/DialogManager/Dialog';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { RefObject } from 'react';
+import { useActiveRoute } from '../../hooks/useActiveRoute';
+
+interface BurgerMenuDialogProps extends UniBlockProps {
+  containerRef?: RefObject<HTMLDivElement>;
+}
+
+export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
+  const { topItems, officesLink, defaultLocation } = useSitemap(props.options?.page?.fallback);
+  const [location] = useLocation(defaultLocation);
+  const locationDialog = useLocationDialog();
+  const openLocationDialog = useCallback(() => locationDialog.open(), []);
+  const itemCount = Array.isArray(topItems) ? topItems.length : 0;
+  const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+    itemCount,
+  });
+  const [activeTopItemIndex, activeRoute] = useActiveRoute(topItems);
+  const activeMenuSubItems = activeRoute?.items || [];
+
+  useEffect(() => {
+    if (activeTopItemIndex > 0) {
+      scroll.scrollTo(activeTopItemIndex);
+    }
+  }, [activeTopItemIndex, scroll]);
+
+  return (
+    <Dialog
+      head={
+        <div className="flex items-center">
+          <Heading as="h4" title="Меню" />
+        </div>
+      }
+    >
+      <div className="flex flex-col flex-nowrap relative w-full h-auto m-auto bg-white pb-24 box-border rounded-md">
+        <div className="w-full mb-3">
+          <SwipeListContainer
+            containerRef={containerRef}
+            visibleItemCount={0}
+            gap={20}
+            className="pb-3"
+          >
+            {topItems?.map((item, i) => (
+              <TopItemMobile item={item} i={i} isActive={activeTopItemIndex === i} />
+            ))}
+          </SwipeListContainer>
+        </div>
+        <div className="relative grow overflow-auto">
+          <ActiveSubMenu activeMenuSubItems={activeMenuSubItems} />
+          <SearchBar className="grow mb-5" />
+          {renderOfficeLink(officesLink)}
+          <div className="flex items-center text-s cursor-pointer" onClick={openLocationDialog}>
+            <Img
+              image={{ icon: 'GeolocationIcon', iconVersion: 'black' }}
+              width="24"
+              height="24"
+              className="text-primary-main box-border mr-xs bg-main-divider p-xs rounded-md"
+            />
+            <div className="flex flex-col items-start">
+              <Text size="text-h5">{location.name}</Text>
+              <Text color="text-secondary-text" size="text-s">
+                Ваша локация
+              </Text>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  );
+});
+
+const renderOfficeLink = (officesLink?: string) =>
+  officesLink ? (
+    <a
+      className="flex items-center mb-3"
+      href={officesLink}
+      rel="noopener noreferrer"
+      aria-label="Офисы и банкоматы"
+    >
+      <Img
+        image={{ icon: 'MapOpenedIcon', iconVersion: 'black' }}
+        width="24"
+        height="24"
+        className="text-primary-main box-border mr-xs bg-main-divider p-xs rounded-md"
+      />
+      <span>Офисы и банкоматы</span>
+    </a>
+  ) : null;

package/src/components/StickyBottomMenu/StickyBottomMenu.example.json

@@ -0,0 +1,35 @@
+{
+  "content": {
+    "title": "Кнопки меню",
+    "menuItems": [
+      {
+        "title": "Кредиты",
+        "url": "#EmptyWalletIcon",
+        "icon": {
+          "icon": "EmptyWalletIcon"
+        }
+      },
+      {
+        "title": "Карты",
+        "url": "#CardIcon",
+        "icon": {
+          "icon": "CardIcon"
+        }
+      },
+      {
+        "title": "Вклады",
+        "url": "#SafeIcon",
+        "icon": {
+          "icon": "SafeIcon"
+        }
+      },
+      {
+        "title": "Инвестиции",
+        "url": "#ChartIcon",
+        "icon": {
+          "icon": "ChartIcon"
+        }
+      }
+    ]
+  }
+}