mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-31 09:37:15 +01:00
Added styles & design for breadcrumb component
This commit is contained in:
@@ -1,3 +1,5 @@
|
||||
<p>
|
||||
breadcrumbs works!
|
||||
</p>
|
||||
<div class="breadacrumb-grid pt-5">
|
||||
<div class="align-center" *ngFor="let breadcrumb of breadcrumbs">
|
||||
<span class="breadcrumb" routerLink="{{breadcrumb.path}}">{{breadcrumb.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
@import "../../../assets/scss/variables";
|
||||
|
||||
.breadacrumb-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
color: $color-active;
|
||||
outline: none;
|
||||
}
|
||||
@@ -1,4 +1,8 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { AppState } from 'src/app/app.state';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { Observable } from 'rxjs';
|
||||
import { Breadcrumb } from 'src/app/core/models/breadcrumb.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-breadcrumbs',
|
||||
@@ -7,7 +11,14 @@ import { Component, OnInit } from '@angular/core';
|
||||
})
|
||||
export class BreadcrumbsComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
breadcrumbsObs: Observable<Breadcrumb[]>;
|
||||
breadcrumbs: Breadcrumb[];
|
||||
constructor(private store: Store<AppState>) {
|
||||
this.breadcrumbsObs = store.select('breadcrumbs');
|
||||
this.breadcrumbsObs.subscribe(
|
||||
(data: Breadcrumb[]) => this.breadcrumbs = data
|
||||
);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
import { Breadcrumb } from '../models/breadcrumb.model';
|
||||
import { ADD_BREADCRUMB } from '../actions/breadcrumb.actions';
|
||||
|
||||
export function breadcrumbReducer(breadcrumbs: Breadcrumb[] = [], action: any) {
|
||||
const initialBreadcrumbs = [
|
||||
<Breadcrumb>{
|
||||
name: 'Artikelsuche',
|
||||
path: 'article-search'
|
||||
}
|
||||
];
|
||||
|
||||
export function breadcrumbReducer(breadcrumbs: Breadcrumb[] = initialBreadcrumbs, action: any) {
|
||||
switch (action.type) {
|
||||
case ADD_BREADCRUMB:
|
||||
return [...breadcrumbs, action.payload];
|
||||
|
||||
Reference in New Issue
Block a user