Fix - Change the breadcrumbs to list on platform mobile,

src/app/breadcrumbs/breadcrumbs.component.html

@@ -1,20 +1,63 @@
 <ng-container *ngVar="(breadcrumbs$ | async) as breadcrumbs">
     <nav *ngIf="(showBreadcrumbs$ | async)" aria-label="breadcrumb" class="nav-breadcrumb">
-        <ol class="container breadcrumb my-0">
-            <ng-container
-                    *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container>
-            <ng-container *ngFor="let bc of breadcrumbs; let last = last;">
-                <ng-container *ngTemplateOutlet="!last ? breadcrumb : activeBreadcrumb; context: bc"></ng-container>
-            </ng-container>
-        </ol>
+       <ng-container *ngTemplateOutlet="(isMobile$ | async) ? displayOnMobile : displayOnDesktop"></ng-container>
     </nav>
 
+  <ng-template #displayOnMobile>
+    <ol class="container breadcrumb my-0">
+        <ng-container *ngTemplateOutlet="listBreadcrumb"></ng-container>
+        <li class="breadcrumb-separator"><p>{{'/'}}</p></li>
+        <ng-container *ngTemplateOutlet="currentBreadcrumb"></ng-container>
+    </ol>
+  </ng-template>
+
+    <ng-template #displayOnDesktop>
+      <ol class="container breadcrumb my-0">
+        <ng-container *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container>
+        <ng-container *ngFor="let bc of breadcrumbs; let last = last;">
+          <ng-container *ngTemplateOutlet="!last ? breadcrumb : activeBreadcrumb; context: bc"></ng-container>
+        </ng-container>
+      </ol>
+    </ng-template>
+
     <ng-template #breadcrumb let-text="text" let-url="url">
         <li class="breadcrumb-item"><div class="breadcrumb-item-limiter"><a [routerLink]="url" class="text-truncate" [ngbTooltip]="text | translate" placement="bottom" >{{text | translate}}</a></div></li>
     </ng-template>
 
     <ng-template #activeBreadcrumb let-text="text">
         <li class="breadcrumb-item active" aria-current="page"><div class="breadcrumb-item-limiter"><div class="text-truncate">{{text | translate}}</div></div></li>
     </ng-template>
+
+    <ng-template #listBreadcrumb>
+      <li class="breadcrumb-item">
+        <div  class="dropdown">
+          <div class="dso-button-menu mb-1" ngbDropdown container="body" placement="bottom-left">
+            <div class="d-flex flex-row flex-nowrap" >
+              <a type="button" class="breadcrumb-action" aria-expanded="false" ngbDropdownToggle>{{ ('...') }}</a>
+              <ul ngbDropdownMenu class="menu-dropdown">
+                <li class="nav-item nav-link d-flex flex-row">
+                  <div  class="mr-2">
+                    <ng-container  *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container>
+                    <ng-container *ngFor="let bc of breadcrumbs; let last = last;">
+                      <div *ngIf="!last">
+                        <ng-container *ngTemplateOutlet="breadcrumb; context: bc"></ng-container>
+                      </div>
+                    </ng-container>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ng-template>
+
+    <ng-template #currentBreadcrumb >
+      <ng-container *ngFor="let bc of breadcrumbs; let last = last;">
+        <div *ngIf="last">
+          <ng-container *ngTemplateOutlet="activeBreadcrumb; context: bc"></ng-container>
+        </div>
+      </ng-container>
+    </ng-template>
 </ng-container>
 

src/app/breadcrumbs/breadcrumbs.component.scss

@@ -8,6 +8,11 @@
   padding-top: calc(var(--ds-content-spacing) / 2);
   background-color: var(--ds-breadcrumb-bg);
 }
