style: latest ui fixed

src/app/components/middle-section/middle-section.component.css

@@ -20,3 +20,57 @@ div[style*="background-color: black"] .custom-cell {
 .pure-white {
   background-color: #ffffff !important;
 }
+
+
+.middle-section-container {
+  display: flex;
+  gap: 1rem;
+  height: 49vh;
+  width: 100%;
+}
+
+/* Desktop view (default) */
+.main-table {
+  width: 60%;
+}
+
+.transaction-summary {
+  width: 40%;
+}
+
+.borderless-custom {
+  border-collapse: separate;
+  border-spacing: 4px;
+}
+
+.custom-cell {
+  height: 3.4rem;
+  background-color: #f8f9fa;
+  border: 1px solid #ced4da;
+  border-radius: 0.3rem;
+}
+
+div[style*="background-color: black"] .custom-cell {
+  background-color: #343a40;
+}
+
+.pure-white {
+  background-color: #ffffff !important;
+}
+
+/* Responsive layout for tablet and mobile */
+@media (max-width: 800px) {
+  .middle-section-container {
+    flex-direction: column;
+    align-items: center;
+    height: auto;
+    overflow-y: auto;
+    padding-bottom: 1rem;
+  }
+
+  .transaction-summary,
+  .main-table {
+    width: 80% !important;
+    margin-bottom: 1rem;
+  }
+}

src/app/components/middle-section/middle-section.component.html

@@ -1,43 +1,11 @@
-<div class="d-flex gap-4" style="width: 100%; height: 49vh;">
+<!-- Responsive Container -->
+<div class="middle-section-container">
 
-  <!-- Main Table: 60% width -->
+  <!-- Transaction Summary -->
-  <div style="width: 60%;">
+  <div class="transaction-summary">
-    <!-- Light grey wrapper -->
-    <div class="p-3 rounded h-100 d-flex flex-column justify-content-between" style="background-color: #f1f1f1df;">
-      <!-- Main Table -->
-      <table class="table borderless-custom w-100 mb-2">
-        <colgroup>
-          <col style="width: 12%">
-          <col style="width: 60%">
-          <col style="width: 10%">
-          <col style="width: 18%">
-        </colgroup>
-        <tbody>
-          <tr *ngFor="let row of rows">
-            <td class="custom-cell"></td>
-            <td class="custom-cell"></td>
-            <td class="custom-cell"></td>
-            <td class="custom-cell"></td>
-          </tr>
-        </tbody>
-      </table>
-
-      <!-- Controls -->
-      <div class="d-flex justify-content-between align-items-center">
-        <button class="btn btn-dark">Repeat</button>
-        <div class="fw-bold" style="margin-right: 3vw;">Amount :</div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Transaction Summary: 40% width -->
-  <div style="width: 40%;">
-    <!-- Outer black container with column layout -->
     <div class="p-3 rounded text-white h-100 d-flex flex-column" style="background-color: black;">
-      <!-- Heading -->
       <h5 class="text-center mb-3">Transaction Summary</h5>
 
-      <!-- Nested Grey Box (fills remaining height) -->
       <div class="rounded flex-grow-1" style="background-color: #f1f1f1df; padding: 1rem; overflow: hidden;">
         <table class="table borderless-custom w-100 text-dark mb-0">
           <colgroup>
@@ -56,4 +24,32 @@
       </div>
     </div>
   </div>
+
+  <!-- Main Table -->
+  <div class="main-table">
+    <div class="p-3 rounded h-100 d-flex flex-column justify-content-between" style="background-color: #f1f1f1df;">
+      <table class="table borderless-custom w-100 mb-2">
+        <colgroup>
+          <col style="width: 12%">
+          <col style="width: 60%">
+          <col style="width: 10%">
+          <col style="width: 18%">
+        </colgroup>
+        <tbody>
+          <tr *ngFor="let row of rows">
+            <td class="custom-cell"></td>
+            <td class="custom-cell"></td>
+            <td class="custom-cell"></td>
+            <td class="custom-cell"></td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="d-flex justify-content-between align-items-center">
+        <button class="btn btn-dark">Repeat</button>
+        <div class="fw-bold" style="margin-right: 3vw;">Amount :</div>
+      </div>
+    </div>
+  </div>
+
 </div>

src/app/components/navbar/navbar.component.css

@@ -2,7 +2,7 @@
   background-color: #6a4607;
   height: 2.5rem;
   font-size: 0.85rem;
-  width: 94vw;
+  width: 100%;
 }
 
 .top-live-button {
@@ -24,12 +24,13 @@
   cursor: pointer;
 }
 
+
 .custom-navbar {
   background-color: #a15914;
   height: 2.7rem;
   font-weight: bold;
   font-size: 0.9rem;
-  width: 94vw;
+  width: 100%;
 }
 
 .nav-dropdown {
@@ -67,3 +68,39 @@
   background-color: rgba(255, 255, 255, 0.1);
   cursor: pointer;
 }
