@mixin nav-setup-normal($color, $nav-style, $yiq-text-color) {

.nav {
  display: block;

  .caret {
    top: 14px;
    position: absolute;
    right: 10px;
  }

  li {
    >a+div .nav {
      margin-top: 5px;

      li>a {
        margin-top: 0px;
        padding: 2px 8px;
      }
    }

    >a {
      margin: 10px 15px 0;
      border-radius: $btn-round-radius;

      @if($nav-style=='normal') {
        color: $color !important;
      }

      @if($nav-style=='grey') {
        color: $yiq-text-color !important;
      }

      display: block;
      text-decoration: none;
      position: relative;
      text-transform: uppercase;
      cursor: pointer;
      font-size: $font-size-sm !important;
      line-height: $line-height-lg;
      padding: 2px 8px;
    }

    &:first-child>a {
      margin: 0 15px;
    }

    &:last-child>a {
      margin: 0 15px;
    }

    &:hover:not(.active)>a,
    &:focus:not(.active)>a {

      p,
      i {
        color: $color;
      }
    }

    &:hover:not(.active)>a i,
    &:focus:not(.active)>a i {
      color: $color;
    }

    &.active>a:not([data-toggle='collapse']) {
      background: transparent;

      i,
      p {
        color: $yiq-text-color;
      }

      //  change 🤍
      &:before {

        content: ' ';
        position: absolute;
        height: 100%;
        width: 6px;
        top: 0px;
        left: -10px;
        background: $color;
        border-radius: 5px;
      }
    }

    &.active>a[data-toggle='collapse'] {
      background: transparent;
      box-shadow: none;
      color: $color;

      i {
        color: $color;
      }

      &+div .nav .active a {
        box-shadow: none;

        .sidebar-mini-icon,
        .sidebar-normal {
          color: $color;
          font-weight: $font-weight-normal;
        }

        //  change 🤍
        &:before {
          content: ' ';
          position: absolute;
          height: 6px;
          width: 6px;
          top: 17px;
          left: -4px;
          background: $color;
          border-radius: 50%;
        }
      }

      &:before {
        content: ' ';
        position: absolute;
        height: 6px;
        width: 6px;
        top: 22px;
        left: -4px;
        background: rgba($color, 0.6);
        border-radius: 50%;
      }
    }
  }

  p {
    margin: 0;
    line-height: 30px;
    position: relative;
    display: block;
    height: auto;
    white-space: nowrap;
    @extend .animation-transition-general;
  }

  i {
    font-size: 20px;
    float: left;
    margin-right: 12px;
    line-height: 30px;
    width: 34px;
    text-align: center;

    @if($nav-style=='normal') {
      color: $opacity-8;
    }

    @if($nav-style=='grey') {
      @include text-opacity($yiq-text-color, 0.8)
    }

    position: relative;
  }
}

}