<nav>
  <div class="menu">
    <i class="fa fa-bars" id="hamburger-menu" aria-hidden="true"></i>
    <ul class="menu-list">
      <li><a href=""><i class="fa fa-tachometer fa-fw" aria-hidden="true"></i> Dashboard</a></li>
      <li><a href=""><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i> Sales</a></li>
      <li><a href=""><i class="fa fa-user fa-fw" aria-hidden="true"></i> Customer</a></li>
      <li><a href=""><i class="fa fa-tachometer fa-fw" aria-hidden="true"></i> Market</a></li>
      <li><a href=""><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i> Feedback</a></li>
    </ul>
   
  </div>
  <div class="nav-search">
  <i class="fa fa-search" aria-hidden="true"></i>
  <input type="search" placeholder="Search"/>
    </div>
  <div class="menu-right">
  <ul class="menu-list">
    <li><a href=""><i class="fa fa-bell" aria-hidden="true"></i><span class="notification-number">99</span></a></li>
    <li><a href=""><i class="fa fa-tachometer" aria-hidden="true"></i></a></li>
    <li><a href=""><i class="fa fa-volume-down" aria-hidden="true"></i></a></li>
    <li><a href=""><i class="fa fa-power-off" aria-hidden="true"></i></a></li>
    </ul>
  </div>
</nav>

$nav-bg: #333366;
$nav-color: #8395AF;

nav{
  background-color: $nav-bg;
  width:100%;
  height: 35px;
  padding: 5px 0;
  display:block;
  position:relative;
  z-index:99;
  }
#hamburger-menu{
  color: $nav-color;
  vertical-align:middle;
  display:inline-block;
  transition: .1s;
  cursor: pointer;
  &:hover{
    color: lighten($nav-color, 50%);
  }
}
%menu{
  background-color: $nav-bg;
  position:relative;
  display:inline-block;
  z-index:10;
  height:30px;
  padding: 5px 20px;
}
.menu{
  @extend %menu;
}
.menu-right{
  @extend %menu;
  float:right;
}
.menu-list{
  list-style: none;
  display:inline-block;
  padding:0;
  margin:0 0 0 20px;
  color: $nav-color;
  position:relative;
  li{
    display: inline-block;
    margin: 0 12px;
    vertical-align: middle;
    a{
      color: #8395AF;
      text-decoration: none;
      transition: .1s;
      &:hover{
        color: #fff;
      }
    }
  }
}

.nav-search{
  display:inline-block;
  position:absolute;
  z-index:1;
  left:0;
  width:100%;
  i{
    position:absolute;
    color: lighten($nav-color, 10%);
    left:655px;
    z-index: 5;
    padding:8px 15px;
  }
  input{
  height:35px;  
    box-shadow: none;
  border: 0;
    border-radius: 3px;
    width:calc(100% - 900px);
    position:absolute;
    background-color: #485D82;
    padding: 10px 10px 10px 40px;
    color: lighten($nav-color, 30%);
    margin-left: 660px;
    &::placeholder{
      color: lighten($nav-color, 10%);
      opacity:1;
    }
  }
}

.notification-number{
  position:absolute;
  font-size:12px;
  font-weight:600;
  color: lighten($nav-color, 30%);
  top:-2px;
}