<div class="nav_bar">
    <div class="nav_list-wrap">
        <div class="nav_hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <nav class="nav_list">
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Catalog</a></li>
                <li><a href="#">contact</a></li>
                <li><a href="#">Some shit</a></li>
            </ul>
        </nav>
    </div>
    <div class="nav_logo"></div>
    <div class="nav_search">
        <span class="nav_search-placeholder">Search</span>
        <input type="text" name="search" id="search" class="search_item" readonly/>
        <label for="search"></label>
    </div>
    <div class="nav_menu">
        <span class="menu_circle"></span>
        <span class="menu_circle"></span>
        <span class="menu_circle"></span>
    </div>
</div>

*{
  box-sizing: border-box;
  &:before,&:after {
    box-sizing: border-box;
  }
}
html,body {height: 100%;}
body {
  margin: 0;
  overflow: hidden;
  background-color: #555;
	font-family: 'Open Sans', sans-serif;
}
.nav {
  &_bar {
		position: relative;
		width: 350px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.3);
  }
  &_list {
    position: fixed;
    top: 60px;
    left: 0;
    height: calc(~"100% - 60px");
    width: 300px;
    background-color: #fff;
    border-top: 2px solid #555;
    text-align: center;
    white-space: nowrap;
    padding: 20px 0;
    transition: all .3s ease;
    transform: translateX(-300px);
    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      li {
        width: 100%;
        padding: 10px 0;
      }
      a {
        text-decoration: none;
        color: #da7fa2;
      }
    }
    &-wrap {
      float: left;
      margin-top: 20px;
    }
  }
  &_logo {

  }
  &_search {
    position: relative;
    height: 60px;
    float: left;
    padding-right: 30px;
    width: calc(~"100% - 40px");
    transition: all .3s ease;

    > input[type='text'] {
      float: right;
      height: 22px;
      width: 22px;
      margin-top: 13px;
      padding-left: 15px;
      border: 2px solid #da7fa2;
      border-radius: 15px;
      transition: all .3s ease;
      cursor: pointer;
      &:hover,&:focus,&:active {
        outline: 0;
      }
      + label {
        position: absolute;
        right: 30px;
        bottom: 15px;
        height: 12px;
        width: 2px;
        background-color: #da7fa2;
        cursor: pointer;
        transform: rotate(-40deg);
        transition: all .3s ease;
        &:after {
          content: '';
          position: absolute;
          height: 12px;
          width: 2px;
          background-color: inherit;
          top: 0;
          left: 0;
        }
      }
    }

    &-placeholder {
      position: absolute;
      top: 21px;
      left: 10px;
      width: 0;
      color: #da7fa2;
      font-size: 14px;
      text-transform: uppercase;
      overflow: hidden;
      white-space: nowrap;
      transition: all .3s ease;
    }
  }
  &_menu {
    position: absolute;
    top: 17px;
    right: 10px;
    height: 25px;
    width: 10px;

    .menu_circle {
      position: absolute;
      left: 3px;
      height: 4px;
      width: 4px;
      border-radius: 50%;
      background-color: #da7fa2;
      transition: all .2s ease;

      &:first-child {
        top: 0;
      }
      &:nth-child(2) {
        top: 11px;
      }
      &:last-child {
        bottom: 0;
      }
    }
  }
  &_hamburger {
    position: relative;
    left: 8px;
    height: 20px;
    width: 25px;
    cursor: pointer;

    > span {
      position: absolute;
      height: 3px;
      width: 25px;
      background-color: #da7fa2;

      &:first-child {
        top: 0;
        transition: all .2s ease .2s
      }
      &:nth-child(2) {
        top: 9px;
        transition: all .2s ease .1s;
      }
      &:last-child {
        top: 18px;
        transition: all .2s ease;
      }
    }
  }
}
// @media screen and (min-width: 768px) {
//   .nav {
//     &_hamburger {
//       display: none;
//     }
//     &_list {
//       position: static;
//       height: auto;
//       width: auto;
//       transform: none;
//       padding: 0;
//       border-top: 0;
//       ul {
//         font-size: 0;
//         li {
//           line-height: 60px;
//           font-size: 16px;
//           display: inline-block;
//           width: auto;
//           padding: 0 15px;
//         }
//       }

//       &-wrap {
//         margin-top: 0;
//       }
//     }
//     &_search {
//       margin-right: 20px;
//       float: right;
//       width: 300px;
//     }
//   }
// }

.nav {
  &_bar {
    &.active {
      .nav {
        &_search {
          padding-right: 0;
          > input[type='text'] {
            width: 100%;
            height: 32px;
            border-radius: 16px;
            + label {
              right: 17px;
              bottom: 25px;
              transform: rotate(135deg);
              &:after {
                transform: rotate(-90deg);
              }
            }
          }
          &-placeholder {
            width: 53px;
            transition: all .2s ease .2s;
          }
        }
        &_hamburger {
          span {
            width: 0;
            &:first-child {
              transition: all .2s ease;
            }
            &:nth-child(2) {
              transition: all .2s ease .1s;
            }
            &:last-child {
              transition: all .2s ease .2s;
            }
          }
        }
      }
      .menu_circle {
        height: 0;
        width: 0;

        &:first-child {
          transition: all .2s ease;
        }
        &:nth-child(2) {
          transition: all .2s ease .1s;
        }
        &:last-child {
          transition: all .2s ease .2s;
        }
      }

    }
  }
  &_list {
    &.open {
      transform: none;
    }
  }
}

var $navWrap = $('.nav_bar');
var $searchItem = $navWrap.find('.search_item');
var $hamburger = $navWrap.find('.nav_hamburger');
var $sidebar = $navWrap.find('.nav_list');

$searchItem.on('click', function() {
    $navWrap.toggleClass('active');
});

$hamburger.on('click', function() {
    $sidebar.toggleClass('open');
});