diff --git a/apps/dafa-web/src/app/app-routing.module.ts b/apps/dafa-web/src/app/app-routing.module.ts index 324ee01..519d020 100644 --- a/apps/dafa-web/src/app/app-routing.module.ts +++ b/apps/dafa-web/src/app/app-routing.module.ts @@ -7,6 +7,11 @@ const routes: Routes = [ data: { title: '' }, loadChildren: () => import('./pages/start/start.module').then(m => m.StartModule), }, + { + path: 'administration', + data: { title: 'Administration' }, + loadChildren: () => import('./pages/administration/administration.module').then(m => m.AdministrationModule), + }, { path: 'mina-deltagare', data: { title: 'Mina deltagare' }, diff --git a/apps/dafa-web/src/app/app.component.html b/apps/dafa-web/src/app/app.component.html index 7f81aec..c88e4a1 100644 --- a/apps/dafa-web/src/app/app.component.html +++ b/apps/dafa-web/src/app/app.component.html @@ -7,6 +7,10 @@
+
diff --git a/apps/dafa-web/src/app/app.component.scss b/apps/dafa-web/src/app/app.component.scss index a91a8a6..24a7d95 100644 --- a/apps/dafa-web/src/app/app.component.scss +++ b/apps/dafa-web/src/app/app.component.scss @@ -32,4 +32,9 @@ padding: var(--digi--layout--gutter) $digi--layout--gutter--l $digi--layout--gutter--xxl; overflow-y: auto; } + + &__breadcrumbs { + display: block; + margin-bottom: var(--digi--layout--gutter); + } } diff --git a/apps/dafa-web/src/app/app.component.ts b/apps/dafa-web/src/app/app.component.ts index 99f1baa..ce294b2 100644 --- a/apps/dafa-web/src/app/app.component.ts +++ b/apps/dafa-web/src/app/app.component.ts @@ -1,6 +1,8 @@ +import { NavigationBreadcrumbsItem } from '@af/digi-ng/_navigation/navigation-breadcrumbs'; import { ChangeDetectionStrategy, Component } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; import { User } from '@dafa-models/user.model'; +import { BehaviorSubject } from 'rxjs'; import { filter } from 'rxjs/operators'; import { UnsubscribeDirective } from './directives/unsubscribe.directive'; @@ -13,22 +15,43 @@ import { UnsubscribeDirective } from './directives/unsubscribe.directive'; export class AppComponent extends UnsubscribeDirective { path = ''; user: User = { - id: 'Fake user', + id: 'fake-user', + name: 'Fake user', }; + private startBreadcrumb: NavigationBreadcrumbsItem = { + text: 'Start', + routerLink: '/', + }; + + private _breadcrumbsItems$ = new BehaviorSubject([this.startBreadcrumb]); + + get breadcrumbsItems(): NavigationBreadcrumbsItem[] { + return this._breadcrumbsItems$.getValue(); + } + constructor(private router: Router) { super(); super.unsubscribeOnDestroy( this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => { - const url = this.router.url; - this.path = url.split('/')[1].split('?')[0] || ''; + const paths = this.router.url.split('/'); + + this._breadcrumbsItems$.next([ + this.startBreadcrumb, + ...[...paths] + .filter(path => !!path) + .map(path => ({ + text: `${path.charAt(0).toUpperCase()}${path.slice(1)}`, + routerLink: paths.slice(0, paths.length - 1).join('/'), + })), + ]); + + this.path = paths[1].split('?')[0] || ''; }) ); } get appClass(): string { - let defaultClass = `dafa dafa--${this.path.length ? this.path : 'home'}`; - - return defaultClass; + return `dafa dafa--${this.path.length ? this.path : 'home'}`; } } diff --git a/apps/dafa-web/src/app/app.module.ts b/apps/dafa-web/src/app/app.module.ts index 595c09b..75dc690 100644 --- a/apps/dafa-web/src/app/app.module.ts +++ b/apps/dafa-web/src/app/app.module.ts @@ -1,4 +1,4 @@ -import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base'; +import { DigiNgNavigationBreadcrumbsModule } from '@af/digi-ng/_navigation/navigation-breadcrumbs'; import { HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @@ -17,7 +17,7 @@ import { SkipToContentModule } from './components/skip-to-content/skip-to-conten SkipToContentModule, NavigationModule, SidebarModule, - DigiNgTypographyBaseModule, + DigiNgNavigationBreadcrumbsModule, ], providers: [], bootstrap: [AppComponent], diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.html b/apps/dafa-web/src/app/components/navigation/navigation.component.html index ab2d5a6..45dfa3a 100644 --- a/apps/dafa-web/src/app/components/navigation/navigation.component.html +++ b/apps/dafa-web/src/app/components/navigation/navigation.component.html @@ -19,7 +19,7 @@ diff --git a/apps/dafa-web/src/app/components/sidebar/sidebar.component.html b/apps/dafa-web/src/app/components/sidebar/sidebar.component.html index 7c0cf89..5635fdd 100644 --- a/apps/dafa-web/src/app/components/sidebar/sidebar.component.html +++ b/apps/dafa-web/src/app/components/sidebar/sidebar.component.html @@ -12,56 +12,37 @@ +