feat(docs): add version select (#1599)

docs/app/@theme/components/header/header.component.scss

@@ -41,6 +41,8 @@
 
     &.middle {
       flex: 1;
+      align-items: center;
+      margin: 0 -0.5rem;
     }
   }
 
@@ -53,10 +55,6 @@
       .menu-item {
         border: none;
 
-        &:first-child a {
-          padding-left: 0;
-        }
-
         a {
           color: $menu-item-fg;
           display: block;
@@ -100,6 +98,10 @@
     margin-left: auto;
   }
 
+  .version-select {
+    display: none;
+  }
+
   @include media-breakpoint-up(is) {
     .section {
       padding: 0.875rem 1.125rem;
@@ -118,6 +120,10 @@
         display: inline;
       }
     }
+
+    .version-select {
+      display: block;
+    }
   }
 
   @include media-breakpoint-up(md) {
@@ -184,6 +190,9 @@
     ngd-search {
       display: none;
     }
+    .version-select {
+      margin-left: 1rem;
+    }
 
     @include media-breakpoint-up(is) {
       ::ng-deep nb-menu .menu-items li:first-child {
@@ -195,6 +204,7 @@
       ngd-search {
         display: flex;
         align-items: center;
+        margin-left: auto;
       }
     }
 

docs/app/@theme/components/header/header.component.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit } from '@angular/core';
-import { NbMenuItem, NbSidebarService } from '@nebular/theme';
+import { ChangeDetectionStrategy, Component, HostBinding, Inject, Input, OnInit } from '@angular/core';
+import { NB_WINDOW, NbMenuItem, NbSidebarService } from '@nebular/theme';
 import { NgdVersionService } from '../../services';
 
 @Component({
@@ -18,6 +18,11 @@ import { NgdVersionService } from '../../services';
     <div class="section middle">
       <nb-menu [items]="mainMenu"></nb-menu>
       <ngd-search *ngIf="showSearch"></ngd-search>
+      <nb-select class="version-select" [selected]="currentVersion" (selectedChange)="redirectToVersion($event)">
+        <nb-option *ngFor="let version of versions" [value]="version">
+          {{ version }}
+        </nb-option>
+      </nb-select>
     </div>
     <div class="section right">
       <iframe class="stars"
@@ -34,6 +39,8 @@ export class NgdHeaderComponent implements OnInit {
   @Input() showSearch = true;
   @HostBinding('class.docs-page') @Input() isDocs = false;
 
+  private window: Window;
+  versions: string[];
   currentVersion: string;
 
   mainMenu: NbMenuItem[] = [
@@ -62,10 +69,13 @@ export class NgdHeaderComponent implements OnInit {
   @Input() sidebarTag: string;
 
   constructor(
-    versionService: NgdVersionService,
+    @Inject(NB_WINDOW) window,
+    private versionService: NgdVersionService,
     private sidebarService: NbSidebarService,
   ) {
+    this.window = window;
     this.currentVersion = versionService.getNebularVersion();
+    this.versions = versionService.getNebularVersions();
   }
 
   ngOnInit() {
@@ -80,4 +90,8 @@ export class NgdHeaderComponent implements OnInit {
   toggleSidebar() {
     this.sidebarService.toggle(false, this.sidebarTag);
   }
+
+  redirectToVersion(version: string): void {
+    this.window.location.href = this.versionService.getVersionPath(version);
+  }
 }

docs/app/@theme/components/search/search.component.scss

@@ -1,28 +1,17 @@
 @import '../../../@theme/styles/themes';
 
 @include nb-install-component() {
-
-  $bg: #f6f6f7;
-  $fg: #8994a3;
-
   position: relative;
 
   input {
-    border-radius: 4px;
-    background-color: $bg;
-    padding: 0.685rem 3rem;
-    border: none;
-
-    &::placeholder {
-      color: $fg;
-    }
+    padding-left: 3rem;
   }
 
   nb-icon {
-    color: $fg;
+    color: nb-theme(input-placeholder-text-color);
     position: absolute;
     top: 50%;
-    transform: translate(0, -50%);
+    transform: translateY(-50%);
     left: 1rem;
     z-index: 1;
     font-size: 1.25rem;

docs/app/@theme/components/search/search.component.ts

@@ -6,7 +6,7 @@ import { NB_WINDOW } from '@nebular/theme';
   styleUrls: ['./search.component.scss'],
   template: `
     <nb-icon icon="search-outline"></nb-icon>
-    <input type="text" id="doc-search" placeholder="Start typing...">
+    <input type="text" nbInput id="doc-search" placeholder="Start typing...">
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

docs/app/@theme/services/version.service.ts

@@ -3,7 +3,21 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class NgdVersionService {
 
+  versionsExceptCurrent = [ '3.6.0' ];
+
   getNebularVersion() {
     return require('../../../../package.json').version;
   }
+
+  getNebularVersions(): string[] {
+    return this.versionsExceptCurrent.concat(this.getNebularVersion());
+  }
+
+  getVersionPath(version: string): string {
+    if (version === this.getNebularVersion()) {
+      return '/nebular';
+    }
+
+    return `/nebular/${version}`;
+  }
 }

docs/app/@theme/styles/styles.scss

@@ -20,6 +20,9 @@
   @include nb-input-theme();
   @include nb-typography();
   @include nb-buttons-theme();
+  @include nb-select-theme();
+  @include nb-input-theme();
+  @include nb-overlay-theme();
 
   @include nbd-common();
 

docs/app/@theme/styles/themes.scss

@@ -39,6 +39,8 @@ $nb-themes: nb-register-theme((
   radius: 0.375rem,
   color-fg-highlight: #40dc7e,
 
+  select-min-width: 5rem,
+
   color-fg: white,
   color-fg-heading: #0d1c2e,
   color-fg-text: #919fb1,

docs/app/@theme/theme.module.ts

@@ -18,6 +18,8 @@ import {
   NbCheckboxModule,
   NbIconModule,
   NbButtonModule,
+  NbSelectModule,
+  NbInputModule,
 } from '@nebular/theme';
 
 import { NbEvaIconsModule } from '@nebular/eva-icons';
@@ -63,6 +65,8 @@ import {
     NbTabsetModule,
     NbIconModule,
     NbButtonModule,
+    NbSelectModule,
+    NbInputModule,
     NbEvaIconsModule,
     RouterModule,
   ],

docs/assets/ghspa.js

@@ -20,7 +20,7 @@
 
 ;(function(l, projectPages) {
 
-  const versions = [ '3.5.0', '3.6.0' ];
+  const versions = ['3.6.0'];
 
   var paths = l.pathname.split('/');
   var repo = projectPages ? '/' + paths[1] : '';