left sidebar

src/css/index.css

@@ -21,32 +21,61 @@
 }
 
 .HolyGrail-sidebar {
+    display: flex;
+    flex-direction: column;
     flex: 0 0 210px;
-    order: 0;
+    order: -1;
 }
 
+
 .HolyGrail-header {
     background: #333;
     border-bottom: 1px solid #d8d8d8;
 }
 
-.HolyGrail-sidebar {
-  border-radius: 3px;
-  background: #eeeeee;
-}
-
 .HolyGrail-header-brand {
-    flex: 0 0 10em;
+    flex: 0 0 210px;
     text-align: center;
-    font-size: 1.5em;
+    font-size: 1.3em;
     padding: 0.5em 0;
-    /*color: #d8412f;*/
-    /*background-color: #d8d8d8;*/
+}
+
+.HolyGrail-sidebar {
+    background: #f3f3f3;
+    border-right: 1px solid #d8d8d8;
+}
+
+
+#sidebar-search-box {
+    flex: 0 0 auto;
+    order: -1;
+    padding: 6px 6px;
+}
+
+#sidebar-sensor-tree {
+    flex: 1 0 auto;
+    order: 1;
+    padding: 2px 6px;
+}
+
+#sidebar-control {
+    position: relative;
+    flex: 1 0 auto;
+    order: 99;
+    box-sizing: border-box;
+    padding: 4px 6px;
+    margin: 0;
+    max-height: 14em;
+    overflow: auto;
+    border-top: 2px solid #d8d8d8;
+    background-color: #e8e8e8;
+    /*box-shadow: 0 -2px 2px -2px rgba(0, 0, 0, 0.6);*/
+    border-radius: 3px;
 }
 
 body {
     margin: 0;
-    background: #f5f5f5;
+    background: #fff;
 }
 
 .toggle-sidebar {

src/htdocs/index.html

@@ -13,12 +13,23 @@
   </header>
 
   <div class="HolyGrail-body">
-    <nav class="HolyGrail-sidebar">
-    ABC title
+    <nav class="HolyGrail-sidebar"> 
+      <div id="sidebar-search-box">
+        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
+      </div>
+      <div id="sidebar-sensor-tree">Tree</div>
+      <div id="sidebar-control">Control Area
+        <br/> control 1
+        <br/> control 5
+        <br/> control 6
+        <br/> control 7
+        <br/> control 8
+
+      </div>
     </nav>
-    <main class="HolyGrail-content">
+
+    <main class="HolyGrail-content" role="main">
     <i class="fa fa-bars toggle-sidebar"></i>
-    Content
     </main>
   </div>
 

src/javascript/page.js

@@ -4,13 +4,7 @@ module.exports = {
 	toggleSidebar: function() {
 		$('.toggle-sidebar').click(function() {
 			var v = $('.HolyGrail-sidebar').css('visibility');
-			if (v === 'visible') {
-				$('.HolyGrail-sidebar').css('visibility', 'collapse');
-				//$('.toggle-wrapper').css('width', '0');
-			} else {
-				$('.HolyGrail-sidebar').css('visibility', 'visible');
-				//$('.toggle-wrapper').css('width', '200');
-			}
+			$('.HolyGrail-sidebar').toggle();
 			console.log(v);
 		});		
 	}