control sidebar for vault with filters

src/app/config.js

@@ -7,7 +7,7 @@ angular
         $locationProvider.hashPrefix('');
         jwtOptionsProvider.config({
             urlParam: 'access_token3',
-            whiteListedDomains: ['api.bitwarden.com', 'preview-api.bitwarden.com', 'localhost', '192.168.1.8']
+            whiteListedDomains: ['api.bitwarden.com', 'preview-api.bitwarden.com', 'localhost', '192.168.1.6']
         });
         var refreshPromise;
         jwtInterceptorProvider.tokenGetter = /*@ngInject*/ function (options, tokenService, authService) {
@@ -77,7 +77,10 @@ angular
                 url: '^/vault',
                 templateUrl: 'app/vault/views/vault.html',
                 controller: 'vaultController',
-                data: { pageTitle: 'My Vault' },
+                data: {
+                    pageTitle: 'My Vault',
+                    controlSidebar: true
+                },
                 params: {
                     refreshFromServer: false
                 }

src/app/global/mainController.js

@@ -4,6 +4,7 @@ angular
     .controller('mainController', function ($scope, $state, authService, appSettings, toastr, $window, $document) {
         var vm = this;
         vm.bodyClass = '';
+        vm.usingControlSidebar = vm.openControlSidebar = false;
         vm.searchVaultText = null;
         vm.version = appSettings.version;
 
@@ -24,7 +25,17 @@ angular
                     $.AdminLTE.pushMenu.expandOnHover();
                 }
 
-                $(document).off('click', '.sidebar li a');
+                $document.off('click', '.sidebar li a');
+
+                $('#control-sidebar').on('click', function (e) {
+                    e.preventDefault();
+                    var bod = $('body');
+                    if (!bod.hasClass('control-sidebar-open')) {
+                        bod.addClass('control-sidebar-open');
+                    } else {
+                        bod.removeClass('control-sidebar-open');
+                    }
+                });
             }
         });
 
@@ -38,6 +49,9 @@ angular
             else {
                 vm.bodyClass = '';
             }
+
+            vm.usingControlSidebar = !!toState.data.controlSidebar;
+            vm.openControlSidebar = vm.usingControlSidebar && $document.width() > 768;
         });
 
         $scope.addLogin = function () {

src/app/vault/vaultController.js

@@ -6,6 +6,7 @@
         $scope.loading = true;
         $scope.logins = [];
         $scope.favoriteCollapsed = $localStorage.collapsedFolders && 'favorite' in $localStorage.collapsedFolders;
+        $scope.folderIdFilter = undefined;
 
         if ($state.params.refreshFromServer) {
             $rootScope.vaultFolders = $rootScope.vaultLogins = null;
@@ -281,6 +282,18 @@
             });
         };
 
