Add sidebar to whiteboard page

Related-Issue: #48

cognitive/app/static/app/whiteboard/whiteboard.html

@@ -1,37 +1,54 @@
 <ng-include src="'static/app/common/header.html'"></ng-include>
 
-<ng-content ng-controller="WhiteboardController as vm">
-  <div layout="column" style="height:calc(100vh); background: whitesmoke;">
-    <md-content layout-padding layout="row" layout-align="center start" style="background: whitesmoke">
-      <md-content layout="column" flex="80" style="background: whitesmoke">
-        <md-card ng-click="vm.createExperiment($event)" flex layout="row" layout-align="start center">
-          <span style="background: #3F51B5;">
-            <ng-md-icon icon="add" style="fill: white" size="27pt" ></ng-md-icon>
-          </span>
-          <span flex="5"></span>
-          <span>Create Experiment</span>
-        </md-card>
-        <md-card ng-repeat="exp in vm.experiments"
-                 ng-click="vm.moveToExperiment($index)"
-                 layout="row" layout-align="start center" flex>
-          <span style="background: steelblue; padding: 5px;">
-            <ng-md-icon icon="now_widgets" style="fill: whitesmoke" size="20pt" ></ng-md-icon>
-          </span>
-          <span flex="5"></span>
-          <span flex="25">{{ exp.name }}</span>
-          <span flex="10">{{ exp.status }}</span>
-          <span flex="20"></span>
-          <span flex="20">
-            {{ exp.created_time }}
-          </span>
-          <span flex="5" class="card-remove-button" ng-click="vm.deleteExperiment(exp); $event.stopPropagation();">
-            <i class="fa fa-trash-o"></i>
-          </span>
-          <span flex="5" class="card-remove-button" style="background: cadetblue" ng-click="vm.editExperiment(exp); $event.stopPropagation();">
-            <i class="fa fa-pencil"></i>
-          </span>
-        </md-card>
-      </md-content>
+<section ng-controller="WhiteboardController as vm" layout="row" flex>
+  <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
+    <md-content layout-padding>
+      <md-button class="md-primary md-button-menu-content">
+        <i class="fa fa-flask"></i>
+        Experiment
+      </md-button>
+      <md-button class="md-primary md-button-menu-content">
+        <i class="fa fa-database"></i>
+        Data
+      </md-button>
+      <md-divider ></md-divider>
+      <md-subheader class="md-no-sticky">Recent Experiment</md-subheader>
+      <!-- This is TODO -->
     </md-content>
-  </div>
-</ng-content>
+  </md-sidenav>
+  <md-content flex>
+    <div layout="column" style="height:calc(100vh); background: whitesmoke;">
+      <md-content layout-padding layout="row" layout-align="center start" style="background: whitesmoke">
+        <md-content layout="column" flex="80" style="background: whitesmoke">
+          <md-card ng-click="vm.createExperiment($event)" flex layout="row" layout-align="start center">
+            <span style="background: #3F51B5;">
+              <ng-md-icon icon="add" style="fill: white" size="27pt" ></ng-md-icon>
+            </span>
+            <span flex="5"></span>
+            <span>Create Experiment</span>
+          </md-card>
+          <md-card ng-repeat="exp in vm.experiments"
+                   ng-click="vm.moveToExperiment($index)"
+                   layout="row" layout-align="start center" flex>
+            <span style="background: steelblue; padding: 5px;">
+              <ng-md-icon icon="now_widgets" style="fill: whitesmoke" size="20pt" ></ng-md-icon>
+            </span>
+            <span flex="5"></span>
+            <span flex="25">{{ exp.name }}</span>
+            <span flex="10">{{ exp.status }}</span>
+            <span flex="20"></span>
+            <span flex="20">
+              {{ exp.created_time }}
+            </span>
+            <span flex="5" class="card-remove-button" ng-click="vm.deleteExperiment(exp); $event.stopPropagation();">
+              <i class="fa fa-trash-o"></i>
+            </span>
+            <span flex="5" class="card-remove-button" style="background: cadetblue" ng-click="vm.editExperiment(exp); $event.stopPropagation();">
+              <i class="fa fa-pencil"></i>
+            </span>
+          </md-card>
+        </md-content>
+      </md-content>
+    </div>
+  </md-content>
+</section>

cognitive/app/static/css/application.css

@@ -80,3 +80,9 @@ a:hover {
     padding-top: 5px;
     color:white;
 }
+
+.md-button-menu-content {
+    width:90%;
+    text-align: left;
+    text-transform: none;
+}

cognitive/settings.py

@@ -155,9 +155,9 @@
 BOWER_COMPONENTS_ROOT = os.path.join(PROJECT_ROOT, 'components')
 
 BOWER_INSTALLED_APPS = (
-    'angular#~1.4.6',
+    'angular#~1.4.7',
     'angular-bootstrap#~0.13.4',
-    'angular-material',
+    'angular-material#0.11.4',
     'angular-material-icons',
     'angular-resource',
     'angular-ui-router',