feat(): added dropdown for nestjs versions

content/fundamentals/execution-context.md

@@ -255,7 +255,7 @@ const roles = this.reflector.getAllAndMerge(Roles, [context.getHandler(), contex
 
 This would result in `roles` containing `['user', 'admin']`.
 
-For both of these merge methods, you pass the metadata key as the first argument, and an array of metadata target contexts (i.e., calls to the `getHandler()` and/or `getClass())` methods) as the second argument.
+For both of these merge methods, you pass the metadata key as the first argument, and an array of metadata target contexts (i.e., calls to the `getHandler()` and/or `getClass()` methods) as the second argument.
 
 #### Low-level approach
 

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { AppComponent } from './app.component';
 import { SocialWrapperComponent } from './common/social-wrapper/social-wrapper.component';
 import { FooterComponent } from './homepage/footer/footer.component';
 import { HeaderComponent } from './homepage/header/header.component';
+import { VersionsComponent } from './homepage/header/versions/versions.component';
 import { HomepageComponent } from './homepage/homepage.component';
 import { MenuItemComponent } from './homepage/menu/menu-item/menu-item.component';
 import { MenuComponent } from './homepage/menu/menu.component';
@@ -64,6 +65,7 @@ import { SharedModule } from './shared/shared.module';
     EnterpriseComponent,
     SocialWrapperComponent,
     NewsletterComponent,
+    VersionsComponent
   ],
   bootstrap: [AppComponent],
   providers: [],

src/app/homepage/header/header.component.html

@@ -82,5 +82,10 @@
         >
       </li>
     </ul>
+    <ul>
+      <li>
+        <app-versions></app-versions>
+      </li>
+    </ul>
   </div>
 </header>

src/app/homepage/header/versions/services/versions.service.ts

@@ -0,0 +1,22 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+export default class Versions {
+  version: String;
+}
+
+@Injectable({ providedIn: 'root' })
+export class VersionsService {
+  constructor(private readonly httpClient: HttpClient) {}
+
+  addToVersionLatest(): Observable<Versions[]> {
+    const urlVersionsLatest = 'https://registry.npmjs.org/@nestjs/core/latest';
+    return this.httpClient.get<Versions[]>(urlVersionsLatest).pipe(
+      catchError((err) => {
+        return throwError(err);
+      }),
+    );
+  }
+}

src/app/homepage/header/versions/versions.component.html

@@ -0,0 +1,32 @@
+<div 
+  class="dropdown dropdown-item"
+  [class.opened]="isOpen"
+>
+  <a 
+    href="#" 
+    class="drop-wrapper menu-wrapper" 
+    (click)="toggle()"
+  >
+    Versions
+    <svg
+      class="arrow-icon"
+      width="20"
+      height="20"
+      viewBox="0 0 1792 1792"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"
+      />
+    </svg>
+  </a>
+  <div class="dropdown-content"  [@openCloseAnimation]="isOpen">
+    <a *ngIf="linkLatest != true" class="dropdown-item" href="#">Latest(v{{ versions }})</a>
+    <div class="dropdown-divider"></div>  
+    <a href="https://docs.nestjs.com/v8/" target="_blank">8.x</a>
+    <a href="https://docs.nestjs.com/v7/" target="_blank">7.x</a>
+    <a href="https://docs.nestjs.com/v6/" target="_blank">6.x</a>
+    <a href="https://docs.nestjs.com/v5/" target="_blank">5.x</a>
+    <a href="https://docs.nestjs.com/v4/" target="_blank">4.x</a>
+  </div>
+</div>

src/app/homepage/header/versions/versions.component.scss

@@ -0,0 +1,74 @@
+@import '../../../../scss/variables.scss';
+@import '../../../../scss/utils.scss';
+
+.drop-wrapper {
+  padding: 16px;
+  border: none;
+  text-transform: uppercase;
+  color: $white-color;
+  font-size: 14px;
+  font-weight: 600;
+  &:hover {
+    color: $red-color;
+  }
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: $silver-color;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+  margin-left: 8px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.dropdown-content a {
+  color: $black-color;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  &:hover {
+    color: $red-color;
+  }
+}
+
+svg {
+  fill: $white-color;
+}
+
+.arrow-icon {
+  @extend .transition;
+  @include transform(rotate(90deg));
+
+  position: absolute;
+  top: 1px;
+  right: -10px;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.dropdown-item {
+  ul {
+    margin: 10px 0 15px;
+  }
+
+  &.opened {
+    .arrow-icon {
+      @include transform(rotate(-90deg));
+      fill: $red-color;
+    }
+  }
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+

src/app/homepage/header/versions/versions.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VersionsComponent } from './versions.component';
+
+describe('VersionsComponent', () => {
+  let component: VersionsComponent;
+  let fixture: ComponentFixture<VersionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ VersionsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VersionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/homepage/header/versions/versions.component.ts

@@ -0,0 +1,45 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { openCloseAnimation } from '../../../common';
+import { VersionsService } from './services/versions.service';
+
+export default class Versions {
+  version: String;
+}
+
+@Component({
+  selector: 'app-versions',
+  templateUrl: './versions.component.html',
+  styleUrls: ['./versions.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [openCloseAnimation],
+})
+export class VersionsComponent implements OnInit {
+  @Input() isOpen = false;
+  @Input() icon: string;
+
+  versions: Versions[];
+  linkLatest: boolean = false;
+
+  constructor(private readonly versionsService: VersionsService) {}
+
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+
+  ngOnInit(): void {
+    this.versionsService.addToVersionLatest().subscribe({
+      next: (data) => {
+        this.versions = data['version'];
+      },
+      error: (error) => {
+        this.linkLatest = true;
+        throw error;
+      },
+    });
+  }
+}