+        $scope.filterFolder = function (folder) {
+            $scope.folderIdFilter = folder.id;
+        };
+
+        $scope.clearFilters = function () {
+            $scope.folderIdFilter = undefined;
+        };
+
+        $scope.folderFilter = function (folder) {
+            return $scope.folderIdFilter === undefined || folder.id === $scope.folderIdFilter;
+        }
+
         function removeLoginFromScopes(login) {
             var index = $rootScope.vaultLogins.indexOf(login);
             if (index > -1) {

src/app/vault/views/vault.html

@@ -14,7 +14,7 @@
         <p>Loading...</p>
     </div>
     <div class="box box-primary" ng-class="{'collapsed-box': favoriteCollapsed}" style="margin-bottom: 40px;"
-         ng-show="vaultFolders.length && (!main.searchVaultText || favoriteLogins.length)">
+         ng-show="vaultFolders.length && folderIdFilter === undefined && (!main.searchVaultText || favoriteLogins.length)">
         <div class="box-header with-border">
             <h3 class="box-title">
                 <i class="fa fa-star"></i>
@@ -90,7 +90,8 @@
             </div>
         </div>
     </div>
-    <div class="box" ng-class="{'collapsed-box': folder.collapsed}" ng-repeat="folder in vaultFolders track by folder.id"
+    <div class="box" ng-class="{'collapsed-box': folder.collapsed}"
+         ng-repeat="folder in filteredVaultFolders = (vaultFolders | filter: folderFilter) track by folder.id"
          ng-show="vaultFolders.length && (!main.searchVaultText || folderLogins.length)">
         <div class="box-header with-border">
             <h3 class="box-title">
@@ -179,3 +180,29 @@
         </div>
     </div>
 </section>
+<aside class="control-sidebar control-sidebar-light">
+    <div class="tab-content">
+        <ul class="control-sidebar-menu">
+            <li>
+                <a href="javascript:void(0)" ng-click="clearFilters()">
+                    Clear All Filters
+                </a>
+            </li>
+        </ul>
+        <h3 class="control-sidebar-heading">
+            <i class="fa fa-folder-open"></i> Folders
+        </h3>
+        <ul class="control-sidebar-menu">
+            <li ng-repeat="folder in vaultFolders track by folder.id">
+                <a href="javascript:void(0)" ng-click="filterFolder(folder)">
+                    <i class="fa fa-check" ng-if="folder.id === folderIdFilter"></i>
+                    {{folder.name}}
+                </a>
+            </li>
+        </ul>
+        <h3 class="control-sidebar-heading">
+            <i class="fa fa-tags"></i> Tags
+        </h3>
+        <p>Coming soon...</p>
+    </div>
+</aside>

src/app/views/organizationLayout.html

@@ -13,6 +13,9 @@
         <div class="navbar-custom-menu">
             <ul class="nav navbar-nav">
                 <li><a ui-sref="frontend.logout">Log Out</a></li>
+                <li class="control-sidebar-show">
+                    <a href="#" id="control-sidebar"><i class="fa fa-bars"></i></a>
+                </li>
             </ul>
         </div>
     </nav>

src/app/views/userLayout.html

@@ -13,6 +13,9 @@
         <div class="navbar-custom-menu">
             <ul class="nav navbar-nav">
                 <li><a ui-sref="frontend.logout">Log Out</a></li>
+                <li class="control-sidebar-show">
+                    <a href="#" id="control-sidebar"><i class="fa fa-bars"></i></a>
+                </li>
             </ul>
         </div>
     </nav>

src/index.html

@@ -26,7 +26,9 @@
     <link rel="stylesheet" href="css/vault.css" />
     <!-- @endexclude -->
 </head>
-<body ng-controller="mainController as main" class="layout-boxed skin-blue sidebar-mini {{main.bodyClass}}">
+<body ng-controller="mainController as main" class="layout-boxed skin-blue sidebar-mini {{main.bodyClass}}"
+      ng-class="{'using-control-sidebar': main.usingControlSidebar, 
+      'control-sidebar-open': main.usingControlSidebar && main.openControlSidebar}">
     <div ui-view></div>
 
     <!-- @if true !>

src/less/vault.less

@@ -4,6 +4,7 @@
 
 @boxed-layout-bg-image-path: "../images/boxed-bg.png";
 @yellow: #bf7e16;
+@footer-height: 51px;
 
 body {
     background-color: @gray;
@@ -71,6 +72,65 @@ h1, h2, h3, h4, h5, h6,
     }
 }
 
+.control-sidebar {
+    height: ~"calc(100% - @{footer-height})";
+    position: absolute;
+
+    @media (max-width: @screen-sm) {
+        padding-top: @navbar-height;
+    }
+
+    @media (max-width: @screen-xs-max) {
+        padding-top: @navbar-height + 50px;
+    }
+}
+
+.control-sidebar-heading {
+    padding: 0;
+    margin: 10px 0 10px 0;
+}
+
+.control-sidebar-menu {
+    li a {
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+
+    li.active a {
+        background-color: @component-active-bg;
+    }
+}
+
+.control-sidebar-open {
+    @media (min-width: @screen-sm) {
+        .main-footer {
+            margin-right: 0;
+        }
+    }
+}
+
+.control-sidebar-show {
+    display: none !important;
+}
+
+.using-control-sidebar {
+    .control-sidebar-show {
+        display: block !important;
+    }
+
+    .control-sidebar-hidden {
+        display: none !important;
+    }
+}
+
+.control-sidebar-bg {
+    height: 100%;
+    position: absolute;
+}
+
+.main-footer {
+    height: @footer-height;
+}
 
 form div.validation-errors ul {
     margin-bottom: 0;