feat(redesign): new design for documentation page

.angular-cli.json

@@ -22,7 +22,7 @@
       "serviceWorker": false,
       "styles": [
         "../../src/datepicker/bs-datepicker.scss",
-        "assets/css/style.css",
+        "assets/css/style.scss",
         "assets/css/prettify-angulario.css"
       ],
       "scripts": [],

demo/e2e/tests/leftPanelTests.po.ts

@@ -1,6 +1,6 @@
 import { $, browser } from 'protractor';
 
-const menuLeftMaxi = $('.main-menu-container');
+const menuLeftMaxi = $('.sidenav-content');
 const menuLeftMini = $('#mobile-main-menu');
 
 const leftPanelTests = {

demo/src/app/app.component.html

@@ -1,14 +1,14 @@
 <top-menu></top-menu>
-<main-menu></main-menu>
+<main class="main">
+  <sidebar class="sidebar"></sidebar>
 
-<div id="main">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-10 col-xs-12 col-md-offset-1 push-md-1">
-        <router-outlet></router-outlet>
-      </div>
+  <section class="main-container">
+    <div class="content">
+      <router-outlet></router-outlet>
     </div>
-  </div>
-  <app-footer></app-footer>
-</div>
+    <app-footer></app-footer>
+  </section>
 
+  <add-nav class="add-nav"></add-nav>
+
+</main>

demo/src/app/app.module.ts

@@ -12,8 +12,9 @@ import { NgApiDocModule } from './api-docs/index';
 import { AppComponent } from './app.component';
 import { routes } from './app.routing';
 import { AppFooterComponent } from './common/app-footer/app-footer.component';
-import { MainMenuComponent } from './common/main-menu/main-menu.component';
-import { SearchFilterPipe } from './common/main-menu/search-filter.pipe';
+import { SidebarComponent } from './common/sidebar/sidebar.component';
+import { AddNavComponent } from './common/add-nav/add-nav.component';
+import { SearchFilterPipe } from './common/sidebar/search-filter.pipe';
 import { TopMenuComponent } from './common/top-menu/top-menu.component';
 import { GettingStartedComponent } from './getting-started/getting-started.component';
 import { ThemeStorage } from './theme/theme-storage';
@@ -24,7 +25,8 @@ import { StyleManager } from './theme/style-manager';
     AppComponent,
     GettingStartedComponent,
     TopMenuComponent,
-    MainMenuComponent,
+    SidebarComponent,
+    AddNavComponent,
     SearchFilterPipe,
     AppFooterComponent
   ],

demo/src/app/common/add-nav/add-nav.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { routes } from '../../app.routing';
+import { StyleManager } from '../../theme/style-manager';
+import { ThemeStorage } from '../../theme/theme-storage';
+
+@Component({
+  selector: 'add-nav',
+  templateUrl: './add-nav.component.html'
+})
+export class AddNavComponent {
+  public constructor() {}
+}

demo/src/app/common/app-footer/app-footer.component.html

@@ -1,8 +1,6 @@
-<footer class="app-footer col-md-12">
-  <div class="container">
-    <p>Designed and built by the <a href="https://github.com/orgs/valor-software/teams/ng-team" target="_blank" rel="noopener">ng-team</a>
-      with the help of our <a href="https://github.com/valor-software/ngx-bootstrap/graphs/contributors" target="_blank" rel="noopener">contributors.</a></p>
-    <p>Code licensed under <a href="https://github.com/valor-software/ngx-bootstrap/blob/development/LICENSE" target="_blank" rel="noopener">MIT license conditions</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="noopener">CC BY 3.0</a></p>
-    <p>Design and content of the documentation site heavily inspired by the <a  target="_blank" rel="noopener" href="http://v4-alpha.getbootstrap.com/">original bootstrap.</a> documentation</p>
-  </div>
+<footer class="app-footer">
+  <p>Designed and built by the <a href="https://github.com/orgs/valor-software/teams/ng-team" target="_blank" rel="noopener">ng-team</a>
+    with the help of our <a href="https://github.com/valor-software/ngx-bootstrap/graphs/contributors" target="_blank" rel="noopener">contributors.</a></p>
+  <p>Code licensed under <a href="https://github.com/valor-software/ngx-bootstrap/blob/development/LICENSE" target="_blank" rel="noopener">MIT license conditions</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="noopener">CC BY 3.0</a></p>
+  <p>Design and content of the documentation site heavily inspired by the <a  target="_blank" rel="noopener" href="http://v4-alpha.getbootstrap.com/">original bootstrap</a> documentation</p>
 </footer>

