@require '../variables.styl'

$nav-font-size = 12px;

.nav {
  position: relative
  width: 100%
  height: 100%
  box-sizing: border-box
  background: $background-color
  border-bottom: 1px solid $border-color
  padding: 20px;
  font-size: $nav-font-size;

  .menu-list {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 30px;

    .menu-item {
      float: left;
      margin-right: 20px;

      .current {
        padding-bottom: 20px;
        border-bottom: 1px solid $nav-selected-color;
      }
    }
  }


  .fold-left-side-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size 20px
    color: $a-color
  }


  .search-btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
  }

  @media screen and (max-width: $media-max-width) {
    .fold-left-side-btn {
      display: none
    }

    .menu-list {
      margin-left: 0;
    }
  }

}