sidebar design changes, add searchbox

src/app/components/sidebar/_sidebar.scss

@@ -27,7 +27,7 @@ a.collapse-menu-link {
   color: #fff;
   width: 18px;
   position: absolute;
-  top: 52px;
+  top: 47px;
   right: -18px;
   padding: 0;
 
@@ -49,7 +49,7 @@ a.collapse-menu-link {
 .al-sidebar-list-block {
   position: absolute;
   height: 100%;
-  top: 52px;
+  top: 88px;
   left: 0;
   width: 100%;
   padding-bottom: 10px;
@@ -116,6 +116,46 @@ a.al-sidebar-list-link {
   }
 }
 
+.sidebar-overlap {
+  background: rgba(0, 0, 0, .75);
+  @extend .sidebar-full-width;
+}
+
+.slimScrollBar, .slimScrollRail {
+  border-radius: 0px !important;
+  width: 4px !important;
+}
+
+.search {
+  position: absolute;
+  left: 18px;
+  top: 54px;
+  text-shadow: none;
+  color: #fff;
+  font-size: 13px;
+  line-height: 25px;
+  transition: all 0.5s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 162px;
+  label {
+    cursor: pointer;
+  }
+  i {
+    margin-right: 18px;
+    width: 16px;
+    display: inline-block;
+  }
+  input {
+    background: none;
+    border: none;
+    outline: none;
+    width: 120px;
+    padding: 0;
+    margin: 0 0 0 -3px;
+  }
+}
+
 @mixin default-sublist() {
   margin: 0;
   padding: 0;
@@ -182,9 +222,9 @@ a.al-sidebar-list-link {
     width: 52px;
 
     .al-logo {
-      padding-left: 18px;
+      padding-left: 16px;
       span {
-        padding-left: 18px;
+        padding-left: 20px;
       }
     }
 
@@ -228,6 +268,10 @@ a.al-sidebar-list-link {
     .sidebar-hover-elem, .sidebar-select-elem {
       left: 48px;
     }
+
+    .search {
+      width: 32px;
+    }
   }
 }
 
@@ -303,14 +347,8 @@ a.al-sidebar-list-link {
   .sidebar-hover-elem, .sidebar-select-elem {
     left: $sidebar-width - 4;
   }
-}
 
-.sidebar-overlap {
+  .search {
-  background: rgba(0, 0, 0, .75);
+    width: 162px;
-  @extend .sidebar-full-width;
+  }
-}
-
-.slimScrollBar, .slimScrollRail {
-  border-radius: 0px !important;
-  width: 4px !important;
 }

src/app/components/sidebar/sidebar.html

@@ -7,6 +7,12 @@
     <i class="fa fa-angle-double-left"></i>
   </a>
 
+  <div class="search">
+    <!--<label for="searchInput" ng-click="openSidebar()"><i class="ion-ios-search-strong"></i></label>-->
+    <i class="ion-ios-search-strong" ng-click="startSearch()"></i>
+    <input id="searchInput" type="text" placeholder="Search for..." ng-keypress="search($event)" ng-blur="collapseSidebar()">
+  </div>
+
   <div class="al-sidebar-list-block" ng-mouseleave="hideHoverElement()">
     <ul class="al-sidebar-list" slimscroll="{height: '100%'}">
       <li ng-repeat="item in menuItems" class="al-sidebar-list-item"

src/app/components/sidebar/sidebar.js

@@ -138,11 +138,14 @@ blurAdminApp.directive('sidebar', function () {
         }
       };
 
+      function isSidebarCollapsed() {
+        return body.hasClass(collapsedClass) || (!$scope.showSidebar && window.innerWidth <= resWidthCollapseSidebar && window.innerWidth > resWidthHideSidebar);
+      }
+
       $scope.toggleSubMenu = function ($event, item) {
         var submenu = $($event.currentTarget).next();
 
-        var isCollapsedSidebar = body.hasClass(collapsedClass) || (!$scope.showSidebar && window.innerWidth <= resWidthCollapseSidebar && window.innerWidth > resWidthHideSidebar);
+        if (isSidebarCollapsed()) {
-        if (isCollapsedSidebar) {
           if (!item.slideRight) {
             $timeout(function () {
               item.slideRight = true;
@@ -170,7 +173,8 @@ blurAdminApp.directive('sidebar', function () {
 
       $scope.hoverItem = function ($event) {
         $scope.showHoverElem = true;
-        $scope.hoverElemTop = ($event.currentTarget.getBoundingClientRect().top + $window.scrollY);
+        var menuTopValue = 88;
+        $scope.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - menuTopValue;
       };
 
       $scope.hideHoverElement = function () {
@@ -179,10 +183,35 @@ blurAdminApp.directive('sidebar', function () {
 
       $scope.collapseSidebar = function() {
         if (window.innerWidth <= resWidthCollapseSidebar) {
-          console.log('test');
           $scope.showSidebar = false;
         }
       };
+
+      function focusSearchInput() {
+        document.getElementById("searchInput").focus();
+      }
+
+      $scope.startSearch = function() {
+        if (window.innerWidth <= resWidthCollapseSidebar) {
+          $scope.showSidebar = true;
+        }
+        if (body.hasClass(collapsedClass)) {
+          console.log('collapsed');
+          body.removeClass(collapsedClass);
+          $timeout(function(){
+            focusSearchInput();
+          }, 1000);
+        } else {
+          console.log('else');
+          focusSearchInput();
+        }
+      };
+
+      $scope.search = function(event) {
+        if (event.which === 13) {
+          $scope.collapseSidebar();
+        }
+      }
     }]
   };
 });

src/app/pages/profile/profileModal/profileModal.html

@@ -7,15 +7,17 @@
         </button>
         <h4 class="modal-title" id="myModalLabel">Add Account</h4>
       </div>
+      <form name="linkForm">
       <div class="modal-body">
         <p>Paste a link to your profile into the box below</p>
         <div class="form-group">
-          <input type="text" class="form-control" placeholder="Link to Profile">
+          <input type="text" class="form-control" placeholder="Link to Profile" ng-model="link">
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
+        <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="bindProfile()">Save changes</button>
       </div>
+      </form>
     </div>
   </div>
 </div>

src/app/pages/profile/profileModal/profileModal.js

@@ -4,7 +4,11 @@ blurAdminApp.directive('profileModal', [function () {
   return {
     restrict: 'EA',
     replace: true,
-    link: function (scope, elem, attr) {
+    link: function ($scope) {
+      $scope.link = "";
+      $scope.bindProfile = function(){
+        $scope.link = "";
+      };
     },
     templateUrl: 'app/pages/profile/profileModal/profileModal.html'
   };

src/assets/css/_layout.scss

@@ -36,14 +36,13 @@ a {
 a.al-logo {
   color: #ffffff;
   text-decoration: none;
-  padding: 10px 18px 8px 17px;
+  padding: 10px 18px 8px 16px;
   display: block;
   font: 100 24px/34px $font-family;
   text-decoration: none;
   white-space: nowrap;
   text-shadow: 0 0 2px;
   overflow: hidden;
-  position: fixed;
   top: 0;
   left: 0;
   &:hover {