@mixin theme-sidebar($theme) {
  aside#left-panel {
    padding-top: $custom-topbar-height;
    background: none;
    background-color: map-get($theme, sidebar-background);
    color: map-get($theme, sidebar-foreground);
    position: fixed;
    border-right: 1px solid map-get($theme, sidebar-border);
    box-sizing: content-box;
    @include restyle-typography($theme);

    .login-info {
      height: auto;
      width: 100%;
      border: none;
      border-bottom: 1px solid map-get($theme, topbar-border);
      box-shadow: none;
      font-weight: $font-weight-medium;
      @include restyle-dropdown($theme);

      > span {
        padding: 0;
        height: $custom-ribbon-height;
        border: none;
        display: flex;
        @include add-shadow-on-hover($theme);

        > a {
          margin-top: 0;
          padding-right: $custom-sidebar-padding-right;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 100%;
          color: map-get($theme, login-info-foreground);

          > span.profile-picture {
            margin: $custom-login-info-image-margin;
            width: $custom-sidebar-padding - 2 * $custom-login-info-image-margin;
            height: $custom-sidebar-padding - 2 * $custom-login-info-image-margin;
            max-height: $custom-sidebar-padding - 2 * $custom-login-info-image-margin;
            border-radius: 50%;
            display: flex;
            background-color: map-get($theme, sidebar-image-background);
            color: map-get($theme, sidebar-image-foreground);
            font-size: ($custom-sidebar-padding - 2 * $custom-login-info-image-margin) / 2;
            align-items: center;
            justify-content: center;

            > img {
              margin: 0;
              padding: 0;
              width: 100%;
              height: 100%;
              max-height: 100%;
            }
          }

          > i {
            margin: 0;
            margin-left: auto;
          }
        }
      }
    }

    .minifyme {
      display: none;
    }

    nav {
      .fa-plus-square-o::before {
        content: "\f107";
      }

      .fa-minus-square-o::before {
        content: "\f106";
      }

      ul {
        li {
          &:not(.active),
          &.active.open {
            > a:not(:hover) {
              > b {
                > em {
                  opacity: 0.5;
                }
              }
            }
          }

          &.open,
          &.active {
            > a {
              color: inherit !important;

              b {
                color: inherit !important;
              }
            }
          }

          a {
            height: $custom-sidebar-item-height;
            color: map-get($theme, sidebar-foreground);
            @include add-shadow-on-hover($theme);

            &:hover {
              font-weight: $font-weight-medium;
              opacity: 1;
            }

            &::before {
              display: none;
            }

            &:active {
              background: none !important;
            }
          }
        }
      }

      > ul {
        > li {
          &.open {
            background-color: map-get($theme, sidebar-select);
            border: none;
          }

          &.active:not(.open) {
            > a,
            a:active {
              @include highlight-menu-item($theme);
            }
          }

          &.active {
            > ul {
              li.active {
                @include highlight-menu-item($theme);

                > a {
                  opacity: 1;
                }
              }
            }
          }

          ul::before {
            display: none;
          }

          > a {
            padding-left: 0;
            padding-right: $custom-sidebar-padding-right;
            font-weight: $font-weight-medium;
            color: map-get($theme, sidebar-foreground);
            @include add-shadow-on-hover($theme);

            > span.menu-item-parent {
              margin: 0;
            }

            > span {
              padding-left: $custom-sidebar-padding;
            }

            > i ~ span {
              padding-left: 0;
            }

            b {
              position: initial !important;

              > em {
                font-size: $custom-sidebar-right-icon-size;
              }
            }

            > i {
              width: $custom-sidebar-padding;
              margin: 0;
              flex-shrink: 0;
            }
          }
        }

        ul {
          background: none;

          li {
            &::before {
              display: none;
            }

            > a {
              padding-left: $custom-sidebar-padding;
              opacity: 0.75;
              font-size: $custom-sidebar-2-level-font-size;

              > span.menu-item-parent {
                margin: 0;
              }

              > i {
                display: none;
              }
            }
          }
        }
      }
    }
  }

  @include when-not-minified {
    aside#left-panel {
      height: 100%;

      nav {
        height: calc(100% - #{$custom-topbar-height} - #{$custom-ribbon-height});
        overflow: auto;

        ul {
          li {
            &:not(.active),
            &.active.open {
              > a:not(:hover) {
                > i {
                  opacity: 0.5;
                }
              }
            }
          }
        }
      }
    }
  }

  @include when-minified {
    aside#left-panel {
      width: $custom-sidebar-minified-size;

      .login-info {
        a#show-shortcut {
          padding-right: 0;
        }
      }

      nav {
        > ul {
          > li {
            border: none;

            &.active {
              @include highlight-menu-item($theme);

              &:hover {
                > ul {
                  > li.active {
                    box-shadow: none;
                  }
                }
              }
            }

            > a {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 0;

              > span.menu-item-parent {
                top: 0;
                left: $custom-sidebar-minified-size;
                height: $custom-sidebar-item-height;
                border: none;
                box-shadow: none;
                width: $custom-sidebar-minified-hover-menu-width - $custom-sidebar-minified-padding;
                padding-left: $custom-sidebar-minified-padding;
                background-color: map-get($theme, sidebar-select);
                color: map-get($theme, sidebar-foreground);
              }
            }

            &:hover {
              > a {
                > span.menu-item-parent {
                  display: flex !important;
                  align-items: center;
                  border-right: 1px solid map-get($theme, sidebar-border);
                  border-top: 1px solid map-get($theme, sidebar-border);
                }
              }

              > ul {
                border-right: 1px solid map-get($theme, sidebar-border);
                border-bottom: 1px solid map-get($theme, sidebar-border);

                > li {
                  > a {
                    display: flex !important;
                    align-items: center;
                  }
                }
              }
            }

            > ul {
              left: $custom-sidebar-minified-size;
              border: none;
              box-shadow: none;
              margin: 0;
              padding: 0;
              min-height: initial;
              box-sizing: content-box;
              width: $custom-sidebar-minified-hover-menu-width;

              > li {
                background-color: map-get($theme, sidebar-background);

                > a {
                  padding-left: $custom-sidebar-minified-padding;
                  width: $custom-sidebar-minified-hover-menu-width;
                }
              }
            }
          }
        }
      }
    }
  }
}