@mixin sid-nav-theme() {
  app-side-nav {
    nav {
      //   width: 100px;
      height: 100%;
      background-color: $main-color;
      // border-radius: 20px;
      padding-top: 10px;
      position: relative;
      ul {
        list-style: none;
        color: $white-color;
        padding: 20px 20px;
        margin-top: 2rem;
        li {
          border-bottom: 1px solid $white-color;
          width: 100%;
          padding-bottom: 10px;
          cursor: pointer;
          &:hover {
            color: $light-blue;
          }
          &:last-child {
            border-bottom: 0;
          }
          a {
            color: $white-color;
            text-decoration: none;
            transition: all 0.5s;
            &:hover {
              color: $light-blue;
            }
          }
          span {
            font-size: 15px;
          }
        }
      }

      .active {
        color: $light-blue;
      }

      .nav-img {
        width: 20px;
        height: 20px;
        object-fit: cover;
        cursor: pointer;
      }
    }
  }
}