demo/src/app/common/sidebar/sidebar.component.html

@@ -0,0 +1,32 @@
+<form class="sidebar-search">
+  <input type="text"
+         aria-label="Search in docs" name="search"
+         placeholder="Search..." [(ngModel)]="search.text"/>
+
+  <button id="mobile-main-menu" (click)="toggle()">
+    <img src="assets/images/icons/menu-left.svg" alt="left menu">
+  </button>
+</form>
+<div class="mobile-menu">
+  <div class="bootstrap-version">
+    <button class="btn" [class.selected]="isBs3" (click)="installTheme('bs3')">Bootstrap 3</button>
+    <button class="btn" [class.selected]="!isBs3" (click)="installTheme('bs4')">Bootstrap 4</button>
+  </div>
+  <div class="sidebar-content" *ngIf="routes && routes.length">
+    <ul class="sidebar-list">
+      <li [routerLinkActive]="['active']"
+          [routerLinkActiveOptions]="{exact: true}">
+        <a [routerLink]="[routes[0].path]">{{routes[0].data}}</a>
+      </li>
+    </ul>
+
+    <h4 class="sidebar-title">Components</h4>
+    <ul class="sidebar-list">
+      <li *ngFor="let route of routes | slice:1 | SearchFilter:search.text"
+          [routerLinkActive]="['active']"
+          [routerLinkActiveOptions]="{exact: true}">
+        <a [routerLink]="[route.path]">{{route.data[0]}}</a>
+      </li>
+    </ul>
+  </div>
+</div>

demo/src/app/common/main-menu/main-menu.component.ts → demo/src/app/common/sidebar/sidebar.component.ts

@@ -1,20 +1,23 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, Inject, Renderer  } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
 import { isBs3, setTheme } from 'ngx-bootstrap/utils';
 import { routes } from '../../app.routing';
 import { StyleManager } from '../../theme/style-manager';
 import { ThemeStorage } from '../../theme/theme-storage';
+import { DOCUMENT } from '@angular/platform-browser';
 
 const _bs3Css =
-  '/assets/css/bootstrap.min.css';
+  'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
 const _bs4Css =
   'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css';
 
 @Component({
-  selector: 'main-menu',
-  templateUrl: './main-menu.component.html'
+  selector: 'sidebar',
+  templateUrl: './sidebar.component.html'
 })
