From 653d4890022aa67d7112428057e3913e33ae4571 Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Sat, 20 Jan 2018 11:55:02 +0300
Subject: [PATCH] fix(sidebar): only expand sidebar when item has children
 elements Closes #23

---
 e2e/menu.e2e-spec.ts                          | 20 +++++++++++++++++--
 .../components/sidebar/sidebar.component.ts   | 15 +++++++++++++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/e2e/menu.e2e-spec.ts b/e2e/menu.e2e-spec.ts
index 8302a9e64f..5a644b673b 100644
--- a/e2e/menu.e2e-spec.ts
+++ b/e2e/menu.e2e-spec.ts
@@ -26,7 +26,9 @@ const homeButton = by.css('#homeBtn');
 
 const waitTime = 20 * 1000;
 
-const sidebarMenu31 = by.css('#menu-sidebar ul li:nth-child(4) ul li:nth-child(1) a > span');
+const sidebarMenu31 = by.css('#menu-sidebar ul li:nth-child(4) ul li:nth-child(1) > a > span');
+const sidebarMenu1 = by.css('#menu-sidebar ul li:nth-child(2) a');
+const sidebarMenu3 = by.css('#menu-sidebar ul li:nth-child(4) a');
 
 describe('nb-menu', () => {
 
@@ -42,7 +44,7 @@ describe('nb-menu', () => {
   });
 
   it('should display menu', () => {
-    expect(element(by.css('nb-menu')).isDisplayed()).toBeTruthy();
+    expect(element(by.css('#menu-first')).isDisplayed()).toBeTruthy();
     expect(browser.getCurrentUrl()).toContain('#/menu/1');
   });
 
@@ -103,6 +105,20 @@ describe('nb-menu', () => {
       .getCssValue('display').then(value => expect(value).toEqual('block'));
   });
 
+  it('should not expand sidebar when item has no children', () => {
+    element.all(sidebarMenu1).first().click()
+      .then(() => {
+        expect(hasClass(element.all(by.css('nb-sidebar')).first(), 'compacted')).toBeTruthy();
+      });
+  });
+
+  it('should expand sidebar when item has children', () => {
+    element.all(sidebarMenu3).first().click()
+      .then(() => {
+        expect(hasClass(element.all(by.css('nb-sidebar')).first(), 'expanded')).toBeTruthy();
+      });
+  });
+
   it('should be selected - Menu #3.1', () => {
     expect(hasClass(element.all(menu3SubMenu).first(), 'collapsed')).toBeTruthy();
 
diff --git a/src/framework/theme/components/sidebar/sidebar.component.ts b/src/framework/theme/components/sidebar/sidebar.component.ts
index 79776ed1df..8dbb8eb644 100644
--- a/src/framework/theme/components/sidebar/sidebar.component.ts
+++ b/src/framework/theme/components/sidebar/sidebar.component.ts
@@ -242,10 +242,23 @@ export class NbSidebarComponent implements OnInit, OnDestroy {
     }
   }
 
+  // TODO: this is more of a workaround, should be a better way to make compnent communicate to each other
   onClick(event): void {
     const menu = this.element.nativeElement.querySelector('nb-menu');
+
     if (menu && menu.contains(event.target)) {
-      this.expand();
+      let link = event.target;
+      const linkChildren = ['span', 'i'];
+
+      // if we clicked on span - get the link
+      if (linkChildren.indexOf(link.tagName.toLowerCase()) !== -1 && link.parentNode) {
+        link = event.target.parentNode;
+      }
+
+      // we only expand if an item has children
+      if (link && link.nextElementSibling && link.nextElementSibling.classList.contains('menu-items')) {
+        this.expand();
+      }
     }
   }