From 8e48da207fe55124870ae59322d999380ace2a49 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 31 Oct 2017 14:43:48 +0100
Subject: [PATCH] WIP #1762 @1.5

---
 js/libs/fluidbook/fluidbook.nav.js | 40 +++++++++++++++---------------
 style/nav-horizontal.less          |  3 ++-
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 8afa23d4..85cc3c6d 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -432,35 +432,35 @@ FluidbookNav.prototype = {
 
             } else if (icon == 'extra') {
 
-                // If the "extra" image has been set, it will be used in preference to the "afterSearch" links
-                if (this.fluidbook.datas.navExtraImage != '' || this.fluidbook.datas.navExtraLink != '') {
+                var id = 'extra',
+                    $nav = this.getNavFromType(navType),
+                    elementID = navType + '_' + id,
+                    navExtraImage;
 
-                    var id = 'extra',
-                        $nav = this.getNavFromType(navType),
-                        elementID = navType + '_' + id,
-                        navExtraImage;
+                if ($nav.find('#' + elementID).length > 0) {
+                    continue;
+                }
 
-                    if ($nav.find('#' + elementID).length > 0) {
-                        continue;
-                    }
+                if (navType == 'horizontalNav') {
 
-                    if (navType == 'horizontalNav') {
+                    if (this.fluidbook.datas.navExtraImage != '' && this.fluidbook.datas.navExtraLink != '') {
                         navExtraImage = this.fluidbook.datas.navExtraImage;
                         link = '<a id="' + elementID + '" data-tooltip="' + this.fluidbook.datas.navExtraTooltip + '" href="' + this.fluidbook.datas.navExtraLink + '" target="_blank" rel="noopener noreferrer"><img class="nav-icon" src="data/images/' + navExtraImage + '"></a>';
 
-                    } else if (navType == 'menu') {
-                        navExtraImage = this.fluidbook.datas.navExtraImageMobile || this.fluidbook.datas.navExtraImage; // Fallback to desktop image
-                        link = '<a id="' + elementID + '" href="' + this.fluidbook.datas.navExtraLink + '" target="_blank" rel="noopener noreferrer"><img class="nav-icon" src="data/images/' + navExtraImage + '"> <span class="menu-item-title">' + this.fluidbook.datas.navExtraTooltip + '</span></a>';
-                    }
+                    } else if (this.fluidbook.datas.afterSearch != '' && this.fluidbook.datas.themeEnableAfterSearch && navType == 'horizontalNav') {
 
-                    $nav.find('ul').append('<li>' + link + '</li>');
-                    if (link2 !== null) {
-                        $nav.find('ul').append('<li>' + link2 + '</li>');
+                        // Use the "afterSearch" image and links set in the theme and link editor
+                        $nav.find('ul').append('<li id="'+ elementID +'"><div id="afterSearch"><div class="c">' + this.fluidbook.loader.getImage('data/images/' + this.fluidbook.datas.afterSearch) + '</div><div class="links">' + this.fluidbook.datas.links.aftersearch + '</div></div></li>');
                     }
 
-                // Use the "afterSearch" image and links set in the theme and link editor
-                } else if (this.fluidbook.datas.afterSearch != '' && this.fluidbook.datas.themeEnableAfterSearch && navType == 'horizontalNav') {
-                    $nav.find('ul').append('<li><div id="afterSearch"><div class="c">' + this.fluidbook.loader.getImage('data/images/' + this.fluidbook.datas.afterSearch) + '</div><div class="links">' + this.fluidbook.datas.links.aftersearch + '</div></div></li>');
+
+                } else if (navType == 'menu' && (this.fluidbook.datas.navExtraImage != '' || this.fluidbook.datas.navExtraImageMobile != '') && this.fluidbook.datas.navExtraLink != '') {
+                    navExtraImage = this.fluidbook.datas.navExtraImageMobile || this.fluidbook.datas.navExtraImage; // Fallback to desktop image
+                    link = '<a id="' + elementID + '" href="' + this.fluidbook.datas.navExtraLink + '" target="_blank" rel="noopener noreferrer"><img class="nav-icon" src="data/images/' + navExtraImage + '"> <span class="menu-item-title">' + this.fluidbook.datas.navExtraTooltip + '</span></a>';
+                }
+
+                if (link !== null) {
+                    $nav.find('ul').append('<li>' + link + '</li>');
                 }
             }
 
diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less
index 62329b02..2c074fbf 100644
--- a/style/nav-horizontal.less
+++ b/style/nav-horizontal.less
@@ -43,8 +43,9 @@
 
 	// Optional extra image
 	&_extra {
-		img {
+		> img {
 			vertical-align: middle;
+			margin: 0 17px;
 		}
 	}
 }
-- 
2.39.5