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

::ng-deep .mat-tab-label,
::ng-deep .mat-tab-label-active {
  min-width: 0 !important;
}

::ng-deep .mat-tab-body-wrapper,
::ng-deep .mat-tab-body {
  height: 100%;
  width: 100%;
}
::ng-deep .mat-tab-header {
  border-bottom: none !important;
}

.left-side-tabs-body {
  position: relative;
  height: 100%;
  width: calc(100% - 70px);
  div[id^='tabs'] {
    height: 100%;
    width: 100%;
    position: relative;
  }
}

.container {
  display: flex;
  height: 100%;
}

.mat-tab-group {
  display: flex;
  width: 70px;
  flex-direction: row;
}

.myprofile {
  position: absolute;
  display: flex;
  flex-flow: column;
  justify-content: center;
  height: 80px;
  width: 68px;
  bottom: 10px;
  color: #ffffff;
  font-size: 11px;
  text-align: center;

  .myprofile-img {
    display: block;
    border-radius: 10px;
    height: 42px;
    width: 42px;
    background-color: #efefef;
    align-self: center;
    margin-bottom: 6px;
  }
}

::ng-deep .organization-side {
  flex-direction: column;
  height: 100%;
}
::ng-deep .global-menu {
  .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 16px;
        }
      }
      .mat-ink-bar {
        background-color: none;
        height: 0;
      }
    }
  }
}
.left-group-side {
  position: relative;
  height: 100%;
}

::ng-deep .mat-tab-label {
  .mat-tab-label-content {
    .icon-item {
      background: var(--white);
      border-radius: 4px;
      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;
      }
    }
  }
  &[aria-selected='true'] {
    opacity: 1;
    .mat-tab-label-content {
      .icon-item {
        transform: scale(1);
      }
    }
  }
}

::ng-deep .ps {
  .ps-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}