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

frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts

@@ -0,0 +1,31 @@
+import { HttpParams } from "@angular/common/http";
+import { Component, inject } from "@angular/core";
+import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
+import { MatIconModule } from "@angular/material/icon";
+import { Router } from "@angular/router";
+
+
+@Component({
+    selector: 'app-publications-search-bar',
+    templateUrl: './publications-search-bar.component.html',
+    styleUrl: './publications-search-bar.component.scss',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        MatIconModule
+    ],
+    providers: []
+})
+export class PublicationsSearchBarComponent {
+    private formBuilder = inject(FormBuilder);
+    private router = inject(Router);
+    formGroup = this.formBuilder.group({
+        criteria: new FormControl<string | undefined>('', [Validators.required])
+    });
+
+    searchPublications(): void {
+        let queryParams = new HttpParams();
+        queryParams = queryParams.set('query', this.formGroup.controls.criteria.value ?? '');
+        this.router.navigate(['/publications'], {queryParams});
+    }
+}