From 3664659240bdfa780105d9efdc00b831b72917f9 Mon Sep 17 00:00:00 2001
From: Callum <callum@netzstrategen.com>
Date: Thu, 22 Oct 2020 05:56:17 +0200
Subject: [PATCH] fix(NavBar): Component renders blank left/right. (#7376)

---
 src/nav-bar/index.js                             | 16 ++++++++++++----
 .../test/__snapshots__/index.spec.js.snap        |  4 ----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/nav-bar/index.js b/src/nav-bar/index.js
index ab3ec7045..24eeb92b1 100644
--- a/src/nav-bar/index.js
+++ b/src/nav-bar/index.js
@@ -67,19 +67,27 @@ export default createComponent({
           style={{ zIndex: this.zIndex }}
           class={[bem({ fixed: this.fixed }), { [BORDER_BOTTOM]: this.border }]}
         >
-          <div class={bem('left')} onClick={this.onClickLeft}>
+          {this.hasLeft() && <div class={bem('left')} onClick={this.onClickLeft}>
             {this.genLeft()}
-          </div>
+          </div>}
           <div class={[bem('title'), 'van-ellipsis']}>
             {this.slots('title') || this.title}
           </div>
-          <div class={bem('right')} onClick={this.onClickRight}>
+          {this.hasRight() && <div class={bem('right')} onClick={this.onClickRight}>
             {this.genRight()}
-          </div>
+          </div>}
         </div>
       );
     },
 
+    hasLeft() {
+      return this.leftArrow || this.leftText || this.slots('left');
+    },
+
+    hasRight() {
+      return this.rightText || this.slots('right');
+    },
+
     onClickLeft(event) {
       this.$emit('click-left', event);
     },
diff --git a/src/nav-bar/test/__snapshots__/index.spec.js.snap b/src/nav-bar/test/__snapshots__/index.spec.js.snap
index 263a07ecc..d4f4630a6 100644
--- a/src/nav-bar/test/__snapshots__/index.spec.js.snap
+++ b/src/nav-bar/test/__snapshots__/index.spec.js.snap
@@ -3,9 +3,7 @@
 exports[`placeholder prop 1`] = `
 <div class="van-nav-bar__placeholder" style="height: 50px;">
   <div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
-    <div class="van-nav-bar__left"></div>
     <div class="van-nav-bar__title van-ellipsis"></div>
-    <div class="van-nav-bar__right"></div>
   </div>
 </div>
 `;
@@ -20,8 +18,6 @@ exports[`render left & right slot 1`] = `
 
 exports[`render title slot 1`] = `
 <div class="van-nav-bar van-hairline--bottom">
-  <div class="van-nav-bar__left"></div>
   <div class="van-nav-bar__title van-ellipsis">Custom Title</div>
-  <div class="van-nav-bar__right"></div>
 </div>
 `;