Extract search bar into a standalone component and fix header design.

frontend/src/app/components/header/header.component.html

@@ -1,5 +1,5 @@
-<div>
-    <button type="button" (click)="sideMenu.open()">
+<div class="left">
+    <button type="button" (click)="sideMenu.open()" matTooltip="Click to show side menu">
         <mat-icon>menu</mat-icon>
     </button>
     <a [routerLink]="['/home']">
@@ -7,15 +7,12 @@
         <span class="title">Codiki</span>
     </a>
 </div>
-<div>
-    <div class="search-bar">
-        <input name="search-query" placeholder="Search something..." />
-        <button type="button">
-            <mat-icon>search</mat-icon>
-        </button>
-    </div>
+
+<div class="middle">
+    <app-publications-search-bar></app-publications-search-bar>
 </div>
-<div>
+
+<div class="right">
     <ng-container *ngIf="isAuthenticated; else anonymousRightMenu">
         <a [routerLink]="['/disconnect']" class="button" matRipple>Disconnect</a>
     </ng-container>