AdminLTE/build/scss/_sidebar-mini.scss

/*
 * Component: Sidebar Mini
 */

// Add sidebar-mini class to the body tag to activate this feature
.sidebar-mini {
  // Sidebar mini should work only on large devices
  @include media-breakpoint-up(md) {
    // When the sidebar is collapsed...
    &.sidebar-collapse {
      // Apply the new margining to the main content and footer
      .content-wrapper,
      .main-footer {
        margin-left: $sidebar-mini-width !important;
      }

      // Modify the sidebar to shrink instead of disappearing
      .main-sidebar {
        &,
        &:before {
          // Don't go away! Just shrink
          margin-left: 0;
          width: $sidebar-mini-width !important;
        }

        .user-panel {
          margin-bottom: 10px;

          .image {
            float: none;
          }
        }
      }

      .nav-sidebar {
        > .nav-label {
          border-bottom-right-radius: $border-radius;
        }

        > .nav-item {
          position: relative;
          z-index: 999;

          > .nav-link {
            margin-right: 0;

            > .nav-icon {
              width: 100%;
              text-align: center;
            }
          }

          > .nav-treeview {
            // Add some padding to the treeview menu
            padding-top: 5px;
            padding-bottom: 5px;
          }

          // Show menu items on hover
          &:hover {
            > .nav-link {
              overflow: visible;
            }

            > .nav-link > .text,
            > .nav-treeview {
              display: block !important;
              position: absolute;
              width: $sidebar-width - ($sidebar-mini-width/2);
              left: $sidebar-mini-width;
            }

            // position the header & treeview menus
            > .nav-link > .text {
              top: 0;
              margin-left: -3px;
              padding: $nav-link-padding-x $nav-link-padding-y;
              background-color: inherit;
              @include border-right-radius($border-radius);
            }

            &.has-treeview > .nav-link > .text {
              border-bottom-right-radius: 0;
            }

            > .nav-treeview {
              top: $nav-link-padding-y;
              margin-left: 0;
              border-bottom-right-radius: $border-radius;
            }
          }
        }
      }

      // Make the sidebar links, menus, labels, badges
      // and angle icons disappear
      .main-sidebar .user-panel > .info,
      .sidebar-form,
      .nav-sidebar > .nav-item > .nav-link > span,
      .nav-sidebar > .nav-item > .nav-treeview,
      .nav-sidebar > .nav-item > .nav-link > .pull-right,
      .nav-sidebar .nav-header {
        display: none !important;
        -webkit-transform: translateZ(0);
      }

      // Make an element visible only when sidebar mini is active
      .visible-sidebar-mini {
        display: block !important;
      }
    }
  }
}

// A fix for text overflow while transitioning from sidebar mini to full sidebar
.nav-sidebar,
.nav-sidebar > .nav-header {
  white-space: nowrap;
  overflow: hidden;
}

.nav-sidebar .nav-link {
  white-space: normal;
}

.nav-sidebar {
  position: relative;
  &:hover {
    overflow: visible;
  }
}

.sidebar-form,
.nav-sidebar > .nav-header {
  overflow: hidden;
  text-overflow: clip;
}

.nav-sidebar .nav-item > .nav-link {
  position: relative;
  > .pull-right {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -7px;
  }
}

// Make an element visible only when sidebar mini is active
.visible-sidebar-mini {
  display: none !important;
}