fix(sidebar): only expand sidebar when item has children elements

Closes #23
akveo · Jan 20, 2018 · 653d489 · 653d489
1 parent 4c10d2a
commit 653d489
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git 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
@@ -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();
+      }
     }
   }