angularProject/app/views/app-root.html

<div class="app-root" ng-controller="AppRootController" ng-class="isOpenMenu?'open-menu' : 'close-menu'" ng-init="load()">
  <div class="header-line">
    <!-- Fixed elements -->
    <nav-menu toggle-menu="toggleMenu()" ng-class="isOpenMenu?'open-menu' : 'close-menu'"></nav-menu>
    <div ng-click="toggleMenu()" class="overlay" ng-class="{'overlay-active': isOpenMenu}"></div>
    <div class="overlay2"></div>
    <selected-meals meals="meals"></selected-meals>
    <div class="preload-screen">
      <img src="content\images\preloader\Double Ring-1s-200px.gif">
    </div>
    <div class="selected-meals-btn" ng-click="openSelectedMeals()" ng-show="isShowMealsBtn()">
      <span>{{selectedNumber}}</span>
      <span class="selected-meals-tip">BAG</span>
    </div>
    <a ng-click="goToShoppingCart()" class="shopping-cart-icon">
      <span class="fa fa-shopping-cart"></span>
    </a>
    <div ng-if="!isUserSigned" class="login-btn" ng-click="openPopup()">
      <span class="fa fa-sign-in"></span>
      Login
    </div>
    <div ng-if="isUserSigned" class="sign-out-btn" ng-click="signOut()">
      <span class="fa fa-sign-in"></span>
      Sign out
    </div>
    <div class="login-popup">
      <div class="cancel" ng-click="cancelPopup()">
        <span class="fa fa-times"></span>
      </div>
      <div class="login-popup-wrapper">
        <div class="btns">
          <button type="button" ng-class="{'btn-active': isLoginActive}" ng-click="isLoginActive = true">login</button>
          <button type="button" ng-class="{'btn-active': !isLoginActive}" ng-click="isLoginActive = false">register</button>
        </div>
        <div class="content">
          <div class="login" ng-if="isLoginActive">
            <form ng-submit="signInUser()" novalidate name="loginForm">
              <input type="email" placeholder="Email" ng-model="signInUserObj.email" ng-required="true" name="email">
              <span ng-if="loginForm.email.$invalid && loginForm.email.$touched">Enter a valid email</span>
              <input type="password" placeholder="Password" ng-model="signInUserObj.password" ng-required="true" name="password">
              <input type="submit" value="login">
            </form>
          </div>
          <div class="register" ng-if="!isLoginActive">
            <form ng-submit="createNewUser()" novalidate name="registerForm">
              <input type="email" placeholder="Email" ng-model="newUserObj.email" ng-required="true" name="email">
              <span ng-if="registerForm.email.$invalid && registerForm.email.$touched">Enter a valid email</span>
              <input ng-change="onPasswordInput()" ng-class="{'invalid': passwordErrorMessage && isShortPassword}" type="password" placeholder="Create a password" ng-model="newUserObj.password" name="password" ng-required="true">
              <span ng-if="passwordErrorMessage && isShortPassword">{{passwordErrorMessage}}</span>
              <!-- <input type="password" placeholder="Confirm your password">
              <input type="text" placeholder="Your phone number"> -->
              <input type="submit" value="register">
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- Fixed elements -->
    <i class="fa fa-bars" ng-click="toggleMenu()"></i>
    <div class="logo">
      Master Kitchen
    </div>
    <div class="undefined-btn"></div>
  </div>
    <main ng-view></main>
</div>