search bar component for toolbar

src/app/core/components/search-bar/search-bar.component.html

@@ -0,0 +1,20 @@
+<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxLayout="row" fxLayoutAlign="start center" fxFlex>
+
+    <label for="fuse-search-bar-input">
+        <button md-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
+                *ngIf="collapsed">
+            <md-icon class="s-24">search</md-icon>
+        </button>
+        <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
+            <md-progress-spinner color="md-accent" mode="indeterminate"></md-progress-spinner>
+        </span>-->
+    </label>
+
+    <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
+
+    <button md-icon-button class="fuse-search-bar-collapser md-icon-button" (click)="collapse()"
+            aria-label="Collapse Search Bar">
+        <md-icon class="s-24">close</md-icon>
+    </button>
+
+</div>

src/app/core/components/search-bar/search-bar.component.scss

@@ -0,0 +1,64 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+
+    .fuse-search-bar {
+        height: 64px;
+        font-size: 13px;
+
+        .fuse-search-bar-expander,
+        .fuse-search-bar-collapser {
+            cursor: pointer;
+            padding: 0 20px;
+            margin: 0;
+            width: 64px !important;
+            height: 64px !important;
+            line-height: 64px !important;
+        }
+
+        .fuse-search-bar-loader {
+            width: 64px !important;
+            height: 64px !important;
+            line-height: 64px !important;
+        }
+
+        .fuse-search-bar-collapser {
+            display: none;
+        }
+
+        #fuse-search-bar-input {
+            display: none;
+            min-height: 64px;
+            background-color: transparent;
+            font-size: 16px;
+        }
+
+        &.expanded {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: #FFFFFF;
+            z-index: 10;
+
+            #fuse-search-bar-input {
+                display: block;
+            }
+
+            .fuse-search-bar-collapser {
+                display: block;
+            }
+        }
+    }
+
+    body {
+
+        &.fuse-search-bar-expanded {
+
+            #toolbar {
+                z-index: 999 !important;
+            }
+        }
+    }
+}

src/app/core/components/search-bar/search-bar.component.ts

@@ -0,0 +1,41 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-search-bar',
+    templateUrl: './search-bar.component.html',
+    styleUrls  : ['./search-bar.component.scss']
+})
+export class FuseSearchBarComponent implements OnInit
+{
+    collapsed: boolean;
+
+    @Output() onInput: EventEmitter<any> = new EventEmitter();
+
+    constructor()
+    {
+        this.collapsed = true;
+    }
+
+    ngOnInit()
+    {
+
+    }
+
+    collapse()
+    {
+        this.collapsed = true;
+    }
+
+    expand()
+    {
+        this.collapsed = false;
+    }
+
+    search(event)
+    {
+        const value = event.target.value;
+
+        this.onInput.emit(value);
+    }
+
+}

src/app/core/components/search-bar/search-bar.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { SharedModule } from '../../modules/shared.module';
+import { FuseSearchBarComponent } from './search-bar.component';
+
+@NgModule({
+    declarations: [
+        FuseSearchBarComponent
+    ],
+    imports     : [
+        SharedModule,
+        RouterModule
+    ],
+    exports     : [
+        FuseSearchBarComponent
+    ]
+})
+export class FuseSearchBarModule
+{
+}

src/app/main/main.module.ts

@@ -11,6 +11,7 @@ import { FuseNavbarToggleDirective } from './navbar/navbar-toggle.directive';
 import { QuickPanelComponent } from './quick-panel/quick-panel.component';
 import { FuseThemeOptionsComponent } from '../core/components/theme-options/theme-options.component';
 import { FuseShortcutsModule } from '../core/components/shortcuts/shortcuts.module';
+import { FuseSearchBarModule } from '../core/components/search-bar/search-bar.module';
 
 @NgModule({
     declarations: [
@@ -27,7 +28,8 @@ import { FuseShortcutsModule } from '../core/components/shortcuts/shortcuts.modu
         SharedModule,
         RouterModule,
         FuseNavigationModule,
-        FuseShortcutsModule
+        FuseShortcutsModule,
+        FuseSearchBarModule
     ],
     exports     : [
         FuseMainComponent

src/app/main/toolbar/toolbar.component.html

@@ -49,11 +49,7 @@
 
             <div class="toolbar-separator"></div>
 
-            <button md-icon-button
+            <fuse-search-bar (onInput)="search($event)"></fuse-search-bar>
-                    class="search-button"
-                    aria-label="Search">
-                <md-icon class="icon">search</md-icon>
-            </button>
 
             <div class="toolbar-separator"></div>
 

src/app/main/toolbar/toolbar.component.scss

@@ -1,4 +1,5 @@
 :host {
+    position: relative;
     z-index: 4;
 
     &.below{

src/app/main/toolbar/toolbar.component.ts

@@ -77,4 +77,10 @@ export class FuseToolbarComponent
                 }
             });
     }
+
+    search(value)
+    {
+        // Do your search here...
+        console.log(value);
+    }
 }