Added store breadcrumb

src/app/app.module.ts

@@ -17,6 +17,7 @@ import {NgxElectronModule} from 'ngx-electron';
 import {AboutComponent} from './about/about.component';
 import {CategoriesComponent} from './store/categories.component';
 import {AngularFireStorageModule} from 'angularfire2/storage';
+import {BreadcrumbService} from './store/breadcrumb.service';
 
 @NgModule({
   declarations: [
@@ -48,7 +49,7 @@ import {AngularFireStorageModule} from 'angularfire2/storage';
     ]),
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
   ],
-  providers: [],
+  providers: [BreadcrumbService],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/store/breadcrumb.service.ts

@@ -0,0 +1,22 @@
+import {Injectable} from '@angular/core';
+import {Router} from '../../../node_modules/@angular/router';
+
+@Injectable()
+export class BreadcrumbService {
+  breadcrumb: string[] = [];
+
+  constructor(private router: Router) {}
+
+  add(crumb: string) {
+    this.breadcrumb.push(crumb);
+  }
+
+  clear() {
+    this.breadcrumb = [];
+  }
+
+  navigate(i: number) {
+    this.breadcrumb.splice(i + 1, 9e9);
+    this.router.navigate(['/store', this.breadcrumb[i]]);
+  }
+}

src/app/store/categories.component.html

@@ -1,8 +1,14 @@
 <div class="container-fluid" style="background-color: #53709f;">
     <div class="container">
         <div class="row py-5">
+            <nav class="w-100 mx-3" aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item curs-pointer" [routerLink]="['/store']" (click)="breadcrumb.clear()">Store</li>
+                    <li *ngFor="let crumb of breadcrumb.breadcrumb; let i = index" class="breadcrumb-item curs-pointer" (click)="breadcrumb.navigate(i)">{{crumb}}</li>
+                </ol>
+            </nav>
             <ng-container *ngFor="let c of categories | async">
-                <mat-card class="m-3" [routerLink]="['/store', c.name]">
+                <mat-card class="m-3" (click)="navigate(c.name)">
                     <img *ngIf="c.ready" mat-card-image [src]="c.image | async" [alt]="c.name" style="width: 200px; height: 200px;">
                     <mat-divider class="custom-line"></mat-divider>
                     <mat-card-content>

src/app/store/categories.component.ts

@@ -2,7 +2,8 @@ import {Component} from '@angular/core';
 import {AngularFirestore} from 'angularfire2/firestore';
 import {AngularFireStorage} from 'angularfire2/storage';
 import {map} from 'rxjs/operators';
-import {ActivatedRoute} from '../../../node_modules/@angular/router';
+import {ActivatedRoute, Router} from '../../../node_modules/@angular/router';
+import {BreadcrumbService} from './breadcrumb.service';
 
 @Component({
   selector: 'store',
@@ -12,24 +13,39 @@ export class CategoriesComponent {
   category: string;
   categories;
 
-  constructor(private db: AngularFirestore, private storage: AngularFireStorage, private route: ActivatedRoute) {}
+  constructor(
+    private db: AngularFirestore,
+    private storage: AngularFireStorage,
+    private router: Router,
+    private route: ActivatedRoute,
+    private breadcrumb: BreadcrumbService
+  ) {}
 
   ngOnInit() {
     this.route.params.subscribe(params => {
       this.category = params['category'];
-    });
 
-    this.categories = this.db
-      .collection('categories')
-      .valueChanges()
-      .pipe(
-        map(rows =>
-          rows.filter((row: any) => !this.category || row.parent == this.category).map((row: any) => {
-            row.image = this.storage.ref(`${row.name.toLowerCase()}.jpg`).getDownloadURL();
-            row.image.subscribe(() => (row.ready = true));
-            return row;
-          })
-        )
-      );
+      if (!this.category) this.breadcrumb.clear();
+
+      this.categories = this.db
+        .collection('categories')
+        .valueChanges()
+        .pipe(
+          map(rows =>
+            rows
+              .filter((row: any) => (!this.category && !row.parent) || (this.category && row.parent == this.category))
+              .map((row: any) => {
+                row.image = this.storage.ref(`${row.name.toLowerCase()}.jpg`).getDownloadURL();
+                row.image.subscribe(() => (row.ready = true));
+                return row;
+              })
+          )
+        );
+    });
+  }
+
+  navigate(category: string) {
+    this.breadcrumb.add(category);
+    this.router.navigate(['/store', category]);
   }
 }

src/assets/css/base.scss

@@ -21,6 +21,10 @@ u:hover,
   text-decoration: none;
 }
 
+.curs-pointer {
+  cursor: pointer;
+}
+
 .dark-hover:hover {
   background-color: #f0f0f0;
 }
@@ -52,14 +56,15 @@ u:hover,
 .custom-line {
   padding-bottom: 1.5rem !important;
   position: relative !important;
-  margin-top: .75rem !important;
+  margin-top: 0.75rem !important;
 }
 .btn-primary {
   color: #fff;
   background-color: #3c3c3c;
   border-color: #5a5e63;
 }
-.btn-primary:hover, .btn-primary:active {
+.btn-primary:hover,
+.btn-primary:active {
   background-color: #53709f !important;
   border-color: #3e557a !important;
 }
@@ -69,4 +74,4 @@ mat-list-item:hover {
 }
 mat-form-field#totalCost .mat-form-field-label-wrapper {
   text-align: right;
-}
+}