-export class MainMenuComponent {
+export class SidebarComponent {
+  public isShown = false;
+
   public get isBs3(): boolean {
     return isBs3();
   }
@@ -27,7 +30,9 @@ export class MainMenuComponent {
   public constructor(
     private router: Router,
     public styleManager: StyleManager,
-    private _themeStorage: ThemeStorage
+    private _themeStorage: ThemeStorage,
+    private renderer: Renderer,
+    @Inject(DOCUMENT) private document: any
   ) {
     const currentTheme = this._themeStorage.getStoredTheme();
     if (currentTheme) {
@@ -36,6 +41,26 @@ export class MainMenuComponent {
 
     this.router = router;
     this.routes = this.routes.filter((v: any) => v.path !== '**');
+
+    this.router.events.subscribe((event: any) => {
+      if (event instanceof NavigationEnd) {
+        this.toggle(false);
+      }
+    });
+  }
+
+  public toggle(isShown?: boolean): void {
+    this.isShown = typeof isShown === 'undefined' ? !this.isShown : isShown;
+    if (this.document && this.document.body) {
+      this.renderer.setElementClass(
+        this.document.body,
+        'isOpenMenu',
+        this.isShown
+      );
+      if (this.isShown === false) {
+        this.renderer.setElementProperty(this.document.body, 'scrollTop', 0);
+      }
+    }
   }
 
   installTheme(theme: 'bs3' | 'bs4') {

demo/src/app/common/top-menu/top-menu.component.html

@@ -1,25 +1,29 @@
-<div id="top-menu">
-  <div class="title">
-    <h2 [routerLink]="['']">ngx-bootstrap {{currentVersion ? 'v' + currentVersion : ''}}</h2>
-  </div>
-  <div class="prev-docs hidden-xs hidden-xs-down" dropdown *ngIf="previousDocs.length" container="body">
+<header id="header" class="header">
+  <h1 class="logo" [routerLink]="['']">ngX Bootstrap</h1>
+
+  <div class="header-info">
+    <div class="prev-docs" dropdown *ngIf="previousDocs.length" container="body">
       <div dropdownToggle class="dropdown-toggle">
-        Previous docs <span class="caret"></span>
+        {{currentVersion ? 'v' + currentVersion : ''}} <span class="caret"></span>
       </div>
       <ul *dropdownMenu class="dropdown-menu" role="menu">
         <li role="menuitem" *ngFor="let item of previousDocs">
           <a class="dropdown-item" [href]="appUrl + (isLocalhost ? item.unprefixedUrl : item.url) + (appHash ? '/' + appHash : '')">{{item.version}}</a>
         </li>
       </ul>
-  </div>
-
-  <div id="mobile-main-menu" (click)="toggle()">
-    <img src="assets/images/menu-left.svg" alt="left menu">
-  </div>
+    </div>
 
-  <div class="logo">
-    <a target="_blank" rel="noopener" href="https://github.com/valor-software/ngx-bootstrap">
-      <img src="assets/images/GitHub-Mark-Light-64px.png" alt="github stars">
-    </a>
+    <ul class="header-list">
+      <li>
+        <a target="_blank" rel="noopener" href="https://github.com/valor-software/ngx-bootstrap">
+          <img src="assets/images/icons/icon-git.svg" alt="github stars">
+        </a>
+      </li>
+      <li>
+        <a target="_blank" rel="noopener" href="https://ngx-slack.herokuapp.com">
+          <img src="assets/images/icons/icon-slack.svg" alt="slack">
+        </a>
+      </li>
+    </ul>
   </div>
-</div>
+</header>

demo/src/app/common/top-menu/top-menu.component.ts

@@ -1,6 +1,5 @@
-import { AfterViewInit, Component, Inject, Renderer } from '@angular/core';
+import { AfterViewInit, Component } from '@angular/core';
 import { Http } from '@angular/http';
-import { DOCUMENT } from '@angular/platform-browser';
 import { NavigationEnd, Router, UrlSerializer } from '@angular/router';
 import 'rxjs/add/operator/map';
 
@@ -9,19 +8,16 @@ import 'rxjs/add/operator/map';
   templateUrl: './top-menu.component.html'
 })
 export class TopMenuComponent implements AfterViewInit {
-  public isShown = false;
   public appUrl: string;
   public appHash: string;
   public currentVersion: string;
   public previousDocs: string[] = [];
   public isLocalhost = false;
 
   public constructor(
-    private renderer: Renderer,
-    @Inject(DOCUMENT) private document: any,
     private router: Router,
     private http: Http
-  ) {}
+  ) { }
 
   public ngAfterViewInit(): any {
     // todo: remove this sh**
@@ -37,7 +33,6 @@ export class TopMenuComponent implements AfterViewInit {
       this.appHash = location.hash === '#/' ? '' : location.hash;
       if (event instanceof NavigationEnd && _cur !== _prev) {
         _prev = _cur;
-        this.toggle(false);
       }
     });
 
@@ -60,18 +55,4 @@ export class TopMenuComponent implements AfterViewInit {
       location.hostname +
       (this.isLocalhost ? ':' + location.port + '/' : '/');
   }
-
-  public toggle(isShown?: boolean): void {
-    this.isShown = typeof isShown === 'undefined' ? !this.isShown : isShown;
-    if (this.document && this.document.body) {
-      this.renderer.setElementClass(
-        this.document.body,
-        'isOpenMenu',
-        this.isShown
-      );
-      if (this.isShown === false) {
-        this.renderer.setElementProperty(this.document.body, 'scrollTop', 0);
-      }
-    }
-  }
 }

demo/src/app/components/+datepicker/datepicker-section.component.ts

@@ -11,6 +11,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
     <demo-section [name]="name" [src]="src">
       <tabset>
         <tab heading="Overview">
+          <br>
           <p>Datepicker is a highly configurable component that adds datepicker functionality to your pages. You can
             customize the date format and language, restrict the selectable date ranges.</p>
           <h2>Contents</h2>
@@ -128,6 +129,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
         
         <!-- Old datepicker part-->
         <tab heading="Old">
+          <br>
           <p>This is a legacy version of datepicker without support of daterangepicker, locales, themes, etc.</p>
           <h2>Contents</h2>
           <ul>