docs: fix left side menu, update docs

.vscode/settings.json

@@ -1,4 +1,3 @@
 {
-    "typescript.tsdk": "./node_modules/typescript/lib",
-    "vsicons.presets.angular": true
+    "typescript.tsdk": "./node_modules/typescript/lib"
 }

src/app/pages/examples/custom-edit-view/custom-edit-view-examples.component.html

@@ -23,3 +23,15 @@ <h3><a id="custom-editor-renderer" class="anchor" href="#custom-editor-renderer"
   <b>For the custom cell renderer:</b><br>
   In this example the custom component is applying a <code>.toUpperCase()</code> to one of the columns. You can implement the ViewCell interface to make sure you are setting up your component correctly.
 </p>
+
+<h3>
+  <a id="buttonview" class="anchor" href="#buttonview" aria-hidden="true">
+    <span aria-hidden="true" class="octicon octicon-link"></span>
+  </a>Button View
+</h3>
+<p>An example on how to use custom button view:</p>
+<div class="with-source">
+  <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/various/basic-example-button-view.component.ts"
+    target="_blank">Demo Source</a>
+  <basic-example-button-view></basic-example-button-view>
+</div>

src/app/pages/examples/examples.component.html

@@ -1,13 +1,15 @@
 <header-component tagline="Examples"></header-component>
-<section class="main-content with-sidebar">
+<div class="main-content with-sidebar">
   <nav class="fixed-sidebar">
     <h4>Examples</h4>
     <ul class="examples-menu">
-      <li><a routerLink="./using-filters" routerLinkActive="active">Advanced & custom filtering</a></li>
-      <li><a routerLink="./populate-from-server" routerLinkActive="active">Populating with external data</a></li>
+      <li><a routerLink="./using-filters" routerLinkActive="active">Standalone & Advanced filters</a></li>
+      <li><a routerLink="./populate-from-server" routerLinkActive="active">Loading data from server</a></li>
       <li><a routerLink="./custom-editors-viewers" routerLinkActive="active">Custom editors and viewers</a></li>
       <li><a routerLink="./various" routerLinkActive="active">Various</a></li>
     </ul>
   </nav>
-  <router-outlet></router-outlet>
-</section>
+  <div class="main-content-body">
+    <router-outlet></router-outlet>
+  </div>
+</div>

src/app/pages/examples/examples.component.scss

@@ -1,30 +1,41 @@
 .with-sidebar {
   position: relative;
-  padding-right: 16rem;
+
+  .main-content-body {
+    padding-left: 16rem;
+  }
+
   .fixed-sidebar {
+    display: block;
     padding: 0 1rem;
     margin-top: 2rem;
-    position: absolute;
-    right: 0;
+    position: fixed;
+    top: 0;
+    padding-top: 290px;
     width: 16rem;
     font-size: 0.875rem;
+
     .back-top {
       display: none;
       margin-bottom: 1rem;
       font-weight: bold;
     }
+
     ul {
       padding-left: 1rem;
       list-style: none;
       margin-bottom: 0.875rem;
     }
+
     &.scrolled {
       position: fixed;
       top: 0;
+
       .back-top {
         display: block;
       }
     }
+
     .examples-menu {
       a.active {
         font-weight: bold;

src/app/pages/examples/examples.module.ts

@@ -21,7 +21,10 @@ import { FilterExamplesComponent } from './filter/filter-examples.component';
 import { ServerExamplesComponent } from './server/server-examples.component';
 import { CustomViewEditExamplesComponent } from './custom-edit-view/custom-edit-view-examples.component';
 import { VariousExamplesComponent } from './various/various-examples.component';
-import { BasicExampleButtonViewComponent, ButtonViewComponent } from './various/basic-example-button-view.component';
+import {
+  BasicExampleButtonViewComponent,
+  ButtonViewComponent,
+} from './custom-edit-view/basic-example-button-view.component';
 
 const EXAMPLES_COMPONENTS = [
   AdvancedExampleFiltersComponent,

src/app/pages/examples/server/server-examples.component.html

@@ -8,7 +8,7 @@ <h3><a id="from-server" class="anchor" href="#from-server" aria-hidden="true"><s
   <basic-example-load></basic-example-load>
 </div>
 
-<h3><a id="server" class="anchor" href="#server" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Load From Server Example</h3>
+<h3><a id="server" class="anchor" href="#server" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Server Data Source Example</h3>
 <p>
   An example on how to load data user Server DataSource:
 </p>

src/app/pages/examples/various/various-examples.component.html

@@ -15,15 +15,3 @@ <h3><a id="multiselect" class="anchor" href="#multiselect" aria-hidden="true"><s
   <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/various/basic-example-multi-select.component.ts" target="_blank">Demo Source</a>
   <basic-example-multi-select></basic-example-multi-select>
 </div>
-
-<h3>
-  <a id="buttonview" class="anchor" href="#buttonview" aria-hidden="true">
-  <span aria-hidden="true" class="octicon octicon-link"></span>
-  </a>Button View
-</h3>
-<p>An example on how to use custom button view:</p>
-<div class="with-source">
-  <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/various/basic-example-button-view.component.ts"
-    target="_blank">Demo Source</a>
-  <basic-example-button-view></basic-example-button-view>
-</div>