AWildDevAppears · AWildDevAppears · Jul 9, 2015 · Jul 9, 2015 · Jul 14, 2015 · Jul 14, 2015
diff --git a/font-awesome-4.3.0/css/font-awesome.css b/font-awesome-4.3.0/css/font-awesome.css
diff --git a/font-awesome-4.3.0/css/font-awesome.min.css b/font-awesome-4.3.0/css/font-awesome.min.css
diff --git a/font-awesome-4.3.0/fonts/FontAwesome.otf b/font-awesome-4.3.0/fonts/FontAwesome.otf
diff --git a/font-awesome-4.3.0/fonts/fontawesome-webfont.eot b/font-awesome-4.3.0/fonts/fontawesome-webfont.eot
diff --git a/font-awesome-4.3.0/fonts/fontawesome-webfont.svg b/font-awesome-4.3.0/fonts/fontawesome-webfont.svg
diff --git a/font-awesome-4.3.0/fonts/fontawesome-webfont.ttf b/font-awesome-4.3.0/fonts/fontawesome-webfont.ttf
diff --git a/font-awesome-4.3.0/fonts/fontawesome-webfont.woff b/font-awesome-4.3.0/fonts/fontawesome-webfont.woff
diff --git a/font-awesome-4.3.0/fonts/fontawesome-webfont.woff2 b/font-awesome-4.3.0/fonts/fontawesome-webfont.woff2
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <!-- Bootstrap -->
     <link href="css/main.css" rel="stylesheet">
     <link href="google-code-prettify/prettify.css" rel="stylesheet"></link>
+    <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet"></link>
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
@@ -26,10 +27,20 @@
 
   </head>
   <body ng-app="pattern-box">
-
     <heading></heading>
 
-    <div ui-view></div>
+    <form action="" class="form--fixed-right form-inline hidden-xs">
+        <input type="search" class="form-control" placeholder="Search">
+        <button type="submit" class="btn btn-info">Search</button>
+    </form>
+
+    <div class="row">
+        <div class="hidden-xs">
+            <side-menu></side-menu>
+        </div>
+            <div class="content" ui-view></div>
+        </div>
+    </div>
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

diff --git a/scss/base/_variables.scss b/scss/base/_variables.scss
@@ -1,3 +1,4 @@
 // colors
 $brand-color1:  #E5E4E2; // platinum
 $brand-color2:  #C9FFF6; // light cyan
