Merge sidemenu cat into sidemenu

lib/components/SideMenu/side-menu.html

@@ -1,6 +1,13 @@
 <h2 class="menu-header"> Api reference </h2>
-<div *ng-for="var cat of data.menu; var idx = index">
-  <side-menu-cat [cat-details]="cat" (expand)="activateAndScroll(idx, -1)"
-  (activate)="activateAndScroll(idx, $event.methodIdx)">
-  </side-menu-cat>
+<div *ng-for="var cat of data.menu; #idx = index">
+
+  <label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [ng-class]="{active: cat.active}"> {{cat.name}}</label>
+  <ul class="menu-subitems" [ng-class]="{active: cat.active}">
+    <li *ng-for="var method of cat.methods; var methIdx = index"
+      [ng-class]="{active: method.active}"
+      (click)="activateAndScroll(idx, methIdx)">
+      {{method.summary}}
+    </li>
+  </ul>
+
 </div>

lib/components/SideMenu/side-menu.js

@@ -2,7 +2,6 @@
 
 import {RedocComponent, BaseComponent} from '../base';
 import SchemaManager from '../../utils/SchemaManager';
-import SideMenuCat from '../SideMenuCat/side-menu-cat';
 import {NgZone} from 'angular2/angular2';
 
 const CHANGE = {
@@ -15,8 +14,7 @@ const CHANGE = {
   selector: 'side-menu',
   providers: [SchemaManager],
   templateUrl: './lib/components/SideMenu/side-menu.html',
-  styleUrls: ['./lib/components/SideMenu/side-menu.css'],
-  directives: [SideMenuCat]
+  styleUrls: ['./lib/components/SideMenu/side-menu.css']
 })
 export default class SideMenu extends BaseComponent {
   constructor(schemaMgr, zone) {

lib/components/SideMenu/side-menu.scss

@@ -2,3 +2,38 @@
   text-transform: uppercase;
   color: #1976D3;
 }
+
+$side-menu-item-color: #384248;
+$side-menu-bg: #FAFAFA;
+$side-menu-even-bg: #F0F0F0;
+$side-menu-active-bg-color: #E6E6E6;
+
+.menu-cat-header {
+  font-weight: bold;
+  font-size: 15px;
+  cursor: pointer;
+  color: $side-menu-item-color;
+  text-transform: uppercase;
+  background-color: $side-menu-bg;
+}
+
+.menu-subitems {
+  padding-left: 20px;
+  margin: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.menu-subitems.active {
+  height: auto;
+}
+
+.menu-subitems li {
+  list-style: none inside none;
+  padding: 5px 0;
+  cursor: pointer;
+}
+
+.menu-item.active, .menu-subitems li.active {
+  color: #1976D3;
+}

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

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

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

@@ -1,31 +0,0 @@
-'use strict';
-
-import {RedocComponent, BaseComponent} from '../base';
-import {EventEmitter} from 'angular2/angular2';
-
-@RedocComponent({
-  selector: 'side-menu-cat',
-  inputs: ['catDetails'],
-  outputs: ['expand', 'activate'],
-  styleUrls: ['./lib/components/SideMenuCat/side-menu-cat.css'],
-  templateUrl: './lib/components/SideMenuCat/side-menu-cat.html'
-})
-export default class SideMenuCat extends BaseComponent {
-  constructor(schemaMgr) {
-    super(schemaMgr);
-    this.expand = new EventEmitter();
-    this.activate = new EventEmitter();
-  }
-
-  expandCat() {
-    this.expand.next();
-  }
-
-  activateMethod(methodIdx) {
-    this.activate.next({methodIdx: methodIdx});
-  }
-
-  prepareModel() {
-    this.data = this.catDetails;
-  }
-}

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

@@ -1,28 +0,0 @@
-.menu-item {
-  font-weight: bold;
-  font-size: 15px;
-  cursor: pointer;
-  color: #666;
-  text-transform: capitalize;
-}
-
-.menu-subitems {
-  padding-left: 20px;
-  margin: 0;
-  height: 0;
-  overflow: hidden;
-}
-
-.menu-subitems.active {
-  height: auto;
-}
-
-.menu-subitems li {
-  list-style: none inside none;
-  padding: 5px 0;
-  cursor: pointer;
-}
-
-.menu-item.active, .menu-subitems li.active {
-  color: #1976D3;
-}

lib/components/index.js

@@ -10,7 +10,6 @@ import ResponsesList from './ResponsesList/responses-list';
 import ResponsesSamples from './ResponsesSamples/responses-samples';
 import SchemaSample from './SchemaSample/schema-sample';
 import SideMenu from './SideMenu/side-menu';
-import SideMenuCat from './SideMenuCat/side-menu-cat';
 import JsonSchema from './JsonSchema/json-schema';
 
 const REDOC_COMPONENTS = [
@@ -24,8 +23,7 @@ const REDOC_COMPONENTS = [
   ResponsesList,
   ResponsesSamples,
   SchemaSample,
-  SideMenu,
-  SideMenuCat
+  SideMenu
 ];
 
 export {
@@ -40,6 +38,5 @@ export {
   ResponsesSamples,
   SchemaSample,
   SideMenu,
-  SideMenuCat,
   REDOC_COMPONENTS
 };