<header>
  <span class="menu"><i class="material-icons">menu</i></span>
</header>
<section class="main">
  <aside class="keep">
    <ul>
      <li>
        <a href="/">
          <span><i class="material-icons">location_on</i></span>
           Location
          <span class="notif red">1</span>
        </a>
      </li>      
      <li>
        <a href="/">
          <span><i class="material-icons">stay_current_portrait</i></span>
           App Menu
          <span class="notif yellow">2</span>
        </a>
      </li>
      <li>
        <a href="/">
          <span><i class="material-icons">event</i></span>
           event
          <span class="notif green">6</span>
        </a>
      </li>      
      <li>
        <a href="/">
          <span><i class="material-icons">local_offer</i></span>
           Offer
        </a>
      </li>
      <li>
        <a href="/">
          <span><i class="material-icons">photo</i></span>
           photo
        </a>
      </li>      
      <li>
        <a href="/">
          <span><i class="material-icons">import_contacts</i></span>
           contacts
        </a>
      </li>
      <li>
        <a href="/">
          <span><i class="material-icons">event</i></span>
           event
        </a>
      </li>      
      <li>
        <a href="/">
          <span><i class="material-icons">restaurant_menu</i></span>
           Restaurant
        </a>
      </li>      
      <li>
        <a href="/">
          <span><i class="material-icons">textsms</i></span>
           textsms
        </a>
      </li>      
      <li>
        <a href="/">
          <span><i class="material-icons">receipt</i></span>
           Receipt
        </a>
      </li>
    </ul>
  </aside>
  <article>
    
  
    
  </article>
</section>

*{
  margin:0px;
  padding:0px;
}
body{
  background: url(https://www.toptal.com/designers/subtlepatterns/patterns/sayagata-400px.png);
  font-family: 'Signika', sans-serif;
  font-size:21px;
}
header {
  background: #fff;
  padding: 10px 20px;
  box-shadow: 0px -8px 25px #6d6d6d;       position: fixed;
  top: 0;
  left: 0;
  width: 100%;    
  z-index: 991;
}
.menu{
  display:inline-block;
  cursor: pointer;
}
.main {
  position: relative;
  top: 50px;
  padding-top: 20px;
}
aside {
  width: 60px;
  background: #fff;
  padding: 0px 0px 10px 0px;
  position: absolute;
  left: 0;
  top: 0px;
  height: 100%;
  box-shadow: 0px 3px 5px #6d6d6d;
  overflow: hidden;
  z-index: 99;
}
aside ul {
  list-style: none;
  width: 100%;
}
aside ul li {
  border-bottom: 1px solid #ccc;
  padding: 10px 20px;
  position: relative;
}
aside ul li a {
  font-size: 14px;
  color: #4a4a4a;
  text-decoration: none;
  text-transform:uppercase;   
  white-space: nowrap;
  display: inline-block;
}
aside ul li a span {
  display: inline-block;
  vertical-align: middle;
  color: #000000;
  width: 38px;
}
article {
  background: #fff url(https://assets.materialup.com/uploads/d95ac945-ae5b-444c-a21e-2dab7348fcb5/preview.gif);
  background-size: ;
  width: 92%;
  height: 100vh;
  margin-left: 7%;
  border-radius: 5px;
  box-shadow: 0px 2px 7px #6d6d6d;
}
aside ul li:hover {
  background: #fff;
  box-shadow: inset 0px 0px 77px #dedede;
}
aside ul li a span.notif {
  position: absolute;
  top: 8px;
  text-align: center;
  width: 30px;
  height: 30px;
  right: 10px;
  background: #343436;
  line-height: 31px;
  border-radius: 100%;
  color: #fff;
}
.red {
  background: #e74c3c !important;         box-shadow: 0px 0px 10px #e74c3c;
}
.yellow {
  background: #f1c40f !important;         box-shadow: 0px 0px 10px #f1c40f;
}
.green {
  background: #27ae60 !important;
  box-shadow: 0px 0px 10px #27ae60;
}
aside ul li a span.notif.green {
    width: 10px;
    height: 10px;
    color: transparent;
    right: 5px;    
    transition: all 0.2s ease;
}
aside ul li a span.notif.yellow  {
    width: 10px;
    height: 10px;
    color: transparent;
    right: 5px;
    transition: all 0.2s ease;
}
aside ul li a span.notif.red  {
    width: 10px;
    height: 10px;
    color: transparent;
    right: 5px;
    transition: all 0.2s ease;
}
aside ul li:hover a span.notif.red {
    width: 30px;
    height: 30px;
    right: 15px;
    color: #fff;
    box-shadow: 0px 0px 60px #e74c3c;
    top: 10px;
}
aside ul li:hover a span.notif.yellow{
    width: 30px;
    height: 30px;
    right: 15px;
    color: #fff;
    box-shadow: 0px 0px 60px #f1c40f;
    top: 10px;
}
aside ul li:hover a span.notif.green{
    width: 30px;
    height: 30px;
    right: 15px;
    color: #fff;
    box-shadow: 0px 0px 60px #27ae60;
    top: 10px;
}
aside.keep.width {
    width: 200px;
}
aside.keep.width ul li a span.notif {
    width: 30px;
    height: 30px;
    right: 10px;
    color: #fff;
    box-shadow: 0px 0px 10px transparent;
    top: 8px;
}
/*  */
@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
  text-decoration: blink;
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-direction: alternate;
}
p.blink.mah {
  text-align: center;
  line-height: 25;
  position:relative;
}
p.blink.mah span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 102, 153, 0);
  top: 248px;
  left: 360px;
}
/*  */

$(document).ready(function(){
    $(".menu").click(function(){
        $(".keep").toggleClass("width");
    });
});