Improve follow component routing

client/src/app/+admin/follows/follows.component.html

@@ -1,15 +1,13 @@
 <div class="admin-sub-header">
   <div i18n class="form-sub-title">Manage follows</div>
 
-  <ngb-tabset #followsMenuTabs type="pills">
+  <div class="admin-sub-nav">
+    <a i18n routerLink="following-list" routerLinkActive="active">Following</a>
 
-    <ngb-tab *ngFor="let link of links">
+    <a i18n routerLink="following-add" routerLinkActive="active">Follow</a>
-      <ng-template ngbTabTitle>
-        <a class="tab-link" [routerLink]="link.path">{{ link.title }}</a>
-      </ng-template>
-    </ngb-tab>
 
-  </ngb-tabset>
+    <a i18n routerLink="followers-list" routerLinkActive="active">Followers</a>
+  </div>
 </div>
 
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

client/src/app/+admin/follows/follows.component.ts

@@ -1,62 +1,8 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'
+import { Component } from '@angular/core'
-import { NavigationEnd, Router } from '@angular/router'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { NgbTabset } from '@ng-bootstrap/ng-bootstrap'
 
 @Component({
   templateUrl: './follows.component.html',
   styleUrls: [ './follows.component.scss' ]
 })
-export class FollowsComponent implements OnInit, AfterViewInit {
+export class FollowsComponent {
-  @ViewChild('followsMenuTabs') followsMenuTabs: NgbTabset
-
-  links: { path: string, title: string }[] = []
-
-  constructor (
-    private i18n: I18n,
-    private router: Router
-  ) {
-    this.links = [
-      {
-        path: 'following-list',
-        title: this.i18n('Following')
-      },
-      {
-        path: 'following-add',
-        title: this.i18n('Follow')
-      },
-      {
-        path: 'followers-list',
-        title: this.i18n('Followers')
-      }
-    ]
-  }
-
-  ngOnInit () {
-    this.router.events.subscribe(
-      event => {
-        if (event instanceof NavigationEnd) {
-          this.updateActiveTab()
-        }
-      }
-    )
-  }
-
-  ngAfterViewInit () {
-    // Avoid issue with change detector
-    setTimeout(() => this.updateActiveTab())
-  }
-
-  private updateActiveTab () {
-    const url = window.location.pathname
-
-    for (let i = 0; i < this.links.length; i++) {
-      const path = this.links[i].path
-
-      if (url.endsWith(path) === true) {
-        this.followsMenuTabs.select(path)
-        return
-      }
-    }
-  }
 }

client/src/sass/application.scss

@@ -132,6 +132,20 @@ label {
   .form-sub-title {
     flex-grow: 1;
   }
+
+  .admin-sub-nav a {
+    @include disable-default-a-behaviour;
+
+    font-size: 16px;
+    color: #000;
+    padding: 5px 15px;
+    border-radius: 0.25rem;
+
+    &.active {
+      font-weight: $font-semibold;
+      background-color: #f0f0f0;
+    }
+  }
 }
 
 .form-sub-title {