Landing page navigation responsiveness

eventz-ui/src/components/admin/top-bar/top-bar.component.html

@@ -1,4 +1,7 @@
-<div class="flex items-center justify-between mt-2">
+<div class="flex items-center mx-auto w-[100vw] lg:w-[85vw] justify-between mt-2">
+    <button class="lg:hidden ml-4" (click)="menuClick.emit()">
+  <fa-icon [icon]="faBars"></fa-icon>
+</button>
     <div class="text-lg font-semibold">
         Dashboard
     </div>

eventz-ui/src/components/admin/top-bar/top-bar.component.ts

@@ -1,14 +1,17 @@
-import { Component } from '@angular/core';
-import { faBell, faDotCircle } from '@fortawesome/free-solid-svg-icons';
+import { Component, EventEmitter, Output } from '@angular/core';
+import { faBell, faDotCircle, faBars } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { CommonModule } from '@angular/common';
 @Component({
   selector: 'app-top-bar',
   standalone: true,
-  imports: [FontAwesomeModule],
+  imports: [CommonModule, FontAwesomeModule],
   templateUrl: './top-bar.component.html',
   styleUrl: './top-bar.component.scss'
 })
 export class TopBarComponent {
     faBell = faBell;
     faDotCircle = faDotCircle;
+    faBars = faBars;
+    @Output() menuClick = new EventEmitter<void>();
 }

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

@@ -1,24 +1,55 @@
-<!-- Navbar Container -->
-<div class="flex flex-col md:flex-row items-center justify-between w-full min-h-20 px-4 py-0" [ngClass]="!isLandinPage ? 'not-landing': ''">
-  <div class="flex justify-between items-center w-full md:w-auto">
-    <h1 class="text-white font-bold text-3xl md:text-4xl">EventZ</h1>
-      <img
-         class="w-auto h-auto object-cover md:hidden"
-         src="/assets/images/sort.svg"
-         alt="sign-up.png"
-         (click)="toggleNav()"
-       />
-  </div>
-  <ul 
-    class="flex flex-col md:flex-row items-center w-full md:w-auto mt-4 md:mt-0"
-    [ngClass]="{'hidden': !showNav, 'flex': showNav}"
-  >
-    <li class="text-white cursor-pointer md:px-8" *ngFor="let route of routes">
+<div
+  class="flex items-center justify-between w-full min-h-20 px-4"
+  [ngClass]="!isLandinPage ? 'not-landing' : ''"
+>
+  <h1 class="text-white font-bold text-3xl md:text-4xl">EventZ</h1>
+
+  <img
+    class="md:hidden cursor-pointer"
+    src="/assets/images/sort.svg"
+    alt="menu"
+    (click)="toggleNav()"
+  />
+
+  <ul class="hidden md:flex items-center">
+    <li
+      class="text-white cursor-pointer px-8"
+      *ngFor="let route of routes"
+    >
       {{ route.name }}
     </li>
   </ul>
 
-  <button class="border-2 border-white text-white rounded-lg px-4 py-1 md:block" *ngIf="showNav || !isMobile()">
+  <button class="hidden md:block border-2 border-white text-white rounded-lg px-4 py-1">
     Sign In
   </button>
 </div>
+
+<div
+  *ngIf="showNav"
+  class="fixed inset-0 bg-black/50 z-40 md:hidden"
+  (click)="toggleNav()"
+></div>
+
+<div
+  class="fixed top-0 left-0 h-full w-64 bg-[#0f0152] z-50 transform transition-transform duration-300 md:hidden"
+  [ngClass]="showNav ? 'translate-x-0' : '-translate-x-full'"
+>
+  <div class="p-6">
+    <h2 class="text-white text-2xl font-bold mb-6">EventZ</h2>
+
+    <ul class="flex flex-col space-y-4">
+      <li
+        class="text-white cursor-pointer"
+        *ngFor="let route of routes"
+        (click)="toggleNav()"
+      >
+        {{ route.name }}
+      </li>
+    </ul>
+
+    <button class="mt-8 w-full border-2 border-white text-white rounded-lg py-2">
+      Sign In
+    </button>
+  </div>
+</div>