+
+
+.hamburger {
+  font-size: 1.7rem;
+  background: none;
+  border: none;
+  color: rgb(13, 13, 13);
+  padding: 0.3rem 0.75rem;
+}
+
+@media (max-width: 800px) {
+  .mobile-menu-container {
+    background-color: #c17a30;
+    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.2);
+  }
+
+  .nav-button {
+    justify-content: flex-end;
+    border-left: none;
+    border-right: none;
+    font-size: 1rem;
+  }
+
+  .nav-dropdown {
+    text-align: right;
+    padding-right: 1rem;
+  }
+
+  .dropdown-menu {
+    text-align: right;
+  }
+
+  .dropdown-item {
+    text-align: right;
+  }
+}

src/app/components/navbar/navbar.component.html

@@ -1,5 +1,5 @@
 <!-- Top Info Bar -->
-<div class="top-bar d-flex justify-content-between align-items-center ">
+<div class="top-bar d-flex justify-content-between align-items-center">
   <div class="text-light small ps-3">
     {{ dateTime }}
   </div>
@@ -10,43 +10,93 @@
 </div>
 
 <!-- Main Navbar -->
-<nav class="navbar navbar-expand-lg custom-navbar px-0">
+<nav class="navbar custom-navbar px-0">
-  <div class="container-fluid p-0 d-flex justify-content-between align-items-center">
+  <div class="container-fluid p-0 d-flex align-items-center">
 
-    <!-- Dropdown Section (50vw) -->
+    <!-- Hamburger Toggle (Visible only ≤ 800px) -->
-    <div class="d-flex" style="width: 50vw;">
+    <button class="hamburger d-lg-none ms-auto me-3" (click)="toggleMenu()">
-      <!-- Venue Dropdown -->
+      &#9776;
-      <div class="dropdown w-50">
+    </button>
-        <button class="nav-dropdown w-100 text-start ps-3" data-bs-toggle="dropdown">
+
-          Venue | MYS
+    <!-- Desktop View -->
-        </button>
+    <div class="d-none d-lg-flex justify-content-between align-items-center w-100">
-        <ul class="dropdown-menu w-100">
+
-          <li><a class="dropdown-item" href="#">MYS</a></li>
+      <!-- Dropdown Section -->
-          <li><a class="dropdown-item" href="#">BLR</a></li>
+      <div class="d-flex" style="width: 50vw;">
-          <li><a class="dropdown-item" href="#">CHN</a></li>
+        <div class="dropdown w-50">
-        </ul>
+          <button class="nav-dropdown w-100 text-start ps-3" data-bs-toggle="dropdown">
+            Venue | MYS
+          </button>
+          <ul class="dropdown-menu w-100">
+            <li><a class="dropdown-item" href="#">MYS</a></li>
+            <li><a class="dropdown-item" href="#">BLR</a></li>
+            <li><a class="dropdown-item" href="#">CHN</a></li>
+          </ul>
+        </div>
+
+        <div class="dropdown w-50">
+          <button class="nav-dropdown w-100 text-start ps-3" data-bs-toggle="dropdown">
+            Race No. | 1
+          </button>
+          <ul class="dropdown-menu w-100">
+            <li><a class="dropdown-item" href="#">1</a></li>
+            <li><a class="dropdown-item" href="#">2</a></li>
+            <li><a class="dropdown-item" href="#">3</a></li>
+          </ul>
+        </div>
       </div>
 
-      <!-- Race No Dropdown -->
+      <!-- Buttons Section -->
-      <div class="dropdown w-50">
+      <div class="d-flex justify-content-end" style="width: 40vw;">
-        <button class="nav-dropdown w-100 text-start ps-3" data-bs-toggle="dropdown">
+        <div class="nav-button flex-grow-1 text-center">Wallet</div>
-          Race No. | 1
+        <div class="nav-button flex-grow-1 text-center">Result</div>
-        </button>
+        <div class="nav-button flex-grow-1 text-center">Messages</div>
-        <ul class="dropdown-menu w-100">
+        <div class="nav-button flex-grow-1 text-center">View-Log</div>
-          <li><a class="dropdown-item" href="#">1</a></li>
+        <div class="nav-button flex-grow-1 text-center text">Log Out</div>
-          <li><a class="dropdown-item" href="#">2</a></li>
-          <li><a class="dropdown-item" href="#">3</a></li>
-        </ul>
       </div>
     </div>
 
