refactor(navbar): update theme and templates

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-component.scss

@@ -16,12 +16,10 @@
     }
 
     @include e(left) {
-        @extend %igx-navbar-bundle !optional;
-        @extend %igx-navbar-icon-display !optional;
+        @extend %igx-navbar-left !optional;
     }
 
     @include e(right) {
-        @extend %igx-navbar-bundle !optional;
-        @extend %igx-navbar-icon-display !optional;
+        @extend %igx-navbar-right !optional;
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss

@@ -90,9 +90,9 @@
 @mixin igx-navbar($theme) {
     @include igx-root-css-vars($theme);
 
-    $navbar-padding: 0 em(16px);
-    $navbar-title-fz: em(18px, 16px);
-    $navbar-title-lh: em(18px, 16px);
+    $navbar-padding: 0 rem(16px);
+    $navbar-title-fz: rem(18px, 16px);
+    $navbar-title-lh: rem(18px, 16px);
     $navbar-title-margin: 0;
     $left: if-ltr(left, right);
 
@@ -111,17 +111,23 @@
         z-index: 4;
     }
 
+    %igx-navbar-part {
+        display: flex;
+        align-items: center;
+    }
+
     %igx-navbar-title {
         margin: $navbar-title-margin;
+        flex-grow: 1;
+        user-select: text;
     }
 
     %igx-navbar-bundle {
-        display: flex;
-        align-items: center;
+        @extend %igx-navbar-part;
         user-select: none;
 
         > * + * {
-            margin-#{$left}: 16px;
+            margin-#{$left}: rem(16px);
         }
     }
 
@@ -137,17 +143,26 @@
         }
     }
 
+    %igx-navbar-left {
+        @extend %igx-navbar-bundle;
+        @extend %igx-navbar-icon-display;
+        flex-grow: 1;
+    }
+
+    %igx-navbar-right {
+        @extend %igx-navbar-bundle;
+        @extend %igx-navbar-icon-display;
+    }
+
     igx-navbar-action,
     [igxNavbarAction] {
-        display: flex;
-        align-items: center;
+        @extend %igx-navbar-part;
     }
 
     igx-navbar-title,
     [igxNavbarTitle] {
-        display: flex;
-        align-items: center;
-        user-select: none;
+        @extend %igx-navbar-part;
+        @extend %igx-navbar-title;
     }
 }
 

projects/igniteui-angular/src/lib/navbar/navbar.component.html

@@ -1,10 +1,19 @@
 <nav class="igx-navbar" role="navigation" [attr.aria-labelledby]="titleId">
     <div class="igx-navbar__left">
-        <igx-icon (click)="_triggerAction()" fontSet="material" *ngIf="isActionButtonVisible">{{actionButtonIcon}}
+        <igx-icon
+            (click)="_triggerAction()"
+            fontSet="material"
+            *ngIf="isActionButtonVisible">
+            {{actionButtonIcon}}
         </igx-icon>
-        <ng-content select="igx-navbar-action,[igxNavbarAction]"></ng-content>
-        <h1 *ngIf="!isTitleContentVisible" class="igx-navbar__title" [attr.id]="titleId">{{ title }}</h1>
-        <ng-content select="igx-navbar-title,[igxNavbarTitle]"></ng-content>
+        <ng-content select="igx-navbar-action, [igxNavbarAction]"></ng-content>
+        <h1
+            *ngIf="!isTitleContentVisible"
+            class="igx-navbar__title"
+            [attr.id]="titleId">
+            {{ title }}
+        </h1>
+        <ng-content select="igx-navbar-title, [igxNavbarTitle]"></ng-content>
     </div>
     <div class="igx-navbar__right">
         <ng-content></ng-content>