+$brand-color3:  #3EB489; // mint green
diff --git a/scss/component/_forms.scss b/scss/component/_forms.scss
@@ -1,16 +1,13 @@
-.form__input--search {
-  display: inline-block;
-  float: left;
-  width: 75%;
+.form--fixed-right {
+  position: fixed;
+  right: 0;
+  margin: 20px 0;
+  background-color: $gray-lighter;
+  border: solid 1px $gray-light;
+  border-radius: 5px 0 0 5px;
+  border-right: none;
+  padding: 10px;
+  padding-right: 30px;
+  z-index: 1;
 }
 
-.form__input--search-submit {
-  float: right;
-  display: inline-block;
-  width: 25%;
-}
-
-.form-group--search {
-  margin: 0;
-  padding: 0;
-}
diff --git a/scss/component/_items.scss b/scss/component/_items.scss
@@ -0,0 +1,29 @@
+.list {
+  list-style: none;
+  padding: 0;
+}
+
+.list__item {
+  padding: 5px 20px;
+  background-color: $gray-lighter;
+  margin-bottom: 5px;
+  cursor: pointer;
+
+  &.row {
+    margin-left: 3px;
+     margin-right: 3px;
+  }
+
+  i {
+    font-weight: 600;
+    color: $gray;
+  }
+}
+
+.item__subsection {
+  padding-top: 10px;
+}
+
+i.icon-pos {
+  color: $brand-color3;
+}
diff --git a/scss/component/_side-menu.scss b/scss/component/_side-menu.scss
@@ -0,0 +1,96 @@
+body {
+  overflow-x: hidden;
+}
+
+side-menu {
+  width: 250px;
+  overflow: hidden;
+  display: block;
+  height: 100vh;
+  position: fixed;
+}
+
+.side-menu {
+  background-color: $navbar-default-bg;
+  height: 100%;
+  padding: 0;
+  width: 260px;
+  overflow-y: scroll;
+}
+
+.side-menu__header {
+  margin: 0;
+  background-color: darken($navbar-default-bg, 10%);
+  border-bottom: 1px solid $gray;
+  padding: 40px;
+  text-align: center;
+  color: #fff;
+}
+
+.side-menu__nav {
+  padding: 0;
+  padding-left: 15px;
+}
+
+.side-menu__block {
+  padding: 10px 30px;
+  color: #eee;
+  background-color: lighten($navbar-default-bg, 5%);
+  margin-bottom: 20px;
+  border-bottom: 1px solid $gray;
+  text-align: center;
+}
+
+.nav__item {
+  color: #fff;
+  padding: 15px 10px;
+  background-color: lighten($navbar-default-bg, 7%);
+  border-bottom: solid 1px darken($navbar-default-bg, 10%);
+  cursor: pointer;
+
+  i {
+    margin-right: 10px;
+  }
+
+  &:first-child {
+    border-top: solid 1px darken($navbar-default-bg, 10%);
+  }
+
+  &:hover {
+    background-color: lighten($navbar-default-bg, 3%);
+  }
+
+  &.selected {
+    background-color: darken($navbar-default-bg, 5%);
+  }
+}
+
+.content {
+  margin-left: 250px;
+  margin-right: 30px;
+}
+
+.content__container {
+  background-color: #fff;
+  margin: 80px 20px 0;
+  padding: 20px;
+
+  .jumbotron {
+    padding: 50px;
+  }
+}
+
+@media(max-width: $screen-lg) {
+  .content__container {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@media(max-width: $screen-sm) {
+  .content {
+    margin: 0 ($grid-gutter-width / 2); // stop content from sinking into the row
+    padding-left: 5px;
+  }
+}
+
diff --git a/scss/main.scss b/scss/main.scss
@@ -2,11 +2,19 @@
 @import "base/variables";
 
 @import "component/card";
+@import "component/items";
 @import "component/forms";
+@import "component/side-menu";
 
 body {
   background: $brand-color1;
-  padding-top: 70px;
+  font-size: 16px;
+}
+
+@media (max-width: $screen-sm) {
+  body {
+    padding-top: 70px;
+  }
 }
 
 pre.prettyprint {

diff --git a/shared/directives/header-footer.js b/shared/directives/header-footer.js
@@ -4,4 +4,11 @@ angular.module('pattern-box')
         restrict: 'E',
         templateUrl: 'shared/directives/header.html'
       };
+  })
+
+  .directive('sideMenu', function () {
+      return {
+        restrict: 'E',
+        templateUrl: 'shared/directives/side-menu.html'
+      };
   });
diff --git a/shared/directives/header.html b/shared/directives/header.html
@@ -1,23 +1,28 @@
-<nav class="navbar navbar-default navbar-fixed-top">
-  <div class="container-fluid">
-    <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" href="#">Pattern box</a>
-    </div>
-    <div class="collapse navbar-collapse" id="navbar-collapse-1">
-      <form class="navbar-form navbar-right" role="search">
-        <div class="form-group form-group--search">
-          <input type="text" class="form-control form__input--search" placeholder="Search">
-          <button type="submit" class="btn btn-default form__input--search-submit">Search</button>
+<!--mobile header-->
+<nav class="navbar navbar-default navbar-fixed-top visible-xs">
+  <div class="navbar-header">
+    <a class="navbar-brand" href="#">Pattern box</a>
+    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
+      <span class="sr-only">Toggle navigation</span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </button>
+  </div>
+   <div class="collapse navbar-collapse" id="navbar-collapse-1">
+      <form role="search" class="form-inline" ng-submit="">
+        <div class="form-group">
+          <input type="text" class="form-control" placeholder="Search">
         </div>
-
       </form>
+      <ul class="nav navbar-nav">
+        <li>
+          <button type="button" class="btn navbar-btn btn-block btn-info" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false" ui-sref="profile">Profile</button>
+        </li>
+        <li>
+           <button type="button" class="btn navbar-btn btn-block btn-primary" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false"><i class="fa fa-sign-out"></i> Logout</button>
+        </li>
+      </ul>
     </div>
   </div>
 </nav>
diff --git a/shared/directives/side-menu.html b/shared/directives/side-menu.html
@@ -0,0 +1,23 @@
+<div class="side-menu">
+  <h1 class="side-menu__header">
+  Logo / header here
+  </h1>
+
+  <div class="side-menu__block">
+    <p>Logged in as Brian Smithhasareallylongsurname-doublebarreledtoo</p>
+    <button class="btn btn-info" ui-sref="profile">Profile</button>
+    <button class="btn btn-primary"><i class="fa fa-sign-out"></i> Logout</button>
+  </div>
+
+  <ul class="side-menu__nav">
+    <li class="nav__item"><i class="fa fa-thumb-tack"></i>ID marker</li>
+    <li class="nav__item"><i class="fa fa-thumb-tack"></i>ID marker</li>
+    <li class="nav__item"><i class="fa fa-thumb-tack"></i>ID marker</li>
+    <li class="nav__item"><i class="fa fa-thumb-tack"></i>ID marker</li>
+    <li class="nav__item"><i class="fa fa-thumb-tack"></i>ID marker</li>
+    <li class="nav__item"><i class="fa fa-thumb-tack"></i>ID marker</li>
+    <li class="nav__item"><i class="fa fa-thumb-tack"></i>ID marker</li>
+    <li class="nav__item"><i class="fa fa-arrow-up"></i>To top</li>
+  </ul>
+</div>
+