textbook__sidebar.scss

@use 'sass:math';
@import '../variables/mq.scss';
@import '../variables/settings.scss';
@import '../variables/colors.scss';

.c-sidebar {
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-height: 100%;
  width: $left-sidebar-width;
  z-index: 1;

  @include mq($until: small) {
    padding-top: $spacing-07;
    width: 100%;
  }

  @include mq($until: medium) {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  @include mq($until: large) {
    .app-mega-dropdown {
      max-width: initial;
    }
  }

  &__content-menu {
    z-index: 1;
  }

  &__chapters-container {
    @include type-style('body-long-01');
    overflow: auto;
    background-color: $background-color-lighter;
    padding: $spacing-unit-small $spacing-unit;
    scrollbar-color: $background-color-lighter $background-color-lighter;
    transition: scrollbar-color 0.2s ease-in-out;
    
    &:hover {
      scrollbar-color: $text-color-lighter-3 $background-color-lighter;
    }
    
    @include mq($until: medium) {
      max-width: 100%;
      width: 100%;
    }
  }

  &__chapter {

    &-content {
      direction: ltr;
      list-style: none;
      margin-left: 0;
      margin-bottom: 0;
      padding-left: 0;
    }

    &__section {
      margin: 0 0 $spacing-03;
      position: relative;
      padding-bottom: $spacing-04;

      .connection {
        height: calc(100% - 12px);
        left: 9px;
        pointer-events: none;
        position: absolute;
        top: $spacing-06;
        border: 1px solid;
        visibility: hidden;
        
        body[data-learning-path="true"] & {
          visibility: initial;
        }
        
        &.connection--progress {
          border-color: $border-color-secondary;
          height: 0;
          transition: height .2s ease-out;
        }
      }
      
      .progress-wrapper {
        z-index: 0;
      }

      x-progress {
        display: inline-block;
        height: 20px;
        width: 20px;
      }

      &-list {
        padding: $spacing-06 0 $spacing-13 0;
        margin: 0;
      }
      
      &:last-child {
        .connection {
          display: none;
        }
      }

      &--active {
        .connection {
          border-color: $border-color-light-2;
        }
        &:last-child .connection {
          display: block;
        }
      }
    }

    &__subsections {
      list-style: none;
      margin-bottom: 0;
      margin-left: $spacing-06;
    }
  }

  &__entry {
    @include type-style('body-long-01');
    display: block;
    color: $text-color-dark;
    padding: math.div($spacing-unit-x-small, 2);
    text-decoration: none;
  
    .c-sidebar__chapter & {
      @include type-style('expressive-heading-02');
    }

    &--active {
      &#{&} {
        color: $text-active-color;
        font-weight: 600;
    
        &:visited {
          color: $text-active-color;
        }
      }
    }
  }

  &__footer {
    @include type-style('body-long-01');
    direction: rtl;
    background-color: $background-color-lighter;
    width: 100%;
  
    @include mq($until: medium) {
      padding-bottom: $spacing-unit;
      width: 100%;
    }

    &__menu {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      &__item {
        display: flex;
        width: 100%;
        height: $spacing-08;
        align-items: center;
        justify-content: flex-end;
        padding: $spacing-03 $spacing-07;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
        color: $link-color-tertiary;
        gap: $spacing-03;
        
        & svg {
          width: $spacing-05;
          fill: $purple-70;
        }
      }
    }

    #app-panel-language-toggle {
      display: none;
      text-align: center;
      
      svg {
        display: inline-block;
      }
    }
  }
  
  #back-home,
  #app-panel-footer-toggle {
    & > svg {
      display: inline-block;
      vertical-align: text-top;
      & g {
        stroke: currentColor;
      }
    }
  }

  &__mobile-menu {
    display: none;
    grid-area: sidebar-mobile-menu;
    background-color: $background-color-lighter;
    border-bottom: 1px solid $border-color;
    border-right: 1px solid $border-color;
    text-align: right;

    @include mq($until: medium) {
      display: block;
    }

    &__toggle {
      @include type-style('body-long-01');
      display: flex;
      align-items: center;
      color: $purple-70;
      height: 40px;
      justify-content: space-between;
      display: flex;
      align-items: center;
      text-align: right;
      padding: $spacing-03 $spacing-05;
      
      svg {
        width: $spacing-05;
        fill: $purple-70;
      }

      &__label {
        margin-left: $spacing-03;
      }
    }
  }
}
@include mq($until: medium) {
  .c-textbook .c-textbook__utility-panel {
    display: none;
  }
}

.c-textbook__sidebar--hidden {
  .c-sidebar {
    grid-template-rows: 1fr auto;
    max-width: $left-sidebar-width-hidden;

    @include mq($until: medium) {
      display: none;
    }

    &__content-menu,
    .connection--progress {
      display: none;
    }

    .language-selector {
      display: none;
    }

    &__entry,
    .progress-wrapper + &__entry {
      display: none;
    }

    &__chapters-container {
      max-width: $left-sidebar-width-hidden;
      padding: $spacing-03;
    }

    &__chapter {
      &__section {
        height: 3rem;
      }

      &__section-list {
        margin-left: $spacing-03;
        margin-bottom: 0;
      }
    }

    &__footer {
      &__menu {
        &__item {
          padding: $spacing-03;
          justify-content: center;
        }
        &__item-label {
          display: none;
        }

        #app-panel-language-toggle {
          display: block;
        }
      }
    }
  }
  
  @include mq($until: medium) {
    .c-textbook__utility-panel {
      display: flex;
    }
  }
}