Fix #2680 breadcrumbs collapse in mobile mode

src/app/breadcrumbs/breadcrumbs.component.html

@@ -1,22 +1,85 @@
 <ng-container *ngVar="(breadcrumbs$ | async) as breadcrumbs">
-  @if ((showBreadcrumbs$ | async)) {
+  <ng-container *ngIf="showBreadcrumbs$ | async">
     <nav 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>
-        @for (bc of breadcrumbs; track bc; let last = $last) {
-          <ng-container *ngTemplateOutlet="!last ? breadcrumb : activeBreadcrumb; context: bc"></ng-container>
-        }
-      </ol>
+      <ng-container *ngTemplateOutlet="(isMobile$ | async) ? displayOnMobile : displayOnDesktop"></ng-container>
     </nav>
-  }
+  </ng-container>
+
+  <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" role="link" tabindex="0">{{text | translate}}</a></div></li>
+    <li class="breadcrumb-item">
+      <div class="breadcrumb-item-limiter">
+        <a [routerLink]="url"
+           class="text-truncate"
+           [ngbTooltip]="text | translate"
+           placement="bottom"
+           role="link"
+           tabindex="0">
+          {{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>
+    <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-container>
 
+  <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">
+                    <ng-container *ngIf="!last">
+                      <div>
+                        <ng-container *ngTemplateOutlet="breadcrumb; context: bc"></ng-container>
+                      </div>
+                    </ng-container>
+                  </ng-container>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ng-template>
+
+  <ng-template #currentBreadcrumb>
+    <ng-container *ngFor="let bc of breadcrumbs; let last = last">
+      <ng-container *ngIf="last">
+        <div>
+          <ng-container *ngTemplateOutlet="activeBreadcrumb; context: bc"></ng-container>
+        </div>
+      </ng-container>
+    </ng-container>
+  </ng-template>
+</ng-container>

src/app/breadcrumbs/breadcrumbs.component.scss

@@ -38,3 +38,18 @@ li.breadcrumb-item.active {
   display: block;
   content: quote("•") !important;
 }
+
+.breadcrumb-action {
+  font-size: 17px;
+  padding-right: 5px;
+  padding-bottom: 5px;
+}
+
+.breadcrumb-separator {
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+.dropdown-toggle::after {
+  display: none !important;
+}

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

@@ -14,6 +14,7 @@ import {
 } from '@ngx-translate/core';
 import { of } from 'rxjs';
 
+import { HostWindowService } from '../shared/host-window.service';
 import { VarDirective } from '../shared/utils/var.directive';
 import { BreadcrumbsComponent } from './breadcrumbs.component';
 import { BreadcrumbsService } from './breadcrumbs.service';
@@ -46,6 +47,10 @@ describe('BreadcrumbsComponent', () => {
       showBreadcrumbs$: of(true),
     } as BreadcrumbsService;
 
+    const hostWindowServiceMock = {
+      isUpTo: (width: number) => true,
+    };
+
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule.withRoutes([]),
@@ -60,8 +65,11 @@ describe('BreadcrumbsComponent', () => {
       ],
       providers: [
         { provide: BreadcrumbsService, useValue: breadcrumbsServiceMock },
+        { provide: HostWindowService, useValue: hostWindowServiceMock },
       ],
-    }).compileComponents();
+    });
+
+    TestBed.compileComponents();
 
     fixture = TestBed.createComponent(BreadcrumbsComponent);
     component = fixture.componentInstance;

src/app/breadcrumbs/breadcrumbs.component.ts

@@ -2,13 +2,20 @@ import {
   AsyncPipe,
   NgTemplateOutlet,
 } from '@angular/common';
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { Breadcrumb } from '@dspace/core/breadcrumbs/models/breadcrumb.model';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 
+import {
+  HostWindowService,
+  WidthCategory,
+} from '../shared/host-window.service';
 import { VarDirective } from '../shared/utils/var.directive';
 import { BreadcrumbsService } from './breadcrumbs.service';
 
@@ -28,7 +35,14 @@ import { BreadcrumbsService } from './breadcrumbs.service';
     VarDirective,
   ],
 })
-export class BreadcrumbsComponent {
+export class BreadcrumbsComponent implements OnInit {
+
+  public isMobile$: Observable<boolean>;
+
+  /**
+   * Observable of max mobile width
+  */
+  maxMobileWidth = WidthCategory.SM;
 
   /**
    * Observable of the list of breadcrumbs for this page
@@ -42,9 +56,14 @@ 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

@@ -1,6 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+  NgbDropdownModule,
+  NgbModule,
+  NgbTooltipModule,
+} from '@ng-bootstrap/ng-bootstrap';
 
 import { EAGER_THEME_COMPONENTS } from '../themes/eager-themes-components';
 import { AdminSidebarComponent } from './admin/admin-sidebar/admin-sidebar.component';
@@ -33,6 +37,8 @@ import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
 const IMPORTS = [
   CommonModule,
   NgbModule,
+  NgbDropdownModule,
+  NgbTooltipModule,
 ];
 
 const PROVIDERS = [

src/app/shared/host-window.service.ts

@@ -150,3 +150,5 @@ export class HostWindowService {
     );
   }
 }
+export { WidthCategory };
+

src/app/shared/test-module.ts

@@ -29,6 +29,7 @@ import { MySimpleItemActionComponent } from '../item-page/edit-item-page/simple-
     QueryParamsDirectiveStub,
     RouterLinkDirectiveStub,
     BrowserOnlyMockPipe,
+    NgComponentOutletDirectiveStub,
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA,