fix sticky menu for collapsed sidebar

Author: jaroldwong

app/budget/BudgetCtrl.html

@@ -135,25 +135,27 @@
       </download-budget-scenarios>
     </ipa-modal>
 
-    <budget-scenario-toolbar
-      state="view.state"
-      is-deans-office="isDeansOffice"
-      class="do-not-print"
-    ></budget-scenario-toolbar>
-
-    <budget-nav
-      class="budget-view__nav-container"
-      total-balance="view.state.selectedBudgetScenario.summary.totalBalance"
-      selected-section="view.state.ui.sectionNav.activeTab"
-      selected-budget-scenario="view.state.selectedBudgetScenario"
-      selected-line-items="view.state.ui.selectedLineItems"
-      selected-expense-items="view.state.ui.selectedExpenseItems"
-      filters="view.state.ui.filters"
-      funds-nav="view.state.ui.fundsNav.activeTab"
-      should-show-course-list="view.state.ui.shouldShowCourseList"
-      current-user="currentUser"
-    >
-    </budget-nav>
+    <div class="budget-view__menu" ng-class="{'budget-view__menu--collapsed': isSidebarCollapsed}">
+      <budget-scenario-toolbar
+        state="view.state"
+        is-deans-office="isDeansOffice"
+        class="do-not-print"
+      >
+      </budget-scenario-toolbar>
+      <budget-nav
+        class="budget-view__nav-container"
+        total-balance="view.state.selectedBudgetScenario.summary.totalBalance"
+        selected-section="view.state.ui.sectionNav.activeTab"
+        selected-budget-scenario="view.state.selectedBudgetScenario"
+        selected-line-items="view.state.ui.selectedLineItems"
+        selected-expense-items="view.state.ui.selectedExpenseItems"
+        filters="view.state.ui.filters"
+        funds-nav="view.state.ui.fundsNav.activeTab"
+        should-show-course-list="view.state.ui.shouldShowCourseList"
+        current-user="currentUser"
+      >
+      </budget-nav>
+    </div>
 
     <div class="page-content">
       <budget-summary

app/budget/budget.css

@@ -6,6 +6,18 @@
   margin-bottom: 10px;
 }
 
+.budget-view__menu {
+  position: fixed;
+  top: 115px;
+  left: 200px;
+  width: calc(100% - 200px);
+}
+
+.budget-view__menu--collapsed {
+  left: 65px;
+  width: calc(100% - 65px);
+}
+
 .budget-view__course-costs-container {
   margin-bottom: 30px;
 }

app/budget/budgetCtrl.js

@@ -42,6 +42,11 @@ class BudgetCtrl {
     this.$scope.currentUser = _self.AuthService.getCurrentUser();
     this.$scope.isDeansOffice = _self.AuthService.getCurrentUser().isDeansOffice();
 
+    this.$scope.isSidebarCollapsed = _self.AuthService.isSidebarCollapsed();
+    this.$rootScope.$on('sidebarStateToggled', function (event, isSidebarCollapsed) {
+      _self.$scope.isSidebarCollapsed = isSidebarCollapsed;
+    });
+
     this.$rootScope.$on("budgetStateChanged", function(event, data) {
       _self.$scope.view.state = data;
 

app/budget/directives/budgetNav/budgetNav.css

@@ -1,10 +1,6 @@
 .budget-nav {
 	display: flex;
 	justify-content: space-between;
-	position: fixed;
-	top: 161px;
-	left: 200px;
-	width: calc(100vw - 200px);
 	background-color: #F8F8F8;
 	border: 1px solid #e3e3e3;
 	border-radius: 0;

app/budget/directives/budgetScenarioToolbar/budgetScenarioToolbar.css

@@ -1,17 +1,11 @@
 .budget-scenario-toolbar {
 	width: 100%;
+	height: 4em;
 	display: flex;
-	margin-bottom: 20px;
 	justify-content: space-between;
 
-	position: fixed;
-	top: 146px;
-	left: 200px;
-	width: calc(100% - 200px );
-	margin-top: -30px;
-	padding: 10px 20px;
+	padding: 10px 14px;
 	background-color: #fff;
-	border-bottom: 1px solid #e3e3e3;
 	z-index: 34;
 }