Add frontend.

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

@@ -0,0 +1,16 @@
+<div>
+    <button type="button">
+        <mat-icon>menu</mat-icon>
+    </button>
+    <img src="assets/images/codiki.png" alt="logo"/>
+    <span class="title">Codiki</span>
+</div>
+<div>
+    <input name="search-query" placeholder="Search something..." />
+    <button type="button">
+        <mat-icon>search</mat-icon>
+    </button>
+</div>
+<div>
+    <a [routerLink]="['/login']">Login</a>
+</div>

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

@@ -0,0 +1,82 @@
+$headerHeight: 3.5em;
+
+:host {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    background-color: #3f51b5;
+    color: white;
+    position: relative;
+    border: 1px solid black;
+    height: $headerHeight;
+
+    div {
+        border: 1px solid black;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        height: $headerHeight;
+
+        &:nth-child(1) {
+            position: absolute;
+            top: 0;
+            left: 0;
+            align-items: center;
+            gap: 1em;
+            padding: 0 1em;
+
+            img {
+                $imageSize: 2em;
+                width: $imageSize;
+                height: $imageSize;
+            }
+
+            .title {
+                font-size: 1.5em;
+            }
+        }
+
+        &:nth-child(2) {
+            flex: 1;
+            $borderRadiusValue: 10em;
+
+            input {
+                flex: 1;
+                width: 60%;
+                max-width: 50em;
+                border-radius: $borderRadiusValue 0 0 $borderRadiusValue;
+                background-color: white;
+                border: solid 1px #ccc;
+                margin: .5em 0;
+                padding: .2em .5em;
+            }
+
+            button {
+                display: flex;
+                align-items: center;
+                border-radius: 0 $borderRadiusValue $borderRadiusValue 0;
+                background-color: white;
+                border: solid 1px #ccc;
+                margin: .5em 0;
+
+                &:hover {
+                    background-color: #eee;
+                }
+            }
+        }
+
+        &:nth-child(3) {
+            position: absolute;
+            top: 0;
+            right: 0;
+            
+            a {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-width: 5em;
+                color: white;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [MatButtonModule, MatIconModule, RouterModule],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss',
+})
+export class HeaderComponent {}