@mixin nav-setup-ntf($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: 0px 5px;
      padding: 7px 5px 7px 12px;
      border-radius: $btn-round-radius;
      color: $color;
      display: block;
      text-decoration: none;
      position: relative;
      text-transform: uppercase;
      cursor: pointer;
      font-size: $font-size-sm !important;
      line-height: $line-height-lg;
    }

    &:first-child>a {
      margin: 0px 5px;
      padding: 7px 5px 7px 12px;
    }

    &:last-child>a {
      margin: 0px 5px;
      padding: 7px 5px 7px 12px;
    }

    &: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 {
        color: $color;
      }

      p {
        color: $color;
      }

      //  change 🤍
      //  this is simple link 🤍
      &:before {
        content: ' ';
        position: absolute;
        height: 100%;
        width: 12px;
        top: 0px;
        left: -12px;
        background: $color;
        border-radius: 10px;
      }
    }

    &.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;
        }

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

      //  this is sub menu toggle 🤍
      &:before {
        content: ' ';
        position: absolute;
        height: 100%;
        width: 12px;
        top: 0px;
        left: -12px;
        background: $color;
        border-radius: 10px;
      }
    }
  }

  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;
    color: $opacity-8;
    position: relative;
  }
}

}