chore(docs): Update ngqp-demo styling a bit

Author: Airblader

projects/ngqp-demo/src/app/app.component.html

@@ -1,14 +1,27 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <img src="assets/logo.svg" height="48" width="auto" />
-    <a class="navbar-brand" routerLink="/">@ngqp</a>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <a class="navbar-brand" routerLink="/">
+        <div class="d-inline-block align-middle  logo-container">
+            <img src="assets/logo.svg" height="48" width="auto" />
+        </div>
+        @ngqp
+    </a>
     <button class="navbar-toggler" type="button" (click)="isNavbarExpanded = !isNavbarExpanded">
         <span class="navbar-toggler-icon"></span>
     </button>
 
     <div class="navbar-collapse" [class.collapse]="!isNavbarExpanded">
         <ul class="navbar-nav mr-auto">
             <li class="nav-item active">
-                <a class="nav-link" href="/playground">Playground</a>
+                <a class="nav-link" routerLink="/playground">Playground</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" routerLink="/">Getting started</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" routerLink="/">Tutorial</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" routerLink="/">API Documentation</a>
             </li>
         </ul>
     </div>

projects/ngqp-demo/src/app/app.component.ts

@@ -3,6 +3,13 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
+    styles: [`
+        .logo-container {
+            background-color: white;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+    `],
 })
 export class AppComponent {