feat: demo version additions

src/app/@theme/components/header/header.component.html

@@ -5,19 +5,37 @@
     </a>
     <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
   </div>
-  <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
-    <nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
+  <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary" class="theme-select">
+    <nb-option *ngFor="let theme of themes" [value]="theme.value">{{ theme.name }}</nb-option>
   </nb-select>
 </div>
 
 <div class="header-container">
   <nb-actions size="small">
-
-    <nb-action class="control-item">
-      <nb-search type="rotate-layout"></nb-search>
+    <nb-action class="control-item github-stars">
+      <span class="subtitle text">Support us: </span>
+      <iframe src="https://ghbtns.com/github-btn.html?user=akveo&repo=ngx-admin&type=star&count=true"
+              frameborder="0"
+              scrolling="0"
+              width="170px"
+              height="20px">
+      </iframe>
     </nb-action>
-    <nb-action class="control-item" icon="email-outline"></nb-action>
-    <nb-action class="control-item" icon="bell-outline"></nb-action>
+    <nb-action class="control-item downloads-count">
+      <nb-icon icon="download"></nb-icon>
+      <span class="subtitle number">358.000</span>
+    </nb-action>
+    <nb-action class="control-item contact-us">
+      <a nbButton ghost href="mailto:contact@akveo.com" (click)="trackEmailClick()">
+        <nb-icon icon="email-outline" pack="eva"></nb-icon>
+        <span>contact@akveo.com</span>
+      </a>
+    </nb-action>
+    <nb-action class="control-item search">
+      <nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
+    </nb-action>
+    <nb-action class="control-item email" icon="email-outline"></nb-action>
+    <nb-action class="control-item notifications" icon="bell-outline"></nb-action>
     <nb-action class="user-action" *nbIsGranted="['view', 'user']" >
       <nb-user [nbContextMenu]="userMenu"
                [onlyPicture]="userPictureOnly"

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

@@ -23,10 +23,30 @@
     cursor: pointer;
   }
 
+  .subtitle {
+    font-family: nb-theme(text-subtitle-font-family);
+    font-size: nb-theme(text-subtitle-font-size);
+    font-weight: nb-theme(text-subtitle-font-weight);
+    line-height: nb-theme(text-subtitle-line-height);
+  }
+
+  .downloads-count .number {
+    @include nb-ltr(margin-left, 0.5rem);
+    @include nb-rtl(margin-right, 0.5rem);
+  }
+
   ::ng-deep nb-search button {
     padding: 0!important;
   }
 
+  .contact-us {
+    padding: 0;
+
+    nb-icon {
+      font-size: 1.25rem;
+    }
+  }
+
   .header-container {
     display: flex;
     align-items: center;
@@ -52,18 +72,55 @@
     }
   }
 
-  @include media-breakpoint-down(sm) {
-    .control-item {
+  .github-stars {
+    width: 245px;
+    display: flex;
+
+    iframe {
+      width: 100px;
+      @include nb-ltr(margin-left, 1rem);
+      @include nb-rtl(margin-right, 1rem);
+    }
+  }
+
+  @include media-breakpoint-down(xl) {
+    .control-item.search,
+    .control-item.notifications,
+    .control-item.email,
+    .control-item.github-stars .text {
       display: none;
     }
-    .user-action {
-      border: none;
-      padding: 0;
+
+    .control-item.github-stars {
+      width: auto;
+
+      iframe {
+        margin: 0;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    .downloads-count {
+      display: none;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    .theme-select {
+      display: none;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    .contact-us {
+      display: none;
     }
   }
 
   @include media-breakpoint-down(is) {
-    nb-select {
+    .github-stars,
+    .user-action {
       display: none;
     }
   }

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

@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
 
 import { UserData } from '../../../@core/data/users';
-import { LayoutService } from '../../../@core/utils';
+import { AnalyticsService, LayoutService } from '../../../@core/utils';
 import { map, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
@@ -45,8 +45,9 @@ export class HeaderComponent implements OnInit, OnDestroy {
               private themeService: NbThemeService,
               private userService: UserData,
               private layoutService: LayoutService,
-              private breakpointService: NbMediaBreakpointsService) {
-  }
+              private breakpointService: NbMediaBreakpointsService,
+              private analytics: AnalyticsService,
+  ) {}
 
   ngOnInit() {
     this.currentTheme = this.themeService.currentTheme;
@@ -91,4 +92,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this.menuService.navigateHome();
     return false;
   }
+
+  startSearch() {
+    this.analytics.trackEvent('startSearch');
+  }
+
+  trackEmailClick() {
+    this.analytics.trackEvent('clickContactEmail', 'click');
+  }
 }