From 2afedcd67f13ee6aa3f6f3c2bc44367cf05cd0e6 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 7 Apr 2020 18:04:27 +0300
Subject: [PATCH] NavTabButton shows Image or Icon depending on details
 property

---
 .../NavTabButton/NavTabButton.js              | 22 +++++++++++++++----
 .../VerticalNavBar/NavTabButton/styles.less   |  2 +-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js b/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js
index 7a525b868..ada8f67a0 100644
--- a/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js
+++ b/src/common/NavBar/VerticalNavBar/NavTabButton/NavTabButton.js
@@ -3,16 +3,30 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
+const Image = require('stremio/common/Image');
 const styles = require('./styles');
 
-const NavTabButton = ({ className, icon, label, href, selected, onClick }) => {
+const NavTabButton = ({ className, icon, label, href, selected, details, onClick }) => {
+    const renderLogoFallback = React.useMemo(() => () => {
+        return (
+            <Icon className={styles['icon']} icon={'ic_addons'} />
+        );
+    }, []);
     return (
         <Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
             {
-                typeof icon === 'string' && icon.length > 0 ?
-                    <Icon className={styles['icon']} icon={icon} />
+                details ?
+                    <Image
+                        className={styles['logo']}
+                        src={icon}
+                        alt={' '}
+                        renderFallback={renderLogoFallback}
+                    />
                     :
-                    null
+                    typeof icon === 'string' && icon.length > 0 ?
+                        <Icon className={styles['icon']} icon={icon} />
+                        :
+                        null
             }
             {
                 typeof label === 'string' && label.length > 0 ?
diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
index da85d8918..393250e26 100644
--- a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
+++ b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
@@ -27,7 +27,7 @@
         }
     }
 
-    .icon {
+    .icon, .logo {
         flex: none;
         width: 1.7rem;
         height: 1.7rem;