TabMenu and Steps Demo Updated

src/app/components/menus/confirmation.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-confirmation',
   template: `
-  <div class="flex flex-column align-items-center py-5 px-3">
+  <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
     <i class="pi pi-fw pi-check mr-2 text-2xl"></i>
     <p class="m-0 mt-5 text-center text-lg">Confirmation Component Content via Child Route</p>
   </div>

src/app/components/menus/menus.component.html

@@ -22,15 +22,14 @@
 
     <div class="col-12">
         <div class="card card-w-title flex flex-wrap">
-            <div class="col-12">
+            <div class="col-12 md:col-8 h-full">
-                <h5>TabMenu and Steps</h5>
+                <h5>TabMenu</h5>
-                <p>TabMenu and Steps are integrated with the same child routes.</p>
+                <p-tabMenu styleClass="mb-5" [model]="routeItems"></p-tabMenu>
-            </div>
+
-            <div class="col-12 md:col-8">
+                <h5>Steps</h5>
-                    <p-tabMenu [model]="routeItems"></p-tabMenu>
                 <p-steps [model]="routeItems" styleClass="mt-5" [readonly]="false"></p-steps>
             </div>
-            <div class="col-12 md:col-4 align-self-center h-full">
+            <div class="col-12 md:col-4 mt-5 md:mt-0">
                 <router-outlet></router-outlet>
             </div>
         </div>

src/app/components/menus/payment.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-payment',
   template: `
-    <div class="flex flex-column align-items-center py-5 px-3">
+    <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
       <i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
       <p class="m-0 mt-5 text-center text-lg">Payment Component Content via Child Route</p>
     </div>

src/app/components/menus/personal.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-personal',
   template: `
-  <div class="flex flex-column align-items-center py-5 px-3">
+  <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
     <i class="pi pi-fw pi-user mr-2 text-2xl"></i>
     <p class="mt-5 text-center text-lg">Personal Component Content via Child Route</p>
   </div>

src/app/components/menus/seat.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-seat',
   template: `
-    <div class="flex flex-column align-items-center py-5 px-3">
+    <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
       <i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
       <p class="m-0 mt-5 text-center text-lg">Seat Component Content via Child Route</p>
     </div>