finish mobile menu and scroll event

src/app/app.html

@@ -3,10 +3,10 @@
 <main class="main">
   <app-cover></app-cover>
   <app-welcome></app-welcome>
-  <app-two-events></app-two-events>
-  <app-venue></app-venue>
-  <app-media></app-media>
-  <app-information></app-information>
+  <app-two-events id="events"></app-two-events>
+  <app-venue id="venue"></app-venue>
+  <app-media id="media"></app-media>
+  <app-information id="information"></app-information>
   <app-cities></app-cities>
   <app-footer></app-footer>
   <router-outlet />

src/app/header/header.html

@@ -4,12 +4,12 @@
 <div
   #menuContainer
   class="w-screen flex md:hidden items-center h-19 bg-ejc-dark-blue justify-between px-5 relative">
-  <div>logo</div>
+  <div></div>
 
   <button
     type="button"
     (click)="isMenuOpen = !isMenuOpen"
-    class="flex items-center justify-center">
+    class="flex items-center justify-center cursor-pointer">
     <!-- Hamburger icon -->
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -25,27 +25,20 @@
     </svg>
   </button>
 
-  @if (isMenuOpen) {
-  <div
-    #menu
-    class="absolute top-full right-0 mt-2 w-56 rounded-lg shadow-lg bg-white z-50">
-    <a
-      class="block px-4 py-3 hover:bg-gray-100 transition-colors cursor-pointer"
-      (click)="closeMenu()">
-      Menu Item 1
-    </a>
-
-    <a
-      class="block px-4 py-3 hover:bg-gray-100 transition-colors cursor-pointer"
-      (click)="closeMenu()">
-      Menu Item 2
-    </a>
-
-    <a
-      class="block px-4 py-3 hover:bg-gray-100 transition-colors cursor-pointer"
-      (click)="closeMenu()">
-      Menu Item 3
-    </a>
-  </div>
-  }
+	@if (isMenuOpen) {
+	<div #menu class="absolute top-full right-0 mt-2 w-56 rounded-lg shadow-lg bg-white z-50">
+		<a class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer" (click)="scrollTo('events'); closeMenu()">
+			Events
+		</a>
+		<a class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer" (click)="scrollTo('venue'); closeMenu()">
+			Venue
+		</a>
+		<a class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer" (click)="scrollTo('media'); closeMenu()">
+			Media
+		</a>
+		<a class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer" (click)="scrollTo('information'); closeMenu()">
+			Information
+		</a>
+	</div>
+	}
 </div>

src/app/header/header.ts

@@ -20,6 +20,10 @@ export class Header {
     this.isMenuOpen = false;
   }
 
+  scrollTo(id: string): void {
+    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
+  }
+
   @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.isMenuOpen) {