Featured assets and asset groups

frontend/src/app/components/assets/assets-nav/assets-nav.component.html

@@ -0,0 +1,31 @@
+<div class="container-xl">
+  <div class="title-asset">
+    <h1 i18n="Assets page header">Assets</h1>
+  </div>
+
+  <ul class="nav nav-pills">
+    <li class="nav-item">
+      <a class="nav-link" [routerLink]="['/assets/featured']" routerLinkActive="active">Featured</a>
+      
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" [routerLink]="['/assets/all']" routerLinkActive="active">All</a>
+    </li>
+  </ul>
+
+  <form [formGroup]="searchForm" class="form-inline">
+    <div class="input-group mb-2">
+      <input style="width: 350px;" formControlName="searchText" type="text" class="form-control" i18n-placeholder="Search Assets Placeholder Text" placeholder="Search asset">
+      <div class="input-group-append">
+        <button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off" i18n="Search Clear Button">Clear</button>
+      </div>
+    </div>
+  </form>
+
+  <div class="clearfix"></div>
+
+  <router-outlet></router-outlet>
+
+</div>
+
+<br>

frontend/src/app/components/assets/assets-nav/assets-nav.component.scss

@@ -0,0 +1,9 @@
+ul {
+  margin-bottom: 20px;
+  float: left;
+
+}
+
+form {
+  float: right;
+}

frontend/src/app/components/assets/assets-nav/assets-nav.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-assets-nav',
+  templateUrl: './assets-nav.component.html',
+  styleUrls: ['./assets-nav.component.scss']
+})
+export class AssetsNavComponent implements OnInit {
+  activeTab = 0;
+  searchForm: FormGroup;
+
+  constructor(
+    private formBuilder: FormBuilder,
+  ) { }
+
+  ngOnInit(): void {
+    this.searchForm = this.formBuilder.group({
+      searchText: [{ value: '', disabled: true }, Validators.required]
+    });
+  }
+
+}