mobile design until Media section

src/app/header/header.ts

@@ -0,0 +1,37 @@
+import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  imports: [],
+  templateUrl: './header.html',
+  styleUrl: './header.css',
+})
+export class Header {
+  isMenuOpen = false;
+
+  @ViewChild('menuContainer')
+  menuContainer!: ElementRef;
+
+  toggleMenu(): void {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
+  closeMenu(): void {
+    this.isMenuOpen = false;
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.isMenuOpen) {
+      return;
+    }
+
+    const clickedInside = this.menuContainer.nativeElement.contains(
+      event.target,
+    );
+
+    if (!clickedInside) {
+      this.closeMenu();
+    }
+  }
+}