Merge pull request #56 from jmdotdev/add-landing-page-smooth-scroll-navigation

Add smooth scroll landing page navigation

Author: jmdotdev

eventz-ui/src/components/navbar/navbar.component.html

@@ -8,13 +8,14 @@ <h1 class="text-white font-bold text-3xl md:text-4xl">EventZ</h1>
     class="md:hidden cursor-pointer"
     src="/assets/images/sort.svg"
     alt="menu"
-    (click)="toggleNav()"
+    (click)="this.showNav = !this.showNav"
   />
 
   <ul class="hidden md:flex items-center">
     <li
       class="text-white cursor-pointer px-8"
       *ngFor="let route of routes"
+      (click)="toggleNav(route)"
     >
       {{ route.name }}
     </li>
@@ -28,7 +29,7 @@ <h1 class="text-white font-bold text-3xl md:text-4xl">EventZ</h1>
 <div
   *ngIf="showNav"
   class="fixed inset-0 bg-black/50 z-40 md:hidden"
-  (click)="toggleNav()"
+  (click)="this.showNav = !this.showNav"
 ></div>
 
 <div
@@ -42,7 +43,7 @@ <h2 class="text-white text-2xl font-bold mb-6">EventZ</h2>
       <li
         class="text-white cursor-pointer"
         *ngFor="let route of routes"
-        (click)="toggleNav()"
+        (click)="toggleNav(route)"
       >
         {{ route.name }}
       </li>

eventz-ui/src/components/navbar/navbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { IRoutes } from '../../interfaces/interface';
 import { CommonModule } from '@angular/common';
 
@@ -12,6 +12,7 @@ import { CommonModule } from '@angular/common';
 export class NavbarComponent implements OnInit {
   showNav: Boolean = false;
   @Input () isLandinPage: boolean = true;
+  @Output () clickedNavItem = new EventEmitter<IRoutes>();
   routes: IRoutes[] = [
     {name:'Home', path: 'home'},
     {name:'About', path: 'about'},
@@ -42,8 +43,9 @@ export class NavbarComponent implements OnInit {
     }
   }
 
-  toggleNav() {
+  toggleNav(route: IRoutes) {
     this.showNav = !this.showNav;
+    this.clickedNavItem.emit(route);
   }
 
   ngOnDestroy() {

eventz-ui/src/pages/landing/landing.component.html

@@ -1,6 +1,6 @@
 <div>
   <div class="main w-full h-[80vh] md:h-screen flex flex-col justify-between mb-12">
-    <app-navbar> </app-navbar>
+    <app-navbar (clickedNavItem)="handleClickedNavItem($event)"> </app-navbar>
     <div class="mx-auto w-3/4">
       <h2 class="text-white text-center text-4xl md:text-6xl font-bold mx-auto">
         Your Ultimate Destination For Unforgettable
@@ -9,13 +9,13 @@ <h2 class="text-white text-center text-4xl md:text-6xl font-bold mx-auto">
     </div>
     <app-search-form></app-search-form>
   </div>
-  <div class="py-12">
+  <div class="py-12" id="about">
     <app-categories></app-categories>
   </div>
   <div class="mx-auto">
     <app-about></app-about>
   </div>
-  <div class="mx-auto">
+  <div class="mx-auto"  id="events">
     <app-events></app-events>
   </div>
   <div class="mx-auto">
@@ -38,7 +38,7 @@ <h2 class="font-bold text-2xl">Make Your Own Event</h2>
        <app-button [backgroundColor]="whiteColor" [color]="deepBlue"></app-button>
     </div>
   </div>
-  <div class="mt-4">
+  <div class="mt-4" id="contact">
     <app-contactform></app-contactform>
   </div>
   <div> 

eventz-ui/src/pages/landing/landing.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { NavbarComponent } from "../../components/navbar/navbar.component";
 import { CategoriesComponent } from "../../components/categories/categories.component";
 import { AboutComponent } from "../../components/about/about.component";
@@ -9,16 +10,18 @@ import { ContactformComponent } from "../../components/contactform/contactform.c
 import { FooterComponent } from "../../components/footer/footer.component";
 import { SearchFormComponent } from "../../components/search-form/search-form.component";
 import { Router } from '@angular/router';
+import { IRoutes } from '../../interfaces/interface';
 
 @Component({
   selector: 'app-landing',
   standalone: true,
-  imports: [NavbarComponent, CategoriesComponent, AboutComponent, EventsComponent, EventComponent, ButtonComponent, ContactformComponent, FooterComponent, SearchFormComponent],
+  imports: [CommonModule,NavbarComponent, CategoriesComponent, AboutComponent, EventsComponent, EventComponent, ButtonComponent, ContactformComponent, FooterComponent, SearchFormComponent],
   templateUrl: './landing.component.html',
   styleUrl: './landing.component.scss'
 })
 export class LandingComponent implements OnInit {
-   
+   whiteColor: string = '#fff'
+   deepBlue: string ='#fff'
    constructor (private router: Router) {}
    ngOnInit(): void {
       if (typeof window !== "undefined") {
@@ -28,6 +31,18 @@ export class LandingComponent implements OnInit {
       }
       }
    }
-   whiteColor: string = '#fff'
-   deepBlue: string ='#fff'
+
+   handleClickedNavItem(event: IRoutes) {
+      console.log('Navigating to:', event);
+      const element = document.getElementById(event.name.toLocaleLowerCase());
+      if (!element) {
+         console.warn('Section not found:', event.name);
+         return;
+      }
+
+      element.scrollIntoView({
+         behavior: 'smooth',
+         block: 'start'
+      });
+         }
 }