Untitled

@import 'variables';

$time-hover: 250ms;
$color-nav-item: #bdf1fa;

.app__container {
  display: flex;
  height: 100vh;
  width: 100vw;
  position: relative;
  .app__menu-open-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 500;
    background: $primary-color;
    color: #fff;
    @media screen and (min-width: 1024px) {
      display: none;
    }
  }
  .app_menu-open {
    width: 250px !important;
  }
  .app__menu {
    width: 0px;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    background: white;
    min-height: 100vh;
    transition: width 0.5s ease-in-out;
    @media screen and (min-width: 1024px) {
      width: 250px;
      position: relative;
    }
    .app__menu-close-btn {
      margin-right: 10px;
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
      @media screen and (min-width: 1024px) {
        display: none;
      }
    }
    .logo__container {
      height: 80px;
      padding: 0.5rem;
      margin-bottom: 20px;
      .logo {
        background: url('../assets/images/LOGO_A.png') transparent center
          no-repeat;
        background-size: contain;
        height: 100%;
        margin-bottom: 30px;
        border-radius: 10px;
        display: block;
        transition: all 300ms ease-in-out;
        cursor: pointer;
        //background-position: ;
      }
    }
    .sidenav-content {
      width: 100%;
      padding-inline: 10px;
      .nav {
        width: 100%;
        .nav__content {
          width: 100%;
          list-style: none;
          margin: 0;
          padding-left: 0;
          padding-bottom: 10px;
          p {
            font-size: 0.8rem;
            color: map-get($font-colors, ligth-dark);
            letter-spacing: 1px;
            margin-bottom: 5px;
          }
          .nav__list-content {
            list-style: none;
            margin: 0;
            padding-left: 0;
            li {
              padding-block: 5px;
              padding-left: 10px;
              margin-bottom: 5px;
              transition: all 0.3s ease-in-out;
              position: relative;
              cursor: pointer;
              overflow: hidden;
              &::after {
                content: '';
                position: absolute;
                background: $primary-color;
                width: 100%;
                height: 100%;
                left: -100%;
                top: 0;
                transition: all 0.3s ease-in-out;
                z-index: -1;
              }
              &:hover {
                color: white;
                &::after {
                  left: 0;
                }
              }
            }
          }
        }
      }
    }
  }
  .app__content {
    width: calc(100% - 250px);
    background: #f2f2f2;
    &.not-logged {
      width: 100%;
    }
  }
}

.app-sidenav {
  background-color: $primary-color-sec;
  width: map-get($sidenav-properties, w-sidenav);
  height: 100vh;
  position: absolute;
  display: block;
  padding: 1rem 0.5rem;
  z-index: 9;
  transition: width ease-in-out #{$time-hover};

  @function heightValue($value1, $value2) {
    $result: #{$value1} + #{$value2};
    @warn $result;

    @return $result;
  }

  // Elementos del menu
  mat-list {
    height: calc(
      100vh -
        (
          #{map-get($layout-properties, p-sidenav)} + #{map-get(
              $layout-properties,
              h-logo
            )} + #{map-get($layout-properties, h-user-menu)}
        )
    );
    overflow-y: hidden;
    overflow-x: hidden;

    mat-list-item {
      border-radius: 100px;
      cursor: pointer;
      margin-bottom: 0.3rem;

      .mat-list-item-content {
        padding: 0;
        color: #fff;
        font-size: 0.9rem;

        mat-icon {
          margin-right: 0.6rem;
          font-size: 1.15rem;
          width: auto;
          height: auto;
        }

        span {
          opacity: 0;
          display: none;
        }
      }

      &.selected-item,
      &:hover {
        background-color: $secondary-color;

        .mat-list-item-content {
          color: #fff;
        }
      }

      &:focus {
        outline: 0 !important;
      }
    }

    &:hover {
      overflow-y: auto;
    }
  }

  .menu-user {
    height: map-get($layout-properties, h-user-menu);
    width: 230px;
    cursor: pointer;

    .user-info {
      display: flex;
      align-items: center;

      .user {
        background-color: #fff;
        color: $primary-color-sec;
        font-weight: bold;
        width: 44px;
        height: 44px;
        border-radius: 100px;
        justify-content: center;
        align-items: center;
        display: flex;
        font-size: 1.2rem;
      }

      .info {
        display: none;
        margin-left: 1rem;
        color: #fff;
        width: 72%;
      }
    }
  }

  mat-accordion {
    mat-expansion-panel {
      box-shadow: none !important;
      background-color: transparent !important;
      margin-bottom: 0.3rem !important;

      mat-expansion-panel-header {
        padding: 0 15px !important;

        mat-panel-title {
          color: #fff !important;
          font-size: 0.9rem;
        }

        mat-icon {
          margin-right: 0.6rem;
          font-size: 1.15rem !important;
          width: auto !important;
          height: auto !important;
        }

        .mat-expansion-indicator::after {
          color: #fff;
          display: none;
        }

        &:hover {
          mat-panel-title {
            color: $color-nav-item !important;
          }
        }
      }

      .mat-expansion-panel-content {
        .mat-expansion-panel-body {
          padding-left: 0;
          padding-right: 0;
          transition: padding ease-in-out #{$time-hover};

          mat-list-item {
            margin-bottom: 0 !important;
            margin-top: 0.4rem !important;
          }
        }
      }

      &.mat-expanded {
        background-color: rgba(0, 0, 0, 0.15) !important;
        border-radius: 25px !important;
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.15) !important;
        border-radius: 25px !important;
      }
    }
  }

  &:hover {
    width: 290px;
    transition: width ease-in-out #{$time-hover};

    .logo {
      background-position: center;
      padding-left: 55px;
      transition: padding-left 300ms ease-in-out;
      height: 80px;
      margin-bottom: 0;
    }

    mat-list {
      mat-list-item {
        span {
          opacity: 1;
          display: block;
        }
      }
    }

    .menu-user {
      .info {
        display: block;
      }
    }

    mat-accordion {
      mat-expansion-panel {
        mat-expansion-panel-header {
          .mat-expansion-indicator::after {
            display: block;
          }
        }

        .mat-expansion-panel-content {
          .mat-expansion-panel-body {
            padding-right: 10px !important;
            padding-left: 18px !important;
            transition: padding ease-in-out #{$time-hover};
          }
        }
      }
    }
  }
}

.mat-menu-user {
  .mat-menu-item {
    &:first-child {
      cursor: auto;
      height: auto;
      padding-top: 0.8rem;
      padding-bottom: 0.8rem;
      background-color: map-get($background-colors, primary);
    }
  }

  span {
    display: block;
    line-height: 34px;
  }
}