x-secondaryTag and menu-sync

lib/common-components/Tabs/tabs.js

@@ -44,13 +44,7 @@ export class Tabs {
     <div class="tab-wrap" [hidden]="!active">
       <ng-content></ng-content>
     </div>
-  `,
+  `
-  styles: [`
-    .tab-wrap {
-      padding: 5px;
-      background-color: #121427;
-    }
-  `]
 })
 export class Tab {
   constructor(tabs) {

lib/components/MethodsList/methods-list.html

@@ -1,6 +1,6 @@
 <div class="methods">
   <div class="tag" *ng-for="#tag of data.tags">
-    <div class="tag-info">
+    <div class="tag-info" [attr.tag]="tag.name">
       <h1> {{tag.name}} </h1>
       <p *ng-if="tag.description" inner-html="{{ tag.description | marked }}"> </p>
     </div>

lib/components/SchemaSample/schema-sample.js

@@ -6,7 +6,12 @@ import SchemaSampler from 'json-schema-instantiator';
 
 @RedocComponent({
   selector: 'schema-sample',
-  templateUrl: './lib/components/SchemaSample/schema-sample.html'
+  templateUrl: './lib/components/SchemaSample/schema-sample.html',
+  styles: [`
+    pre {
+      background-color: #121427;
+    }
+  `]
 })
 export default class SchemaSample extends BaseComponent {
   constructor(schemaMgr) {

lib/components/SideMenu/side-menu.js

@@ -30,7 +30,7 @@ export default class SideMenu extends BaseComponent {
     });
 
     this.activeCatIdx = 0;
-    this.activeMethodIdx = 0;
+    this.activeMethodIdx = -1;
     this.prevOffsetY = null;
   }
 
@@ -46,21 +46,30 @@ export default class SideMenu extends BaseComponent {
   }
 
   scrollToActive() {
-    window.scrollTo(0, this.getMethodEl().offsetTop);
+    let subjRect = this.getMethodEl().getBoundingClientRect();
+    let offset = window.scrollY + subjRect.top;
+    window.scrollTo(0, offset);
   }
 
   activate(catIdx, methodIdx) {
     let menu = this.data.menu;
     menu[this.activeCatIdx].active = false;
+    if (menu[this.activeCatIdx].methods.length) {
+      if (this.activeMethodIdx >= 0) {
         menu[this.activeCatIdx].methods[this.activeMethodIdx].active = false;
+      }
+   }
 
     this.activeCatIdx = catIdx;
     this.activeMethodIdx = methodIdx;
     menu[catIdx].active = true;
+    this.activeMethodPtr = null;
+    if (menu[catIdx].methods.length && (methodIdx > -1)) {
       let currentItem = menu[catIdx].methods[methodIdx];
       currentItem.active = true;
       this.activeMethodPtr = currentItem.pointer;
     }
+  }
 
   _calcActiveIndexes(offset) {
     let menu = this.data.menu;
@@ -72,9 +81,9 @@ export default class SideMenu extends BaseComponent {
 
     if (resMethodIdx > catLength - 1) {
       resCatIdx++;
-      resMethodIdx = 0;
+      resMethodIdx = -1;
     }
-    if (resMethodIdx < 0) {
+    if (resMethodIdx < -1) {
       let prevCatIdx = --resCatIdx;
       catLength = menu[Math.max(prevCatIdx, 0)].methods.length;
       resMethodIdx = catLength - 1;
@@ -99,7 +108,8 @@ export default class SideMenu extends BaseComponent {
   getMethodEl() {
     let ptr = this.activeMethodPtr;
     let tag = this.data.menu[this.activeCatIdx].name;
-    return document.querySelector(`[pointer="${ptr}"][tag="${tag}"]`);
+    let selector = ptr ? `[pointer="${ptr}"][tag="${tag}"]` : `[tag="${tag}"]`;
+    return document.querySelector(selector);
   }
 
   scrollHandler() {

lib/components/SideMenuCat/side-menu-cat.css

@@ -22,6 +22,6 @@ li {
   cursor: pointer;
 }
 
-li.active {
+label.active, li.active {
   color: #1976D3;
 }

lib/components/SideMenuCat/side-menu-cat.html

@@ -1,4 +1,4 @@
-<label (click)="expandCat()"> {{data.name}}</label>
+<label (click)="expandCat()" [ng-class]="{active: data.active}"> {{data.name}}</label>
 <ul [ng-class]="{active: data.active}">
   <li *ng-for="var method of data.methods; var idx = index"
     [ng-class]="{active: method.active}"