Web:Studio:NavMenu: fix showing navigation icons

packages/asc-web-components/public/static/images/people.react.svg

@@ -1,5 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 16 16">
-  <title>calendar</title>
   <g>
     <path d="M10 10v-1.5c0.459-0.185 0.815-0.541 0.996-0.988l0.004-0.012v-3c0-1-1-2.5-2-2.5h-2c-1 0-2 1.5-2 2.5v3c0.185 0.459 0.541 0.815 0.988 0.996l0.012 0.004v1.5s-4 2-4 3v1h12v-1c0-1-4-3-4-3z"></path>
   </g>

products/ASC.People/Client/public/images/people.menu.svg

@@ -1,5 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 16 16">
-  <title>calendar</title>
   <g>
     <path d="M10 10v-1.5c0.459-0.185 0.815-0.541 0.996-0.988l0.004-0.012v-3c0-1-1-2.5-2-2.5h-2c-1 0-2 1.5-2 2.5v3c0.185 0.459 0.541 0.815 0.988 0.996l0.012 0.004v1.5s-4 2-4 3v1h12v-1c0-1-4-3-4-3z"></path>
   </g>

web/ASC.Web.Client/src/components/NavMenu/sub-components/header-navigation-icon.js

@@ -33,30 +33,19 @@ const HeaderNavigationIcon = ({
   link,
   active,
   badgeNumber,
-  onClick,
+  onItemClick,
   onBadgeClick,
   url,
   ...rest
 }) => {
   const color = active ? activeColor : baseColor;
+  console.log(iconUrl);
   return (
-    (url === '/products/people/' || url === '/products/files/') && (
-      <div style={{ position: 'relative', width: '20px', height: '20px', marginRight: '22px' }}>
-        <StyledReactSVG
-          src={iconUrl}
-          href={url}
-          onClick={onClick}
-          {...rest}
-          beforeInjection={(svg) => {
-            svg.setAttribute('style', `width: 20px; height: 20px;`);
-            svg.setAttribute('fill', color);
-          }}
-          color={color}
-        />
+    <div style={{ position: 'relative', width: '20px', height: '20px', marginRight: '22px' }}>
+      <StyledReactSVG src={iconUrl} href={url} onClick={onItemClick} {...rest} color={color} />
 
-        <StyledBadge onClick={onBadgeClick} label={badgeNumber} maxWidth={'6px'} fontSize={'9px'} />
-      </div>
-    )
+      <StyledBadge onClick={onBadgeClick} label={badgeNumber} maxWidth={'6px'} fontSize={'9px'} />
+    </div>
   );
 };
 

web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js

@@ -133,22 +133,22 @@ const HeaderComponent = ({
     backdropClick();
   };
 
-  const onBadgeClick = (e) => {
+  const onBadgeClick = React.useCallback((e) => {
     if (!e) return;
     const id = e.currentTarget.dataset.id;
     const item = mainModules.find((m) => m.id === id);
     toggleAside();
 
     if (item) item.onBadgeClick(e);
-  };
+  }, []);
 
-  const onItemClick = (e) => {
+  const onItemClick = React.useCallback((e) => {
     if (!e) return;
     const link = e.currentTarget.dataset.link;
     history.push(link);
     backdropClick();
     e.preventDefault();
-  };
+  }, []);
 
   const numberOfModules = mainModules.filter((item) => !item.separator).length;
 
@@ -174,24 +174,28 @@ const HeaderComponent = ({
 
         {!isPersonal && (
           <StyledNavigationIconsWrapper>
-            {mainModules.map(
-              ({ id, iconUrl, notifications, link, separator }) =>
-                iconUrl &&
-                !separator && (
-                  <HeaderNavigationIcon
-                    key={id}
-                    id={id}
-                    data-id={id}
-                    data-link={link}
-                    active={id == currentProductId}
-                    iconUrl={iconUrl}
-                    badgeNumber={notifications}
-                    onClick={onItemClick}
-                    onBadgeClick={onBadgeClick}
-                    url={link}
-                  />
-                ),
-            )}
+            {mainModules.map((item) => {
+              return (
+                <React.Fragment key={item.id}>
+                  {item.iconUrl &&
+                    !item.separator &&
+                    (item.appName === 'files' || item.appName === 'people') && (
+                      <HeaderNavigationIcon
+                        key={item.id}
+                        id={item.id}
+                        data-id={item.id}
+                        data-link={item.link}
+                        active={item.id == currentProductId}
+                        iconUrl={item.iconUrl}
+                        badgeNumber={item.notifications}
+                        onItemClick={onItemClick}
+                        onBadgeClick={onBadgeClick}
+                        url={item.link}
+                      />
+                    )}
+                </React.Fragment>
+              );
+            })}
           </StyledNavigationIconsWrapper>
         )}
       </Header>