refactor(portals): some improvements in nav-bar

src/app/xtream/navigation-bar/navigation-bar.component.html

@@ -28,11 +28,15 @@
 </div>
 <div id="sub-panel">
     <div class="breadcrumbs">
-        <span
-            *ngFor="let item of breadcrumbs"
+        <div
+            *ngFor="let item of breadcrumbs; let i = index"
             (click)="processBreadcrumbClick(item)"
-            >{{ item.title }}</span
         >
+            <span>{{ item.title }}</span>
+            <mat-icon *ngIf="i !== breadcrumbs.length - 1"
+                >chevron_right</mat-icon
+            >
+        </div>
     </div>
     <div class="search" *ngIf="searchVisible">
         <input
@@ -40,7 +44,7 @@
             placeholder="Search by name"
             type="search"
             [ngModel]="searchPhrase()"
-            (ngModelChange)="setSearchText($event)"
+            (ngModelChange)="searchPhraseUpdate.next($event)"
         />
     </div>
 </div>

src/app/xtream/navigation-bar/navigation-bar.component.scss

@@ -16,25 +16,29 @@
 #sub-panel {
     background: white;
     border-bottom: 1px solid #ccc;
-    padding: 0 10px 5px;
+    padding: 0 1em;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    height: 30px;
+    height: 40px;
 
     .breadcrumbs {
-        span {
-            cursor: pointer;
+        display: flex;
+
+        div {
+            display: flex;
+            align-items: center;
 
             &:not(:last-child)::after {
-                content: '>';
-                margin: 0 10px;
+                display: none;
+            }
+
+            span:hover {
+                text-decoration: underline;
+                cursor: pointer;
             }
         }
 
-        span:hover {
-            text-decoration: underline;
-        }
     }
 
     .search {

src/app/xtream/navigation-bar/navigation-bar.component.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
+import { Subject, debounceTime, distinctUntilChanged } from 'rxjs';
 import { Breadcrumb } from '../breadcrumb.interface';
 import { ContentTypeNavigationItem } from '../content-type-navigation-item.interface';
 import { ContentType } from '../content-type.enum';
@@ -30,14 +31,25 @@ export class NavigationBarComponent {
     @Input({ required: true }) contentType: ContentType;
     @Input() searchVisible = true;
     @Input() contentTypeNavigationItems: ContentTypeNavigationItem[];
+    @Input() clientSideSearch = true;
 
     @Output() contentTypeChanged = new EventEmitter<ContentType>();
     @Output() breadcrumbClicked = new EventEmitter<Breadcrumb>();
     @Output() favoritesClicked = new EventEmitter<void>();
+    @Output() searchTextChanged = new EventEmitter<string>();
 
     ContentTypeEnum = ContentType;
     portalStore = inject(PortalStore);
     searchPhrase = this.portalStore.searchPhrase;
+    searchPhraseUpdate = new Subject<string>();
+
+    constructor() {
+        this.searchPhraseUpdate
+            .pipe(debounceTime(600), distinctUntilChanged())
+            .subscribe((value) => {
+                this.setSearchText(value);
+            });
+    }
 
     processBreadcrumbClick(item: Breadcrumb) {
         this.setSearchText('');
@@ -45,7 +57,8 @@ export class NavigationBarComponent {
     }
 
     setSearchText(text: string) {
-        this.portalStore.setSearchPhrase(text);
+        if (this.clientSideSearch) this.portalStore.setSearchPhrase(text);
+        else this.searchTextChanged.emit(text);
     }
 
     changeContentType(type: ContentType) {