eventz-ui/src/layouts/admin-layout/admin-layout.component.html

@@ -1,13 +1,33 @@
 <div class="flex min-w-full min-h-screen bg-eventsDetailBackground">
- <div class="hidden lg:block w-[15%]">
+
+  <!-- Desktop sidenav -->
+  <div class="hidden lg:block w-[15%]">
     <app-side-nav></app-side-nav>
- </div>
-   <div class="flex flex-col w-[100%] lg:w-[85%] max-h-screen overflow-y-auto">
-     <div class="h-14 bg-white">
-        <app-top-bar></app-top-bar>
-     </div>
-     <div>
-         <router-outlet></router-outlet>
-     </div>
-   </div>
-</div>
+  </div>
+
+  <!-- Mobile backdrop -->
+  <div
+    *ngIf="showSideNav"
+    class="fixed inset-0 bg-black/50 z-40 lg:hidden"
+    (click)="toggleSideNav()"
+  ></div>
+
+  <!-- Mobile sidenav -->
+  <div
+    class="fixed top-0 left-0 h-full w-64 bg-white z-50 transform transition-transform duration-300 lg:hidden"
+    [ngClass]="showSideNav ? 'translate-x-0' : '-translate-x-full'"
+  >
+    <app-side-nav></app-side-nav>
+  </div>
+
+  <!-- Main content -->
+  <div class="flex flex-col w-full lg:w-[85%] max-h-screen overflow-y-auto">
+    <div class="h-14 bg-white flex items-center">
+      <app-top-bar (menuClick)="toggleSideNav()"></app-top-bar>
+    </div>
+
+    <div>
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+</div>

eventz-ui/src/layouts/admin-layout/admin-layout.component.ts

@@ -2,14 +2,20 @@ import { Component } from '@angular/core';
 import { SideNavComponent } from "../../components/admin/side-nav/side-nav.component";
 import { RouterOutlet } from '@angular/router';
 import { TopBarComponent } from "../../components/admin/top-bar/top-bar.component";
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-admin-layout',
   standalone: true,
-  imports: [SideNavComponent, RouterOutlet, TopBarComponent],
+  imports: [CommonModule, SideNavComponent, RouterOutlet, TopBarComponent],
   templateUrl: './admin-layout.component.html',
   styleUrl: './admin-layout.component.scss'
 })
 export class AdminLayoutComponent {
+showSideNav = false;
+
+toggleSideNav() {
+  this.showSideNav = !this.showSideNav;
+}
 
 }

eventz-ui/src/pages/admin/ticket-list-table/ticket-list-table.component.ts

@@ -38,9 +38,9 @@ export class TicketListTableComponent {
     return Math.ceil(this.tickets.length / this.pageSize);
   }
 
-  get paginatedTickets(): Ticket[] | [] {
+  get paginatedTickets(): Ticket[] {
     const start = (this.currentPage - 1) * this.pageSize;
-    return this.tickets.slice(start, start + this.pageSize) || [];
+    return this.tickets.slice(start, start + this.pageSize);
   }
 
   changePage(page: number) {

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

@@ -1,8 +1,8 @@
 <div>
-  <div class="main w-full h-screen flex flex-col justify-between mb-12">
+  <div class="main w-full h-[80vh] md:h-screen flex flex-col justify-between mb-12">
     <app-navbar> </app-navbar>
     <div class="mx-auto w-3/4">
-      <h2 class="text-white text-center text-2xl md:text-6xl font-bold mx-auto">
+      <h2 class="text-white text-center text-4xl md:text-6xl font-bold mx-auto">
         Your Ultimate Destination For Unforgettable
         <span class="text-paleOrange font-bold">Events</span>
       </h2>