@if $enable-sideNav == true {
  // SIDENAV BASE
  .c-sidenav {
    @include base-sidenav;

    &-body {
      @include sidenav-body;
    }

    &-fullscreen {
      width: 100%;
    }

    &-hidden {
      left: -($sidebar-width + 2);
      display: none;

      .c-sidenav-body {
        left: 0;
      }
    }

    &-divider {
      height: 1px;
      margin: $space-sm 0;
      background-color: $sidebar-divider-color;
    }

    &-collapse {
      @include sidenav-collapse;
    }

    @include media-breakpoint-down(sm) {
      position: fixed;
      transition: none;
      left: -($sidebar-width + 2);
    }
  }


  // SIDENAV MENU
  .c-sidenav-menu {
    @include sidenav-menu;

    &:first-child {
      margin-top: $sidebar-link-margin;
    }

    // > {
    //   .c-sidenav-menu-item > .c-sidenav-menu-link {
    //     // font-weight: bold;

    //     // if we need custom top level active color
    //     // &-active {
    //     //   background-color: #e00096;
    //     //   color: #ffffff;
    //     // }
    //   }
    // }

    .c-sidenav-menu-link {
      @include sidenav-menu-link;
    }

    .c-sidenav-menu-category {
      color: $sidebar-category-color;
      padding: $sidebar-category-padding;

      > .c-sidenav-menu-icon {
        display: none;
      }
    }

    .c-sidenav-menu-item-open {
      > .c-sidenav-menu-link {
        color: $sidebar-link-open-color;
        background-color: $sidebar-link-open-bg;
        font-weight: bold;

        .c-sidenav-menu-icon {
          color: $sidebar-icon-color-active;
        }
      }

      .c-sidenav-submenu-group {
        display: block;
      }

      .c-sidenav-submenu {
        .c-sidenav-submenu-group {
          display: none;
        }
      }
    }


    .c-sidenav-submenu {
      > {
        .c-sidenav-menu-link {
          padding-right: $space-md;
        }

        .c-sidenav-menu-link::after {
          @include caret(right);

          right: $space-md;
          position: absolute;
          vertical-align: middle;
          margin-top: $space-sm + $space-xs;
        }
      }

      &.c-sidenav-menu-item-open > .c-sidenav-menu-link::after {
        transform: rotate(90deg);
      }

      &-group {
        display: none;
        flex-wrap: wrap;
        list-style: none;
        padding-left: $space-0;
        margin-bottom: $space-0;
        background-color: $sidebar-submenu-bg;

        .c-sidenav-menu-link {
          padding-left: $sidebar-submenu-link-padding-left;

          &-active {
            color: $sidebar-submenu-link-active-color;
          }
        }

        .c-sidenav-submenu-group {
          .c-sidenav-menu-link {
            padding-left: $sidebar-submenu-level3-padding-left;
          }

          .c-sidenav-submenu-group .c-sidenav-menu-link {
            padding-left: $sidebar-submenu-level4-padding-left;
          }
        }
      }
    }
  }


  // SIDENAV FOLDED
  .c-sidenav-folded {
    left: 0;
    overflow: visible;
    width: $sidebar-width-folded;

    .c-sidenav-body {
      width: auto;
      position: static;
      overflow: visible;
    }

    .c-sidenav-user {
      &-body {
        display: none;
      }
    }

    .c-sidenav-user-dropdown {
      padding: $space-lg - $space-xs;

      span {
        display: none;
      }
    }

    .c-sidenav-menu {
      > {
        .c-sidenav-menu-item {
          margin: $space-0;
          position: relative;

          > .c-sidenav-menu-link {
            padding-left: $space-0;
            padding-right: $space-0;
            justify-content: center;

            > .c-sidenav-menu-icon {
              display: block;
              position: static;
              margin-left: $space-0;
              margin-right: $space-0;
            }

            > span {
              display: none;
            }
          }
        }

        .c-sidenav-submenu {
          > {
            .c-sidenav-submenu-group {
              top: 0;
              display: none;
              position: absolute;
              background: $sidebar-bg;
              border: $sidebar-border;
              z-index: $sidebar-z-index;
              width: $sidebar-width - 10;
              right: -($sidebar-width - 10);
              box-shadow: 0 0.5rem 1rem rgba(#000000, .07);
            }

            .c-sidenav-submenu-group[data-submenu-title]::before {
              content: attr(data-submenu-title);
              opacity: 0.5;
              display: block;
              padding: $space-md;
              padding-bottom: $space-sm;
            }

            .c-sidenav-menu-link::after {
              content: none;
            }
          }

          &:hover > .c-sidenav-submenu-group {
            display: block !important;
          }

          &:focus > .c-sidenav-submenu-group {
            display: block !important;
          }
        }

        .c-sidenav-menu-category {
          padding: $space-0;
          text-align: center;
          margin-top: $space-0;

          > .c-sidenav-menu-icon {
            @include icon-ellipsis;

            padding: $space-md;
            margin-top: $space-xs;
            margin-bottom: $space-xs;
          }

          > div {
            display: none;
          }
        }

        .c-sidenav-menu-item-open > .c-sidenav-submenu-group {
          display: none !important;
        }
      }

      .c-sidenav-submenu-group {
        .c-sidenav-menu-link {
          padding-left: $space-md;
        }

        .c-sidenav-submenu-group {
          .c-sidenav-menu-link {
            padding-left: $space-xl;
          }

          .c-sidenav-submenu-group {
            .c-sidenav-menu-link {
              padding-left: $space-xl + $space-md;
            }
          }
        }
      }
    }

    .c-sidenav-collapse {
      width: $sidebar-width-folded;

      .c-sidenav-menu-icon {
        transform: rotate(180deg);
      }
    }
  }


  // SIDENAV FIXED
  .c-layout-fixed {
    .c-sidenav:not(.c-sidenav-folded) {
      left: 0;
      bottom: 0;
      display: flex;
      overflow: auto;
      white-space: nowrap;
      width: $sidebar-width;
      flex-direction: column;
      will-change: transform;
      position: fixed !important;
      transition: width .1s ease;
      backface-visibility: hidden;
      top: $header-height !important;
    }

    .c-wrapper {
      margin-top: $header-height;
      transition: margin .1s ease;
      margin-left: $sidebar-width;
    }

    .c-header {
      top: 0;
      width: 100%;
      position: fixed;
      z-index: $header-z-index;
    }


    &-folded {
      .c-sidenav-folded {
        position: fixed;
        top: $header-height;
      }

      .c-wrapper {
        margin-left: $sidebar-width-folded;
      }
    }

    @include media-breakpoint-down(sm) {
      .c-wrapper {
        margin-left: $space-0;
      }

      .c-sidenav {
        top: 0;
        margin-left: -($sidebar-width);
      }
    }
  }
}