feat: navigation bar

src/app/components/bottom-navigation-bar/BottomNavigationBarOption.ts

@@ -0,0 +1,8 @@
+export class BottomNavigationBarOption {
+  constructor(
+    public readonly label: string,
+    public readonly icon: string,
+    public readonly path: string,
+    public readonly fontSet: string = '',
+  ) {}
+}

src/app/components/bottom-navigation-bar/bottom-navigation-bar.html

@@ -0,0 +1,8 @@
+<mat-toolbar class="bottom-nav">
+  @for(option of options(); track option.path) {
+    <button [routerLink]="option.path" mat-button class="bottom-nav__item" routerLinkActive="bottom-nav__item--selected">
+      <mat-icon [fontSet]="option.fontSet">{{option.icon}}</mat-icon>
+     <span>{{option.label|translate|titlecase}}</span>
+    </button>
+  }
+</mat-toolbar>

src/app/components/bottom-navigation-bar/bottom-navigation-bar.scss

@@ -0,0 +1,37 @@
+.bottom-nav {
+  align-items: center;
+  background: var(--mat-sys-primary-container);
+  display: flex;
+  height: 56px;
+  justify-content: space-around;
+
+  &__item {
+    align-items: center;
+    background-color: unset;
+    border: none;
+    display: flex;
+    flex-direction: column;
+
+    & mat-icon {
+      color: rgba(#ffffff, 0.6);
+      height: 24px;
+      width: 24px;
+    }
+
+    & span {
+      color: rgba(#ffffff, 0.6);
+      font-size: 0.75rem;
+      line-height: 1;
+      margin-top: 4px;
+    }
+
+    &--selected {
+      & mat-icon {
+        color: #ffffff;
+      }
+      & span {
+        color: #ffffff;
+      }
+    }
+  }
+}

src/app/components/bottom-navigation-bar/bottom-navigation-bar.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BottomNavigationBar } from './bottom-navigation-bar';
+
+describe('BottomNavigationBar', () => {
+  let component: BottomNavigationBar;
+  let fixture: ComponentFixture<BottomNavigationBar>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BottomNavigationBar]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BottomNavigationBar);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/bottom-navigation-bar/bottom-navigation-bar.ts

@@ -0,0 +1,17 @@
+import { TitleCasePipe } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { TranslatePipe } from '@ngx-translate/core';
+import { BottomNavigationBarOption } from './BottomNavigationBarOption';
+import { RouterLink, RouterLinkActive } from "@angular/router";
+
+@Component({
+  selector: 'app-bottom-navigation-bar',
+  imports: [MatToolbarModule, MatIconModule, TranslatePipe, TitleCasePipe, RouterLink, RouterLinkActive],
+  templateUrl: './bottom-navigation-bar.html',
+  styleUrl: './bottom-navigation-bar.scss',
+})
+export class BottomNavigationBar {
+  readonly options = input<BottomNavigationBarOption[]>([]);
+}