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

Closes #23
akveo · Jan 20, 2018 · 3a47dbf · 3a47dbf
1 parent 8ba60fa
commit 3a47dbf
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 components 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();
+ }
  }
  }