fix select easy sidebar items (#64)

Author: eksrha

projects/lib-workspace/src/app/app.component.html

@@ -25,10 +25,10 @@
   </fs-nav-frame-toolbar>
 
   <fs-nav-frame-sidebar>
-    
+
     <fs-nav-frame-sidebar-item *ngFor="let route of navRoutes" routerLink="{{route.path}}">
-      <mat-icon class="icon">{{route.icon}}</mat-icon>
-      <span class="title">{{route.title}}</span>
+      <i class="material-icons">{{route.icon}}</i>
+      <span>{{route.title}}</span>
     </fs-nav-frame-sidebar-item>
 
   </fs-nav-frame-sidebar>

projects/ng-mat-components/src/fs-nav-frame/components/fs-nav-frame-sidebar-item/fs-nav-frame-sidebar-item.component.html

@@ -1,4 +1,4 @@
 <button mat-button [routerLink]="routerLink" routerLinkActive="active-link">
-    <ng-content select=".icon"></ng-content>
-    <ng-content select=".title"></ng-content>
+    <ng-content select="i"></ng-content>
+    <ng-content select="span" class="nav-label"></ng-content>
 </button>

projects/ng-mat-components/src/fs-nav-frame/components/fs-nav-frame-sidebar-item/fs-nav-frame-sidebar-item.component.scss

@@ -15,22 +15,22 @@ fs-nav-frame-sidebar-item button {
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
-  }
 
-  .icon {
-    margin-left: 12px;
-  }
+    > i {
+      margin-left: 12px;
+    }
 
-  .title {
-    margin-left: 1rem;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    > span {
+      margin-left: 1rem;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 }
 
-.sidebar.opened > fs-nav-frame-sidebar > fs-nav-frame-sidebar-item button .title {
+.sidebar.opened > fs-nav-frame-sidebar > fs-nav-frame-sidebar-item button .mdc-button__label > span {
   display: block;
 }
-.sidebar:not(.opened) > fs-nav-frame-sidebar > fs-nav-frame-sidebar-item button .title {
+.sidebar:not(.opened) > fs-nav-frame-sidebar > fs-nav-frame-sidebar-item button .mdc-button__label > span {
   display: none;
 }