navbar.css

.navbar {
  display: block;
  float: left;
  position: relative;
  background: #F7F7F7;
  border-right: 1px solid #e5e5e5;
  height: 100%;
  min-height: 100%;
  width: 55px;
  margin-top: 50px;
  overflow: hidden;

  -o-transition: width .2s linear;
  -moz-transition: width .2s linear;
  -webkit-transition: width .2s linear;
  transition: width .2s linear;
  -ms-transform: translateZ(0) scale(1,1);
  -o-transform: translateZ(0) scale(1,1);
  -moz-transform: translateZ(0) scale(1,1);
  -webkit-transform: translateZ(0) scale(1,1);
  transform: translateZ(0) scale(1,1);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.07);
  opacity:1;
}

.navbar:hover {
  width:250px;
  height: 100%;
  overflow:hidden;
  opacity:1;
}

.navbar .navbar__logo {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 240px;
  overflow: hidden;
}

.navbar .navbar__logo a {
  height: 100%;
  min-height: 50px;
  width: 100%;
}

.navbar .navbar__logo img {
  position: relative;
  float: left;
  display: inline-block;
  width: 36px;
  height: 36px;
  /*padding: 7px;*/
  text-align: center;
  vertical-align: middle;
}

.navbar .navbar__logo .navbar__logo__text {
  position: relative;
  float: right;
  display: inline-block;
  vertical-align: middle;
  height: 36px;
  width: 175px;
  /*padding: 7px;*/
  font-family: 'Titillium Web', sans-serif;
  font-size: 18px;
  color: #959595;
}

.navbar .navbar__toggle {
  position: relative;
  top: 10px;
  left: 10px;
}

.navbar .navbar__list {
  max-width: 250px;
  min-width: 55px;
  float: left;
  list-style: none;
  margin-bottom: 2em;
  padding: 0 0 0.5em;
  overflow: hidden;
}

.navbar:hover .navbar__list {
  display: table;
  width: 100%;
}

/*.navbar .navbar__list[aria-expanded=true] {
  display: inherit;
  width: 250px;
}*/

.navbar .navbar__item {
  position: relative;
  display: table;
  width: 100%;
}

.navbar .navbar__item + .navbar__item {
  margin-left: 0;
}

.navbar .navbar__item:hover,
.navbar .navbar__item:active {
  background-color: #eceeef;
}

.navbar .navbar__item:hover .nav__item__icon,
.navbar .navbar__item:hover .nav__item__text,
.navbar .navbar__item:active .nav__item__icon,
.navbar .navbar__item:active .nav__item__text {
  color: rgb(163, 163, 163);
}

.navbar .nav__item__link {
  position: relative;
  height: 36px;
  width: 255px;
  display: table-row;
  border-collapse: collapse;
  border-radius: 0;
  border-spacing :0;
  color :#959595;
  font-size: 14px;
  text-decoration: none;

  -ms-transform: translateZ(0) scale(1,1);
  -o-transform: translateZ(0) scale(1,1);
  -moz-transform: translateZ(0) scale(1,1);
  -webkit-transform: translateZ(0) scale(1,1);
  transform: translateZ(0) scale(1,1);
  -o-transition: all .14s linear;
  -moz-transition: all .14s linear;
  -webkit-transition: all .14s linear;
  transition: all .14s linear;
  font-family: 'Strait', sans-serif;
  box-shadow: inset 0 1px 1px #FAFAFA;
  overflow: hidden;
}

.navbar .navbar__item__icon {
  position: relative;
  display: table-cell;
  width: 55px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 24px;
  color: #959595;
}

.navbar .navbar__item__text {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  height: 36px;
  width: 175px;
  font-family: 'Titillium Web', sans-serif;
  color: #959595;
}

navbar.tpl.html

<nav>
  <!-- <a
    href="#"
    class="navbar__toggle"
    aria-expanded="false"
    aria-controls="navbar__list"
    aria-label="Toggle navigation"
    ng-click="$ctrl.onMenuButtonClick($event)">
      Menu
  </a> -->

  <div class="navbar__logo">
    <a ui-sref="home">
      <img src="{{$ctrl.logo}}">
      <span class="navbar__logo__text">{{ $ctrl.title }}</span>
    </a>
  </div>

  <ul class="navbar__list">
    <li class="navbar__item" ui-sref-active="active">
      <a class="navbar__item__link" ui-sref="home">
        <i class="fa fa-home navbar__item__icon"></i>
        <span class="navbar__item__text"> Home</span>
      </a>
    </li>
    <li class="navbar__item" ui-sref-active="active">
      <a class="navbar__item__link" ui-sref="about">
        <i class="fa fa-align-left navbar__item__icon"></i>
        <span class="navbar__item__text"> About</span>
      </a>
    </li>
    <li class="navbar__item" ui-sref-active="active">
      <a class="navbar__item__link" ui-sref="view1">
        <i class="fa fa-pencil navbar__item__icon"></i>
        <span class="navbar__item__text"> View 1</span>
      </a>
    </li>
    <li class="navbar__item" ui-sref-active="active">
      <a class="navbar__item__link" ui-sref="view2">
        <i class="fa fa-gears navbar__item__icon"></i>
        <span class="navbar__item__text"> View 2</span>
      </a>
    </li>
  </ul>
</nav>