Move topbar to it's own component.

Author: hikalkan

angular/src/app/app.component.html

@@ -1,6 +1,5 @@
-<!-- Overlay For Sidebars -->
-<div class="overlay"></div>
-<!-- #END# Overlay For Sidebars -->
+<div class="overlay"></div>
+
 <!-- Search Bar -->
 <div class="search-bar">
     <div class="search-icon">
@@ -10,39 +9,22 @@
     <div class="close-search">
         <i class="material-icons">close</i>
     </div>
-</div>
-<!-- #END# Search Bar -->
-<!-- Top Bar -->
-<nav class="navbar">
-    <div class="container-fluid">
-        <div class="navbar-header">
-            <a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"></a>
-            <a href="javascript:void(0);" class="bars"></a>
-            <a class="navbar-brand" asp-controller="Home" asp-action="Index"><i class="fa fa-cubes"></i> AbpProjectName</a>
-        </div>
-        <div class="collapse navbar-collapse" id="navbar-collapse">
-            <ul class="nav navbar-nav navbar-right">
-                <li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
-                <topbar-languageswitch></topbar-languageswitch>
-                <li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="material-icons">more_vert</i></a></li>
-            </ul>
-        </div>
-    </div>
-</nav>
-<!-- #Top Bar -->
+</div> <!-- #END# Search Bar -->
+
+<top-bar></top-bar>
 
 <section>
     <aside id="leftsidebar" class="sidebar">
         <sidebar-user-area></sidebar-user-area>
         <sidebar-nav></sidebar-nav>
         <sidebar-footer></sidebar-footer>
     </aside>
+
     <right-sidebar></right-sidebar>
 </section>
 
-
 <section class="content">
     <div class="container-fluid">
         <router-outlet></router-outlet>
     </div>
-</section>
+</section>

angular/src/app/app.module.ts

@@ -19,6 +19,7 @@ import { UsersComponent } from '@app/users/users.component';
 import { CreateUserModalComponent } from '@app/users/create-user-modal.component';
 import { TenantsComponent } from '@app/tenants/tenants.component';
 import { CreateTenantModalComponent } from '@app/tenants/create-tenant-modal.component';
+import { TopBarComponent } from '@app/layout/topbar.component';
 import { TopBarLanguageSwitchComponent } from '@app/layout/topbar-languageswitch.component';
 import { SideBarUserAreaComponent } from '@app/layout/sidebar-user-area.component';
 import { SideBarNavComponent } from '@app/layout/sidebar-nav.component';
@@ -34,6 +35,7 @@ import { RightSideBarComponent } from '@app/layout/right-sidebar.component';
         CreateUserModalComponent,
         TenantsComponent,
         CreateTenantModalComponent,
+        TopBarComponent,
         TopBarLanguageSwitchComponent,
         SideBarUserAreaComponent,
         SideBarNavComponent,

angular/src/app/layout/topbar.component.html

@@ -0,0 +1,16 @@
+<nav class="navbar">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"></a>
+            <a href="javascript:void(0);" class="bars"></a>
+            <a class="navbar-brand" asp-controller="Home" asp-action="Index"><i class="fa fa-cubes"></i> AbpProjectName</a>
+        </div>
+        <div class="collapse navbar-collapse" id="navbar-collapse">
+            <ul class="nav navbar-nav navbar-right">
+                <li><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
+                <topbar-languageswitch></topbar-languageswitch>
+                <li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="material-icons">more_vert</i></a></li>
+            </ul>
+        </div>
+    </div>
+</nav>

angular/src/app/layout/topbar.component.ts

@@ -0,0 +1,16 @@
+import { Component, Injector, ViewEncapsulation } from '@angular/core';
+import { AppComponentBase } from '@shared/app-component-base';
+
+@Component({
+    templateUrl: './topbar.component.html',
+    selector: 'top-bar',
+    encapsulation: ViewEncapsulation.None
+})
+export class TopBarComponent extends AppComponentBase {
+
+    constructor(
+        injector: Injector
+    ) {
+        super(injector);
+    }
+}