feat(navbar): Add title area in the middle

Author: astaev

projects/igniteui-angular/migrations/update-9_1_0/changes/inputs.json

@@ -25,6 +25,14 @@
                 "selector": "igx-grid",
                 "type": "component"
             }
+        },
+        {
+            "name": "<igx-action-icon",
+            "replaceWith": "<igx-icon igxActionIcon"
+        },
+        {
+            "name": "IgxActionIconDirective",
+            "replaceWith": "IgxNavbarActionDirective"
         }
     ]
 }

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

@@ -137,10 +137,18 @@
         }
     }
 
-    igx-action-icon {
+    [igxNavbarAction] {
         display: flex;
         align-items: center;
     }
+
+    [igxNavbarTitle] {
+        display: flex;
+        align-items: center;
+        font-size: $navbar-title-fz;
+        line-height: $navbar-title-lh;
+        user-select: none;
+    }
 }
 
 /// Adds typography styles for the igx-navbar component.

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

@@ -1,8 +1,12 @@
 <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>
-        <ng-content select="igx-action-icon"></ng-content>
-        <h1 class="igx-navbar__title" [attr.id]="titleId">{{ title }}</h1>
+        <igx-icon (click)="_triggerAction()" fontSet="material" *ngIf="isActionButtonVisible">{{actionButtonIcon}}
+        </igx-icon>
+        <ng-content select="[igxNavbarAction]"></ng-content>
+        <h1 *ngIf="!isTitleContentVisible" class="igx-navbar__title" [attr.id]="titleId">{{ title }}</h1>
+    </div>
+    <div class="igx-navbar__middle">
+        <ng-content select="[igxNavbarTitle]"></ng-content>
     </div>
     <div class="igx-navbar__right">
         <ng-content></ng-content>

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

@@ -17,9 +17,15 @@ import { IgxIconModule } from '../icon/public_api';
  */
 @Directive({
     // tslint:disable-next-line:directive-selector
-    selector: 'igx-action-icon'
+    selector: '[igxNavbarAction]'
 })
-export class IgxActionIconDirective { }
+export class IgxNavbarActionDirective { }
+
+@Directive({
+    selector: '[igxNavbarTitle]',
+
+})
+export class IgxNavbarTitleDirective { }
 
 let NEXT_ID = 0;
 /**
@@ -81,6 +87,10 @@ export class IgxNavbarComponent {
         return this.isVisible;
     }
 
+    public get isTitleContentVisible(): boolean {
+        return this.titleContent ? true : false;
+    }
+
     /**
      * Sets whether the action button of the `IgxNavbarComponent` is visible.
      * ```html
@@ -133,8 +143,14 @@ export class IgxNavbarComponent {
     /**
      * @hidden
      */
-    @ContentChild(IgxActionIconDirective, { read: IgxActionIconDirective })
-    protected actionIconTemplate: IgxActionIconDirective;
+    @ContentChild(IgxNavbarActionDirective, { read: IgxNavbarActionDirective })
+    protected actionIconTemplate: IgxNavbarActionDirective;
+
+    /**
+     * @hidden
+     */
+    @ContentChild(IgxNavbarTitleDirective, { read: IgxNavbarTitleDirective })
+    protected titleContent: IgxNavbarTitleDirective;
 
     /**
      * @hidden
@@ -148,8 +164,8 @@ export class IgxNavbarComponent {
  * @hidden
  */
 @NgModule({
-    declarations: [IgxNavbarComponent, IgxActionIconDirective],
-    exports: [IgxNavbarComponent, IgxActionIconDirective],
+    declarations: [IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective],
+    exports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective],
     imports: [IgxButtonModule, IgxIconModule, CommonModule]
 })
 export class IgxNavbarModule {

src/app/navbar/navbar.sample.html

@@ -17,7 +17,8 @@ <h4 class="sample-title">With nav and action icons</h4>
         <article class="sample-column">
             <h4 class="sample-title">With nav icon</h4>
             <div class="navbar-sample">
-                <igx-navbar [title]="currentView" actionButtonIcon="arrow_back" [isActionButtonVisible]="canGoBack()" (onAction)="navigateBack()">
+                <igx-navbar [title]="currentView" actionButtonIcon="arrow_back" [isActionButtonVisible]="canGoBack"
+                    (onAction)="navigateBack()">
                 </igx-navbar>
             </div>
         </article>
@@ -38,9 +39,23 @@ <h4 class="sample-title">With custom nav icon and action icons</h4>
                     <igx-icon>favorite</igx-icon>
                     <igx-icon>more_vert</igx-icon>
 
-                    <igx-action-icon>
-                        <igx-icon fontSet="material" class="bidirectional-icon">arrow_back</igx-icon>
-                    </igx-action-icon>
+                    <igx-icon igxNavbarAction fontSet="material" class="bidirectional-icon">arrow_back</igx-icon>
+                </igx-navbar>
+            </div>
+        </article>
+
+        <article class="sample-column">
+            <h4 class="sample-title">Navbar with title directive</h4>
+            <div class="navbar-sample dark-navbar">
+                <igx-navbar title="Title sample">
+                    <igx-icon igxNavbarAction>home</igx-icon>
+                    <div igxNavbarAction>IG</div>
+
+                    <div igxNavbarTitle>IG Title</div>
+
+                    <igx-icon>search</igx-icon>
+                    <igx-icon>favorite</igx-icon>
+                    <igx-icon>more_vert</igx-icon>
                 </igx-navbar>
             </div>
         </article>