-    <!-- Buttons Section (50vw) -->
+    <!-- Mobile View (Hamburger Menu Content) -->
-    <div class="d-flex justify-content-end" style="width: 40vw;">
+    <div class="d-lg-none w-100 mt-2 d-flex justify-content-end"
-      <div class="nav-button flex-grow-1 text-center">Wallet</div>
+         *ngIf="isMenuOpen">
-      <div class="nav-button flex-grow-1 text-center">Result</div>
+
-      <div class="nav-button flex-grow-1 text-center">Messages</div>
+      <!-- Right-Aligned Hamburger Menu (50% Width) -->
-      <div class="nav-button flex-grow-1 text-center">View-Log</div>
+      <div class="mobile-menu-container p-3" style="width: 50%; background-color: #c17a30;">
-      <div class="nav-button flex-grow-1 text-center text">Log Out</div>
+
+        <!-- Venue Dropdown -->
+        <div class="dropdown mb-2 text-end">
+          <button class="nav-dropdown w-100 text-end pe-3" data-bs-toggle="dropdown">
+            Venue | MYS
+          </button>
+          <ul class="dropdown-menu w-100 text-end">
+            <li><a class="dropdown-item text-end" href="#">MYS</a></li>
+            <li><a class="dropdown-item text-end" href="#">BLR</a></li>
+            <li><a class="dropdown-item text-end" href="#">CHN</a></li>
+          </ul>
+        </div>
+
+        <!-- Race Dropdown -->
+        <div class="dropdown mb-2 text-end">
+          <button class="nav-dropdown w-100 text-end pe-3" data-bs-toggle="dropdown">
+            Race No. | 1
+          </button>
+          <ul class="dropdown-menu w-100 text-end">
+            <li><a class="dropdown-item text-end" href="#">1</a></li>
+            <li><a class="dropdown-item text-end" href="#">2</a></li>
+            <li><a class="dropdown-item text-end" href="#">3</a></li>
+          </ul>
+        </div>
+
+        <!-- Menu Buttons -->
+        <div class="d-flex flex-column text-end">
+          <div class="nav-button w-100 text-end pe-3 py-2 border-top">Wallet</div>
+          <div class="nav-button w-100 text-end pe-3 py-2 border-top">Result</div>
+          <div class="nav-button w-100 text-end pe-3 py-2 border-top">Messages</div>
+          <div class="nav-button w-100 text-end pe-3 py-2 border-top">View-Log</div>
+          <div class="nav-button w-100 text-end pe-3 py-2 border-top">Log Out</div>
+        </div>
+
+      </div>
     </div>
 
   </div>

src/app/components/navbar/navbar.component.ts

@@ -1,22 +1,37 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
+import { CommonModule } from '@angular/common'; // ✅ this is what you need
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.css'],
-  standalone: true
+  standalone: true,
+  imports: [CommonModule] // ✅ import here
 })
 export class NavbarComponent implements OnInit {
-
   dateTime: string = '';
+  isMenuOpen: boolean = false;
+  screenWidth: number = window.innerWidth;
 
   ngOnInit() {
     this.updateDateTime();
-    setInterval(() => this.updateDateTime(), 1000); // refresh every second
+    setInterval(() => this.updateDateTime(), 1000);
   }
 
   updateDateTime() {
     const now = new Date();
-    this.dateTime = now.toLocaleString(); // You can format it differently if needed
+    this.dateTime = now.toLocaleString();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+    this.screenWidth = event.target.innerWidth;
+    if (this.screenWidth > 800) {
+      this.isMenuOpen = false;
+    }
+  }
+
+  toggleMenu() {
+    this.isMenuOpen = !this.isMenuOpen;
   }
 }

src/app/home/home.component.html

@@ -1,55 +1,25 @@
-<!--<div class="container-fluid">
+<div class="d-flex min-vh-100">
-  <div class="row">
- Sidebar (fixed width) -->
-     <!--   <div class="col-auto bg-light vh-100 p-0">
-      <app-sidebar></app-sidebar>
-    </div>
 
-     Right Content Area -->
+  <!-- Sidebar (fixed width) -->
-   <!-- <div class="col p-0 d-flex flex-column">
+  <div class="sidebar-container">
-       Navbar -->
-   <!--   <app-navbar></app-navbar>
-
-      Main Content -->
-     <!-- <div class="flex-grow-1 p-3">
-        <div style="width: 91vw;">   ⬅️ 60% of the viewport width -->
-     <!--     <app-middle-section></app-middle-section>
-        </div>
-      </div>
-
-       Touch Pad at Bottom 
-      <div class="border-top p-2 bg-white">
-        <app-touch-pad-menu></app-touch-pad-menu>
-      </div>
-    </div>
-  </div>
-</div> -->
-
-
-<div class="d-flex" style="min-height: 100vh;">
-
-  <!-- Sidebar -->
-  <div style="width: 250px;" class="bg-light vh-100">
     <app-sidebar></app-sidebar>
   </div>
 
   <!-- Right Content Area -->
   <div class="flex-grow-1 d-flex flex-column">
-    
+
     <!-- Navbar -->
     <app-navbar></app-navbar>
 
     <!-- Main Content -->
     <div class="flex-grow-1 p-3">
-      <div style="width: 91vw;">
+      <app-middle-section></app-middle-section>
-        <app-middle-section></app-middle-section>
-      </div>
     </div>
 
-    <!-- Touch Pad Menu at Bottom -->
+    <!-- Touch Pad -->
     <div class="border-top p-2 bg-white">
       <app-touch-pad-menu></app-touch-pad-menu>
     </div>
-  </div>
 
+  </div>
 </div>

src/styles.css

@@ -1 +1,11 @@
-/* You can add global styles to this file, and also import other style files */
+html{
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}