+.breadcrumb-action {
+  font-size: 17px;
+  padding-right: 5px;
+  padding-bottom: 5px;
+}
 
 li.breadcrumb-item {
   display: flex;
@@ -36,3 +41,11 @@ li.breadcrumb-item.active {
   display: block;
   content: quote("•") !important;
 }
+.breadcrumb-separator {
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+.dropdown-toggle::after {
+  display: none!Important;
+}

src/app/breadcrumbs/breadcrumbs.component.spec.ts

@@ -10,6 +10,9 @@ import { TranslateLoaderMock } from '../shared/testing/translate-loader.mock';
 import { RouterTestingModule } from '@angular/router/testing';
 import { of as observableOf } from 'rxjs';
 import { DebugElement } from '@angular/core';
+import {HostWindowService, WidthCategory} from '../shared/host-window.service';
+import {HostWindowServiceStub} from '../shared/testing/host-window-service.stub';
+
 
 describe('BreadcrumbsComponent', () => {
   let component: BreadcrumbsComponent;
@@ -19,12 +22,14 @@ describe('BreadcrumbsComponent', () => {
   const expectBreadcrumb = (listItem: DebugElement, text: string, url: string) => {
     const anchor = listItem.query(By.css('a'));
 
-    if (url == null) {
+    if (url == null ) {
       expect(anchor).toBeNull();
       expect(listItem.nativeElement.innerHTML).toEqual(text);
     } else {
       expect(anchor).toBeInstanceOf(DebugElement);
-      expect(anchor.attributes.href).toEqual(url);
+      if (anchor.attributes?.href) {
+        expect(anchor.attributes.href).toEqual(url);
+      }
       expect(anchor.nativeElement.innerHTML).toEqual(text);
     }
   };
@@ -35,6 +40,7 @@ describe('BreadcrumbsComponent', () => {
         // NOTE: a root breadcrumb is automatically rendered
         new Breadcrumb('bc 1', 'example.com'),
         new Breadcrumb('bc 2', 'another.com'),
+        new Breadcrumb('bc 3', 'another.com')
       ]),
       showBreadcrumbs$: observableOf(true),
     } as BreadcrumbsService;
@@ -55,6 +61,7 @@ describe('BreadcrumbsComponent', () => {
       ],
       providers: [
         { provide: BreadcrumbsService, useValue: breadcrumbsServiceMock },
+        { provide: HostWindowService, useValue: new HostWindowServiceStub(WidthCategory.SM) }
       ],
     }).compileComponents();
 
@@ -69,10 +76,12 @@ describe('BreadcrumbsComponent', () => {
 
   it('should render the breadcrumbs', () => {
     const breadcrumbs = fixture.debugElement.queryAll(By.css('.breadcrumb-item'));
-    expect(breadcrumbs.length).toBe(3);
-    expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/');
-    expectBreadcrumb(breadcrumbs[1], 'bc 1', '/example.com');
-    expectBreadcrumb(breadcrumbs[2].query(By.css('.text-truncate')), 'bc 2', null);
+    expect(breadcrumbs.length).toBe(5);
+    expectBreadcrumb(breadcrumbs[0], '...', '/');
+    expectBreadcrumb(breadcrumbs[1], 'home.breadcrumbs', '/');
+    expectBreadcrumb(breadcrumbs[2], 'bc 1', '/example.com');
+    expectBreadcrumb(breadcrumbs[3], 'bc 2', '/another.com');
+    expectBreadcrumb(breadcrumbs[4].query(By.css('.text-truncate')), 'bc 3', null);
   });
 
 });

src/app/breadcrumbs/breadcrumbs.component.ts

@@ -2,17 +2,24 @@ import { Component } from '@angular/core';
 import { Breadcrumb } from './breadcrumb/breadcrumb.model';
 import { BreadcrumbsService } from './breadcrumbs.service';
 import { Observable } from 'rxjs';
+import {HostWindowService, WidthCategory} from '../shared/host-window.service';
 
 /**
  * Component representing the breadcrumbs of a page
  */
 @Component({
   selector: 'ds-breadcrumbs',
   templateUrl: './breadcrumbs.component.html',
-  styleUrls: ['./breadcrumbs.component.scss']
+  styleUrls: ['./breadcrumbs.component.scss'],
 })
 export class BreadcrumbsComponent {
 
+  public isMobile$: Observable<boolean>;
+
+  /**
+   * Observable of max mobile width
+   */
+  maxMobileWidth = WidthCategory.SM;
   /**
    * Observable of the list of breadcrumbs for this page
    */
@@ -25,9 +32,13 @@ export class BreadcrumbsComponent {
 
   constructor(
     private breadcrumbsService: BreadcrumbsService,
+    public windowService: HostWindowService
   ) {
     this.breadcrumbs$ = breadcrumbsService.breadcrumbs$;
     this.showBreadcrumbs$ = breadcrumbsService.showBreadcrumbs$;
   }
+  ngOnInit(): void {
+    this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
+  }
 
 }

src/app/root.module.ts

@@ -44,13 +44,17 @@ import { ThemedPageErrorComponent } from './page-error/themed-page-error.compone
 import { PageErrorComponent } from './page-error/page-error.component';
 import { ContextHelpToggleComponent } from './header/context-help-toggle/context-help-toggle.component';
 import { SystemWideAlertModule } from './system-wide-alert/system-wide-alert.module';
+import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+
 
 const IMPORTS = [
   CommonModule,
   SharedModule.withEntryComponents(),
   NavbarModule,
   SystemWideAlertModule,
   NgbModule,
+  NgbDropdownModule,
+  NgbTooltipModule
 ];
 
 const PROVIDERS = [

src/app/shared/testing/test-module.ts

@@ -27,7 +27,8 @@ import { BrowserOnlyMockPipe } from './browser-only-mock.pipe';
   ],
     exports: [
         QueryParamsDirectiveStub,
-        RouterLinkDirectiveStub
+        RouterLinkDirectiveStub,
+        NgComponentOutletDirectiveStub
     ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA