fix(menu): stop sidebar adding display: none to collapsed item span t… (

#155)
akveo · Jan 19, 2018 · 4c10d2a · 4c10d2a
1 parent d5a4873
commit 4c10d2a
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 19 deletions.
diff --git a/e2e/layout.e2e-spec.ts b/e2e/layout.e2e-spec.ts
@@ -19,7 +19,7 @@ describe('nb-layout', () => {
 
   it('should have correct font-family', () => {
     element(by.css('#layout-fluid > .scrollable-container > .layout')).getCssValue('font-family').then(value => {
-      expect(value).toMatch('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');
+      expect(value.replace(/"/g, `'`)).toMatch(`'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`);
     });
   });
 

diff --git a/e2e/menu.e2e-spec.ts b/e2e/menu.e2e-spec.ts
@@ -4,28 +4,30 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { browser, element, by, ExpectedConditions as ec } from 'protractor';
+import { browser, by, element, ExpectedConditions as ec } from 'protractor';
 
 import { hasClass } from './e2e-helper';
 
-const group = by.css('nb-menu ul li:nth-child(1) span');
-const menu1 = by.css('nb-menu ul li:nth-child(2) a');
-const menu2 = by.css('nb-menu ul li:nth-child(3) a');
-const menu3 = by.css('nb-menu ul li:nth-child(4) a');
-const menu3SubMenu = by.css('nb-menu ul li:nth-child(4) ul');
-const menu31 = by.css('nb-menu ul li:nth-child(4) ul li:nth-child(1) a');
-const menu32 = by.css('nb-menu ul li:nth-child(4) ul li:nth-child(2) a');
-const menu33 = by.css('nb-menu ul li:nth-child(4) ul li:nth-child(3) a');
-const menu33SubMenu = by.css('nb-menu ul li:nth-child(4) ul li:nth-child(3) ul');
-const menu331 = by.css('nb-menu ul li:nth-child(4) ul li:nth-child(3) ul li:nth-child(1) a');
-const menu332 = by.css('nb-menu ul li:nth-child(4) ul li:nth-child(3) ul li:nth-child(2) a');
-const menu333 = by.css('nb-menu ul li:nth-child(4) ul li:nth-child(3) ul li:nth-child(3) a');
-const newMenu = by.css('nb-menu ul li:nth-child(5) a');
+const group = by.css('#menu-first ul li:nth-child(1) span');
+const menu1 = by.css('#menu-first ul li:nth-child(2) a');
+const menu2 = by.css('#menu-first ul li:nth-child(3) a');
+const menu3 = by.css('#menu-first ul li:nth-child(4) a');
+const menu3SubMenu = by.css('#menu-first ul li:nth-child(4) ul');
+const menu31 = by.css('#menu-first ul li:nth-child(4) ul li:nth-child(1) a');
+const menu32 = by.css('#menu-first ul li:nth-child(4) ul li:nth-child(2) a');
+const menu33 = by.css('#menu-first ul li:nth-child(4) ul li:nth-child(3) a');
+const menu33SubMenu = by.css('#menu-first ul li:nth-child(4) ul li:nth-child(3) ul');
+const menu331 = by.css('#menu-first ul li:nth-child(4) ul li:nth-child(3) ul li:nth-child(1) a');
+const menu332 = by.css('#menu-first ul li:nth-child(4) ul li:nth-child(3) ul li:nth-child(2) a');
+const menu333 = by.css('#menu-first ul li:nth-child(4) ul li:nth-child(3) ul li:nth-child(3) a');
+const newMenu = by.css('#menu-first ul li:nth-child(5) a');
 const addButton = by.css('#addBtn');
 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');
+
 describe('nb-menu', () => {
 
   beforeEach((done) => {
@@ -96,6 +98,11 @@ describe('nb-menu', () => {
       });
   });
 
+  it('collapsed sidebar item span should not be display:none', () => {
+    element(sidebarMenu31)
+      .getCssValue('display').then(value => expect(value).toEqual('block'));
+  });
+
   it('should be selected - Menu #3.1', () => {
     expect(hasClass(element.all(menu3SubMenu).first(), 'collapsed')).toBeTruthy();
 

diff --git a/src/app/menu-test/menu-test.component.ts b/src/app/menu-test/menu-test.component.ts
@@ -84,10 +84,13 @@ export class NbMenuItem4Component { }
   selector: 'nb-menu-test',
   template: `
     <nb-layout>
+      <nb-sidebar state="compacted">
+        <nb-menu id="menu-sidebar" tag="sidebarMenu" [items]="menuItems"></nb-menu>
+      </nb-sidebar>
       <nb-layout-column>
         <nb-card size="medium">
           <nb-card-body>
-            <nb-menu tag="firstMenu" [items]="menuItems"></nb-menu>
+            <nb-menu id="menu-first" tag="firstMenu" [items]="menuItems"></nb-menu>
             <router-outlet></router-outlet>
             <button class="btn btn-primary" id="addBtn" (click)="addMenuItem()">Add</button>
             <button class="btn btn-primary" id="homeBtn" (click)="navigateHome()">Home</button>
@@ -102,14 +105,17 @@ export class NbMenuTestComponent implements OnInit, OnDestroy {
     {
       title: 'Menu Items',
       group: true,
+      icon: 'nb-keypad',
     },
     {
       title: 'Menu #1',
       link: '/menu/1',
+      icon: 'nb-keypad',
     },
     {
       title: 'Menu #2',
       link: '/menu/2',
+      icon: 'nb-keypad',
     },
   ];
 
@@ -140,6 +146,7 @@ export class NbMenuTestComponent implements OnInit, OnDestroy {
       [
         {
           title: 'Menu #3',
+          icon: 'nb-keypad',
           children: [
             {
               title: 'Menu #3.1',

diff --git a/src/framework/theme/components/sidebar/_sidebar.component.theme.scss b/src/framework/theme/components/sidebar/_sidebar.component.theme.scss
@@ -83,12 +83,14 @@
           }
         }
 
-        .menu-items > .menu-item {
-          transition: border-color 1s ease;
-
+        > .menu-items > .menu-item > a {
           span, .chevron {
             display: none;
           }
+        }
+
+        .menu-items > .menu-item {
+          transition: border-color 1s ease;
 
           &.menu-group {
             display: block;