chore(docs): modify demo style

demo/app/app-routing.module.ts

@@ -9,10 +9,6 @@ const routes: Routes = [
         path: '',
         component: DemoRichtextComponent
     },
-    {
-        path: 'richtext',
-        component: DemoRichtextComponent
-    },
     {
         path: 'huge-document',
         component: DemoHugeDocumentComponent

demo/app/app.component.html

@@ -1 +1,18 @@
-<router-outlet></router-outlet>
+<div class="header">
+    <span class="title">Slate Angular Examples</span>
+    <div class="link">
+        <a target="_blank" href="https://github.com/worktile/slate-angular" class="github">GitHub</a>
+        <a target="_blank" href="https://docs.slatejs.org/" class="docs">Docs</a>
+    </div>
+</div>
+<div class="sidenav">
+    <div class="nav-menu">
+        <div class="menu-item" *ngFor="let item of menus">
+            <a [routerLink]="item.url" class="vertical-menu-item level-1" [ngClass]="{'selected': isSelected(item)}" style="position: relative;" target="_self"><span>{{ item.name }}</span>
+            </a>
+        </div>
+    </div>
+</div>
+<div class="content">
+    <router-outlet></router-outlet>
+</div>

demo/app/app.component.scss

@@ -1,44 +1,118 @@
 $editor-width: 800px;
 
-.demo-rich-editor-wrapper {
-    width: $editor-width;
-    margin: 0 auto;
-    margin-top: 80px;
-    border: 1px solid #eee;
-    &.single {
-        width: 690px;
-        margin: 0 auto;
+.header {
+    align-items: center;
+    background: #1976d2;
+    color: #fff;
+    display: flex;
+    height: 52px;
+    z-index: 1000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    /* To appear above the underlay */
+    .title {
+        margin-left: 1em;
+    }
+
+    .link {
+        margin-left: auto;
+        margin-right: 1em;
+
+        .github,
+        .docs {
+            margin-left: 1em;
+            color: #fff;
+            -webkit-text-decoration: none;
+            text-decoration: none;
+        }
+    }
+}
+
+.sidenav {
+    position: fixed;
+    top: 52px;
+    bottom: 0;
+    left: 0;
+    min-width: 260px;
+    background-color: #f2f2f2;
+    border-right: 1px solid #dbdbdb;
+
+    .nav-menu {
+        margin-top: 16px;
+
+        .menu-item {
+            .vertical-menu-item {
+                box-sizing: border-box;
+                color: #444;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                text-align: left;
+                width: 100%;
+                text-decoration: none;
+
+                &.selected {
+                    color: #1669bb;
+                }
+
+                &:hover {
+                    background-color: #dbdbdb;
+                    color: #1976d2;
+                    text-shadow: 0 0 5px #fff;
+                }
+            }
+
+            .level-1 {
+                font-size: 14px;
+                line-height: 44px;
+                font-weight: 400;
+                padding-left: 20px;
+                margin: 0;
+                transition: background-color .2s;
+            }
+        }
     }
+}
+
+.content {
+    position: relative;
+    z-index: 1;
+    display: block;
+    height: 100%;
+    overflow: auto;
+    margin-left: 269px;
+    margin-top: 60px;
+}
+
+.demo-rich-editor-wrapper {
+    max-width: 42em;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #fff;
+
     .demo-global-toolbar {
+        padding: 1px 18px 17px;
         display: flex;
         justify-content: left;
         position: sticky;
         top: 0;
         z-index: 999;
-        background-color: white;
-        & > * {
+
+        &>* {
             display: inline-block;
             height: 24px;
             line-height: 24px;
         }
-        & > * + * {
+
+        &>*+* {
             margin-left: 15px;
         }
-        padding: 12px 28px 10px 28px;
-        border-bottom: 2px solid #eee;
-    }
-}
-.element-image-wrap {
-    & img {
-        width: 100%;
-    }
-}
 
-html,
-body {
-    height: 100%;
-}
-body {
-    margin: 0;
-    font-family: Roboto, 'Helvetica Neue', sans-serif;
-}
+        border-bottom: 2px solid #f5f5f5;
+        margin: 0 -20px;
+        margin-bottom: 20px;
+    }
+}

demo/app/app.component.ts

@@ -1,10 +1,32 @@
+import { Route } from '@angular/compiler/src/core';
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
     selector: 'demo-app-root',
     templateUrl: './app.component.html',
     providers: [],
 })
 export class AppComponent implements OnInit {
-    ngOnInit(): void {}
+    menus = [
+        {
+            url: '/',
+            name: 'RichText'
+        },
+        {
+            url: '/huge-document',
+            name: 'Huge Document'
+        },
+        {
+            url: '/markdown-shortcuts',
+            name: 'Markdown Shortcuts'
+        }
+    ];
+
+    isSelected(item) {
+        return window.location.href.endsWith(item.url);
+    }
+
+    ngOnInit(): void {
+    }
 }

demo/editor-typo.scss

@@ -1,4 +1,5 @@
 .slate-editable-container {
+    padding: 0px !important;
     .code-line {
         background-color: rgba($color: #000000, $alpha: 0.06);
         border-radius: 2px;

demo/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>slate-angular - Angular view layer for Slate</title>
+  <title>Slate Angular Examples - Angular view layer for Slate</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

demo/styles.scss

@@ -3,3 +3,15 @@
 @import './editor-typo.scss';
 @import '../packages/src/styles/index.scss';
 @import './assets/materialicons/icon.css';
+
+html,
+input,
+textarea {
+    font-family: 'Roboto', sans-serif;
+    line-height: 1.4;
+    background: #f2f2f2;
+}
+
+body {
+    margin: 0;
+}