angularProject/app/controllers/appRootController.js

app.controller('AppRootController',['$scope','$window','$timeout','$location',function($scope,$window,$timeout,$location){
  var window = angular.element($window);
  $scope.load = function(){
    $timeout(function(){
      var preloader = angular.element(document.querySelector('.preload-screen'));
      preloader.css('opacity','0');
    },1700)
    $timeout(function(){
      var preloader = angular.element(document.querySelector('.preload-screen'));
      preloader.css('display','none');
    },2700)
  }

  $scope.isOpenMenu = false;
  $scope.toggleMenu = function(){
    if($scope.isOpenMenu){
      $scope.isOpenMenu = false;
    }else {
      $scope.isOpenMenu = true;
    }
  }

  $scope.selectedNumber = 0;
  $scope.meals = {};
  var ref = firebase.database().ref().child('meals');
  $scope.selectedNumber = 0;
  ref.on('value', snap => {
    $timeout(function(){
      var selectedNumber = 0;
      angular.forEach(snap.val(),function(el){
        if(el.isSelected === true){
          selectedNumber++;
        }
      })
      $scope.selectedNumber = selectedNumber;
    })
    $scope.meals = snap.val();
  })
  $scope.openSelectedMeals = function(){
    var selectedMeals = angular.element(document.querySelector('.selected-meals'));
    var appRoot = angular.element(document.querySelector('.app-root'));
    var overlay2 = angular.element(document.querySelector('.overlay2'));
    // selectedMeals.css({'transform': 'translateX(0)'})
    appRoot.css({'transform': 'translateX(-281px)'});
    overlay2.css({'pointer-events': 'auto','opacity':'1'});
    overlay2.on('click',function(){
      overlay2.css({'pointer-events': 'none','opacity':'0'});
      appRoot.css({'transform': 'translateX(0px)'});
    })
  }

  $scope.isShowMealsBtn = function(){
    if($location.path() == '/select-menu'){
      return true;
    } else{
      return false;
    }
  }
}])