Mobile view: adding select element for navigation

src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.html

@@ -1,8 +1,45 @@
 <h2 class="comcol-browse-label h5">{{'browse.comcol.head' | translate}}</h2>
 <nav class="comcol-browse mb-4" aria-label="Browse Community or Collection" >
+  <div class="d-none d-sm-block">
+
     <div class="list-group list-group-horizontal">
       <a *ngIf="contentType=='collection'" [routerLink]="['/collections/' + id ]" class="list-group-item" routerLinkActive="active">{{'collection.page.browse.recent.head' | translate}}</a>
       <a *ngIf="contentType=='community'" [routerLink]="['/communities/' + id ]" class="list-group-item" routerLinkActive="active" >{{'community.all-lists.head' | translate}}</a>
       <a *ngFor="let config of types" class="list-group-item" [routerLink]="['/browse/' + config.id]" [queryParams]="{scope: id}" routerLinkActive="active">{{'browse.comcol.by.' + config.id | translate}}</a>
     </div>
+  </div>
+  <div class="d-block d-sm-none">
+
+    <select name="browse-type" class="form-control" aria-label="Browse Community or Collection" (change)="onSelectChange(($event.target))">
+
+      <option *ngIf="contentType=='collection'"
+        [value]="['/collections/' + id ]"
+        [routerLink]="['/collections/' + id ]"
+        routerLinkActive="active"
+        #rla="routerLinkActive"
+        [attr.selected]="rla.isActive === true ? 'selected' : null "  >
+        {{'collection.page.browse.recent.head' | translate}}
+      </option>
+
+      <option *ngIf="contentType=='community'"
+        [value]="['/communities/' + id ]"
+        [routerLink]="['/communities/' + id ]"
+        routerLinkActive="active"
+        #rla="routerLinkActive"
+        [attr.selected]="rla.isActive === true ? 'selected' : null "  >
+        {{'community.all-lists.head' | translate}}
+      </option>
+
+      <option *ngFor="let config of types"
+        [value]="['/browse/' + config.id]"
+        [routerLink]="['/browse/' + config.id]"
+        [queryParams]="{scope: id}"
+        [attr.data-params]="[id]"
+        routerLinkActive="active"
+        #rla="routerLinkActive"
+        [attr.selected]="rla.isActive === true ? 'selected' : null ">
+        {{'browse.comcol.by.' + config.id | translate}}
+      </option>
+    </select>
+  </div>
 </nav>

src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.ts

@@ -1,5 +1,6 @@
 import { Component, Inject, Input, OnInit } from '@angular/core';
 import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
 import { BrowseByTypeConfig } from '../../../config/browse-by-type-config.interface';
 
 /**
@@ -22,11 +23,23 @@ export class ComcolPageBrowseByComponent implements OnInit {
    */
   types: BrowseByTypeConfig[];
 
-  constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig) {
+  constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig, private router: Router) {
   }
 
   ngOnInit(): void {
     this.types = this.config.browseBy.types;
   }
-
+  onSelectChange(target) {
+    const optionIndex = target.selectedIndex;
+    const selectedOptionElement = target.options[optionIndex];
+    const paramsAttribute = selectedOptionElement.getAttribute('data-params');
+    console.log('change value ' + target.value + ' paramsAttribute ' + paramsAttribute);
+    if (paramsAttribute) {
+       /* console.log('Yes paramsAttribute ' + paramsAttribute);*/
+      this.router.navigate([target.value], { queryParams: { scope: paramsAttribute } });
+    } else {
+      /*  console.log('No paramsAttribute ');*/
+      this.router.navigate([target.value]);
+    }
+  }
 }