next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-nav.component.scss

.left-container {
  display: flex;
  width: 100%;
  height: 100%;
}

::ng-deep .global-menu {
  display: flex;
  flex-direction: row;
  .mat-tab-header {
    border-bottom: none !important;
    width: 100%;
  }
  .mat-tab-label-container {
    .mat-tab-list {
      .mat-tab-labels {
        flex-flow: column;
        height: 360px;
        padding-top: 10px;
        border-bottom: none;

        .mat-tab-label {
          width: 100%;
          height: 80px;
          padding: 0;
          min-width: 0 !important;
          .mat-tab-label-content {
            .icon-item {
              display: inline-flex;
              width: 36px;
              height: 36px;
              border-radius: 50%;
              justify-content: center;
              align-items: center;
              transform: scale(0.9);
              transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);

              svg {
                width: 24px;
                height: 24px;
                stroke: #ffffff;
                stroke-width: 1.5;
                stroke-linecap: square;
                stroke-linejoin: miter;
                fill: none;
              }
              .mat-badge-content {
                right: -4px !important;
              }
            }
          }
          &.mat-tab-label-active {
            min-width: 0 !important;
          }
          &[aria-selected='true'] {
            opacity: 1;
            .mat-tab-label-content {
              .icon-item {
                transform: scale(1);
              }
            }
          }
        }
      }
      .mat-ink-bar {
        background-color: none;
        height: 0;
      }
    }
  }
  .mat-tab-body-wrapper {
    .mat-tab-body {
      height: 100%;
      width: 100%;
    }
  }
}