Kuwait Comp: Bottom Navbar

packages/components/plh/index.ts

@@ -3,13 +3,15 @@ import { PlhParentPointBoxComponent } from "./parent-point-box/parent-point-box.
 import { PlhModuleListItemComponent } from "./plh-kids-kw/components/module-list-item/module-list-item.component";
 import { PlhCompletionModalComponent } from "./plh-kids-kw/components/completion-modal/completion-modal.component";
 import { PlhModuleDetailsHeaderComponent } from "./plh-kids-kw/components/module-details-header/module-details-header.component";
+import { PlhBottomNavigationBarComponent } from "./plh-kids-kw/components/bottom-navigation-bar/bottom-navigation-bar.component";
 
 export {
   PlhParentPointCounterComponent,
   PlhParentPointBoxComponent,
   PlhModuleListItemComponent,
   PlhCompletionModalComponent,
   PlhModuleDetailsHeaderComponent,
+  PlhBottomNavigationBarComponent,
 };
 
 export const PLH_COMPONENTS = [
@@ -18,6 +20,7 @@ export const PLH_COMPONENTS = [
   PlhModuleListItemComponent,
   PlhCompletionModalComponent,
   PlhModuleDetailsHeaderComponent,
+  PlhBottomNavigationBarComponent,
 ];
 
 export const PLH_COMPONENT_MAPPING = {
@@ -26,6 +29,7 @@ export const PLH_COMPONENT_MAPPING = {
   plh_module_details_header: PlhModuleDetailsHeaderComponent,
   plh_module_list_item: PlhModuleListItemComponent,
   plh_completion_modal: PlhCompletionModalComponent,
+  plh_bottom_nav: PlhBottomNavigationBarComponent,
 };
 
 export type PLHComponentName = keyof typeof PLH_COMPONENT_MAPPING;

packages/components/plh/plh-kids-kw/components/bottom-navigation-bar/bottom-navigation-bar.component.html

@@ -0,0 +1,18 @@
+<div class="plh-bottom-nav-wrapper">
+  @for (button of params.buttonList; track button.name) {
+    <a
+      class="nav-item"
+      routerLinkActive="active-link"
+      [routerLink]="'template/' + button.target_template"
+      [attr.data-name]="button.name"
+      #rla="routerLinkActive"
+    >
+      <div class="icon">
+        <img [src]="(rla.isActive ? button.active_icon : button.icon) | plhAsset" />
+      </div>
+      <div class="label">
+        <p>{{ button.label }}</p>
+      </div>
+    </a>
+  }
+</div>

packages/components/plh/plh-kids-kw/components/bottom-navigation-bar/bottom-navigation-bar.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { IonicModule } from "@ionic/angular";
+
+import { BottomNavigationBarComponent } from "./bottom-navigation-bar.component";
+
+describe("BottomNavigationBarComponent", () => {
+  let component: BottomNavigationBarComponent;
+  let fixture: ComponentFixture<BottomNavigationBarComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [BottomNavigationBarComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BottomNavigationBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/components/plh/plh-kids-kw/components/bottom-navigation-bar/bottom-navigation-bar.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { TemplateBaseComponent } from "src/app/shared/components/template/components/base";
+import { getParamFromTemplateRow } from "src/app/shared/utils";
+
+interface IPlhBottomNavigationParams {
+  /** TEMPLATE PARAMETER: button_list. A list of nav button items */
+  buttonList: INavButton[];
+}
+interface INavButton {
+  icon: string | null;
+  label: string | null;
+  target_template: string | null;
+  name: string | null;
+  active_icon: string | null;
+}
+@Component({
+  selector: "plh-bottom-navigation-bar",
+  templateUrl: "./bottom-navigation-bar.component.html",
+  styleUrls: ["./bottom-navigation-bar.component.scss"],
+})
+export class PlhBottomNavigationBarComponent extends TemplateBaseComponent implements OnInit {
+  params: Partial<IPlhBottomNavigationParams> = {};
+
+  ngOnInit() {
+    this.getParams();
+  }
+
+  getParams() {
+    this.params.buttonList = getParamFromTemplateRow(this._row, "button_list", []);
+  }
+}

packages/components/plh/plh-kids-kw/plh-kids-kw-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PlhKidsKuwaitRoutingModule {}

packages/components/plh/plh-kids-kw/plh-kids-kw.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { PlhKidsKuwaitRoutingModule } from "./plh-kids-kw-routing.module";
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule, PlhKidsKuwaitRoutingModule],
+})
+export class PlhKidsKuwaitModule {}

src/theme/themes/plh_kids_kw/_overrides.scss

@@ -21,22 +21,12 @@ body[data-theme="plh_kids_kw"] {
     ion-button[disabled] {
       filter: none;
     }
-
-    .left {
-      text-align: unset !important;
-    }
     // Center align all button text by default
     .left.null ::ng-deep {
-      text-align: center;
       p {
         text-align: center !important;
       }
     }
-    .left ::ng-deep {
-      p {
-        text-align: left !important;
-      }
-    }
     .left.centre ::ng-deep {
       p {
         text-align: center !important;
@@ -975,6 +965,32 @@ body[data-theme="plh_kids_kw"] {
     }
   }
 
+  // bottom_nav
+  .plh-bottom-nav-wrapper {
+    @include mixins.flex-space-between;
+    flex-direction: row;
+    width: 100%;
+    padding: 12px 16px 8px 16px;
+    border-top: 1px solid #e7e8e9;
+    .nav-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-decoration: none;
+    }
+    .label p {
+      padding: 0;
+      margin: 0;
+      color: #6686b1;
+      font-weight: var(--font-weight-standard);
+    }
+    .active-link .label p {
+      font-weight: var(--font-weight-bold);
+      color: #0066a1;
+    }
+  }
+
   // Pop Up
   .popup-backdrop {
     &[data-variant~="plh_completion"] {