alfresco-content-app/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss

@import '@alfresco/adf-core/lib/styles/mat-selectors';

.aca-sidenav {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  overflow-y: hidden;
  background: var(--theme-sidenav-background-color);

  &-header {
    padding: 32px 0;

    &-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 32px;
      padding: 0 24px;

      &-logo {
        img {
          cursor: pointer;
          height: 28px;
          vertical-align: middle;
          transform: scale(0.7);
        }
      }

      &-text {
        flex: 1;
        color: var(--theme-sidenav-text-color);
        padding-left: 12px;
        letter-spacing: 0.25px;
        font-style: normal;
        font-weight: 400;
        font-size: var(--theme-body-1-font-size);
        cursor: pointer;
      }
    }
  }

  .aca-sidenav__section {
    overflow-y: auto;

    .aca-expansion-panel {
      width: 100%;
      background-color: unset;
      box-shadow: none;
      border-radius: 0;

      &-header {
        padding: 0 32px 0 0;
        display: flex;
        align-items: center;
        border: none;

        span::after {
          transform: rotate(226deg);
        }

        &-title {
          display: flex;
          flex-direction: row;

          .aca-action-button__label {
            font-size: var(--theme-caption-font-size);
          }
        }
      }

      .aca-expansion-panel-header:hover {
        background: var(--adf-theme-background-hover-color);
      }

      &-item {
        flex-direction: row;
        display: flex;
        align-items: center;
        text-decoration: none;
        width: 100%;
        user-select: none;

        .aca-action-button__label {
          color: var(--theme-action-button-text-color);
          -webkit-font-smoothing: antialiased;
        }

        &:hover .aca-action-button__label {
          color: var(--theme-sidenav-active-text-color);
        }
      }

      &-body {
        margin: 0 -24px 16px;
        font-size: var(--theme-body-1-font-size);

        button {
          line-height: 32px;
          align-items: center;
        }
      }
    }

    .aca-action-button {
      cursor: pointer;
      color: var(--theme-action-button-text-color);
      height: 32px;
      padding: 0 24px;
      border-radius: 0;
      line-height: 32px;
      justify-content: start;

      #{$mat-button-label} {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &--active {
        color: var(--theme-sidenav-active-text-color);
        background: var(--theme-selected-background-color);
      }
    }

    .aca-full-width {
      display: flex;
      width: 100%;
    }

    .aca-sidenav__section__actions {
      &__item:has(span) {
        padding: 0;
        height: 100%;

        span {
          pointer-events: auto;
        }
      }

      &:last-child {
        border-bottom: 0;
      }
    }
  }
}