@import "../../_base";

.menu {
  position: fixed;
  z-index: 10;
  flex-grow: 1;
  width: rem(0);
  height: 100%;
  background: white;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
  transition: 500ms;

  &.show {
    width: rem(80);
  }

}

.btn {
  position: absolute;
  top: 0;
  right: rem(-40);
  width: rem(40);
  height: rem(40);
  outline: none;

  span {
    position: absolute;
    top: rem(8);
    right: 0;
    left: 0;
    height: 1px;

    font-size: 0;
    background: #000;

    &.middle {
      top: rem(20);
    }

    &.bottom {
      top: rem(32);
    }
  }
}

.logo {
  width: 100%;
  height: rem(40);
  background: url(./image/logo.png) no-repeat center center;
  background-size: 100% auto;
}

.nav {
  width: 100%;
  overflow: hidden;
  font-size: rem(12);

  a {
    display: block;
    width: 100%;
    height: rem(40);
    font-size: 0;
  }

  .analyze {
    background: url(./image/analyze.png) no-repeat center center;
    background-size: 30% auto;
  }

  .report {
    background: url(./image/report.png) no-repeat center center;
    background-size: 30% auto;
  }

  .collect {
    background: url(./image/collect.png) no-repeat center center;
    background-size: 30% auto;
  }
}