fix: icon size in navigation popup (#382)

Author: aeksandla

src/containers/PageConstructor/__stories__/data.json

@@ -239,19 +239,23 @@
           "items": [
             {
               "text": "Lorem ipsum ",
-              "url": "https://example.com"
+              "url": "https://example.com",
+              "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg"
             },
             {
               "text": "Dolor sit amet",
-              "url": "https://example.com"
+              "url": "https://example.com",
+              "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg"
             },
             {
               "text": "Consectetur adipiscing",
-              "url": "https://example.com"
+              "url": "https://example.com",
+              "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg"
             },
             {
               "text": "Ut enim ad minim ",
-              "url": "https://example.com"
+              "url": "https://example.com",
+              "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg"
             }
           ]
         },

src/navigation/components/Header/Header.tsx

@@ -1,15 +1,17 @@
 import React, {MouseEvent, useCallback, useMemo, useState} from 'react';
 
-import _ from 'lodash';
-
 import Control from '../../../components/Control/Control';
 import OutsideClick from '../../../components/OutsideClick/OutsideClick';
 import {Col, Grid, Row} from '../../../grid';
 import {NavigationClose, NavigationOpen} from '../../../icons';
 import {
     HeaderData,
+    NavigationButtonItem,
+    NavigationDropdownItem,
     NavigationItemBase,
     NavigationItemModel,
+    NavigationItemType,
+    NavigationLinkItem,
     ThemedNavigationLogoData,
 } from '../../../models';
 import {block} from '../../../utils';
@@ -59,17 +61,30 @@ const MobileMenuButton: React.FC<MobileMenuButtonProps> = ({
 
 const iconSizeKey: keyof NavigationItemBase = 'iconSize';
 
+const isButtonItem = (item: NavigationItemModel): item is NavigationButtonItem =>
+    item.type === NavigationItemType.Button;
+
+const isDropdownItem = (item: NavigationItemModel): item is NavigationDropdownItem =>
+    item.type === NavigationItemType.Dropdown;
+
 export const Header: React.FC<HeaderProps> = ({data, logo}) => {
     const {leftItems, rightItems, iconSize = 20} = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
     const [activeItemId, setactiveItemId] = useState<string | undefined>(undefined);
 
     const getNavigationItemWithIconSize = useCallback(
         (item: NavigationItemModel) => {
-            if (!(iconSizeKey in item)) {
-                return {...item, iconSize};
+            const newItem = {...item};
+            if ('items' in newItem && isDropdownItem(newItem)) {
+                newItem.items = newItem.items.map(
+                    getNavigationItemWithIconSize,
+                ) as NavigationLinkItem[];
+            }
+
+            if (!(iconSizeKey in newItem) && !isButtonItem(newItem)) {
+                newItem.iconSize = iconSize;
             }
-            return item;
+            return newItem;
         },
         [iconSize],
     );