Merge pull request child-first-authority-fcc-project#420 from dting/C…

…hangeFromIsCollapsedToExpandedInSidebar

Reverse the starting state of the sidebar

client/app/main/visualization/visualization.controller.js

@@ -47,7 +47,7 @@ function VisualizationCtrl($scope, $timeout, School, Sidebar, Visualization) {
   });
   // Timeout used to redraw the chart after animation delay of resizing the
   // sidebar.
-  $scope.$watch('sidebar.isCollapsed', function() {
+  $scope.$watch('sidebar.expanded', function() {
     $timeout(function() {
       if ($scope.loaded) {
         $scope.cfaChartObj.reflow();

client/components/navbar/navbar.html

@@ -6,7 +6,7 @@
       ng-if="showSidebarToggle()"
       ng-click="sidebar.toggle()">
       <span class="sr-only">Toggle sidebar menu</span>
-      <i class="fa fa-bars fa-lg" ng-class="{'fa-rotate-90': sidebar.isCollapsed}"></i>
+      <i class="fa fa-bars fa-lg" ng-class="{'fa-rotate-90': !sidebar.expanded}"></i>
     </button>
     <a ui-sref="dashboard" class="navbar-brand">Child First Authority</a>
     <button class="navbar-toggle"

client/components/sidebar/sidebar.controller.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('app').controller('SidebarCtrl',
-  function($scope, $state, $window, Auth, Sidebar, matchmedia) {
+  function($scope, $state, Auth, Sidebar, matchmedia) {
     $scope.states = [{
       name: 'dashboard',
       url: 'dashboard',

client/components/sidebar/sidebar.directive.js

@@ -11,7 +11,7 @@ app.directive('sidebar', function(matchmedia) {
     link: function(scope) {
       function collapseSidebar(mediaQueryList) {
         if (mediaQueryList.matches) {
-          scope.sidebar.isCollapsed = true;
+          scope.sidebar.expanded = false;
         }
       }
       var maxCleanup = matchmedia.on('(max-width: 1200px)', collapseSidebar);

client/components/sidebar/sidebar.html

@@ -1,4 +1,4 @@
-<ul class="sidebar-nav nav-pills nav-stacked" ng-class="{isCollapsed: sidebar.isCollapsed}">
+<ul class="sidebar-nav nav-pills nav-stacked" ng-class="{expanded: sidebar.expanded}">
   <li ng-repeat="state in states"
     ng-class="{active: active(state.name)}"
     ng-if="!state.requiredRole || userIs(state.requiredRole)">

client/components/sidebar/sidebar.scss

@@ -15,13 +15,13 @@ sidebar {
   flex: 1;
   background-color: $teal;
   background: linear-gradient(to right, $teal-d05, $teal);
-  width: 250px;
+  width: $cfa-unit;
   margin: 0;
   padding: 0;
   list-style: none;
   overflow-y: auto;
-  &.isCollapsed {
-    width: $cfa-unit;
+  &.expanded {
+    width: 250px;
   }
   li {
     overflow: hidden;
@@ -59,15 +59,12 @@ sidebar {
       }
       a:hover {
         background-color: $orange-l10;
-
       }
     }
   }
   transition: all 0.5s ease;
   @media(max-width: 1200px) {
-    &.isCollapsed {
-      width: 0;
-    }
+    width: 0;
   }
   @include cfa-scrollbar(1px, 0, $teal, $teal-d05);
 }

client/components/sidebar/sidebar.service.js

@@ -1,13 +1,8 @@
 'use strict';
 
-angular.module('app').factory('Sidebar', function() {
-  function Sidebar() {
-    this.isCollapsed = true;
-  }
-
-  Sidebar.prototype.toggle = function() {
-    this.isCollapsed = !this.isCollapsed;
+angular.module('app').service('Sidebar', function() {
+  this.expanded = false;
+  this.toggle = function() {
+    this.expanded = !this.expanded;
   };
-
-  return new Sidebar();
 });

client/components/sidebar/sidebar.service.spec.js

@@ -16,13 +16,13 @@ describe('Service: SidebarService', function() {
     sidebar = _Sidebar_;
   }));
 
-  it('should be created with isCollapsed true', function() {
-    expect(sidebar.isCollapsed).toBe(true);
+  it('should be created with expanded false', function() {
+    expect(sidebar.expanded).toBe(false);
   });
 
-  it('should toggle isCollapsed when toggle() is called', function() {
-    expect(sidebar.isCollapsed).toBe(true);
+  it('should toggle expanded when toggle() is called', function() {
+    expect(sidebar.expanded).toBe(false);
     sidebar.toggle();
-    expect(sidebar.isCollapsed).toBe(false);
+    expect(sidebar.expanded).toBe(true);
   });
 });