From 68866f47253f6f9d499084ff1d3c69ae77ff8fc4 Mon Sep 17 00:00:00 2001
From: Gabriel De Los Rios <gabriel.delosrios@tutamail.com>
Date: Sat, 24 Jan 2026 19:26:29 -0300
Subject: [PATCH] feat: navigation bar

---
 .../BottomNavigationBarOption.ts              |  8 ++++
 .../bottom-navigation-bar.html                |  8 ++++
 .../bottom-navigation-bar.scss                | 37 +++++++++++++++++++
 .../bottom-navigation-bar.spec.ts             | 23 ++++++++++++
 .../bottom-navigation-bar.ts                  | 17 +++++++++
 5 files changed, 93 insertions(+)
 create mode 100644 src/app/components/bottom-navigation-bar/BottomNavigationBarOption.ts
 create mode 100644 src/app/components/bottom-navigation-bar/bottom-navigation-bar.html
 create mode 100644 src/app/components/bottom-navigation-bar/bottom-navigation-bar.scss
 create mode 100644 src/app/components/bottom-navigation-bar/bottom-navigation-bar.spec.ts
 create mode 100644 src/app/components/bottom-navigation-bar/bottom-navigation-bar.ts

diff --git a/src/app/components/bottom-navigation-bar/BottomNavigationBarOption.ts b/src/app/components/bottom-navigation-bar/BottomNavigationBarOption.ts
new file mode 100644
index 0000000..d1558b1
--- /dev/null
+++ b/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 = '',
+  ) {}
+}
diff --git a/src/app/components/bottom-navigation-bar/bottom-navigation-bar.html b/src/app/components/bottom-navigation-bar/bottom-navigation-bar.html
new file mode 100644
index 0000000..fc4b462
--- /dev/null
+++ b/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>
diff --git a/src/app/components/bottom-navigation-bar/bottom-navigation-bar.scss b/src/app/components/bottom-navigation-bar/bottom-navigation-bar.scss
new file mode 100644
index 0000000..4d993a4
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
diff --git a/src/app/components/bottom-navigation-bar/bottom-navigation-bar.spec.ts b/src/app/components/bottom-navigation-bar/bottom-navigation-bar.spec.ts
new file mode 100644
index 0000000..1af4c6c
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/components/bottom-navigation-bar/bottom-navigation-bar.ts b/src/app/components/bottom-navigation-bar/bottom-navigation-bar.ts
new file mode 100644
index 0000000..4cb52f0
--- /dev/null
+++ b/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[]>([]);
+}
\ No newline at end of file