pussy-ts/src/pages/robot/Layout/RobotMenu/RobotMenu.module.scss

@import '../../../../layouts/variables.module.scss';

$activeLineWidth: 2px;

.links {
  list-style-type: none;
  position: sticky;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh - $reservedTopHeight - $actionBarHeight);
  max-height: 900px;
  direction: rtl;

  top: $reservedTopHeight;
  background: linear-gradient(180deg, #000000a4 82.81%, rgba(0, 0, 0, 0) 100%);
  z-index: 2; // for active state overflow

  li {
    margin-bottom: 2px;
    position: relative;
    display: flex;
    direction: ltr;
    justify-content: flex-end;

    a,
    button {
      padding-right: 25px;
      gap: 0 10px;

      display: grid;
      grid-auto-rows: 1fr;
      grid-template-areas:
        '. text .'
        'new count icon'
        'description description .';

      .text,
      .description {
        font-size: 12px;
      }

      .text {
        grid-area: text;
        display: none;
        color: #36d6ae;
        justify-self: flex-end;
      }

      .description,
      .count {
        justify-self: flex-end;
        white-space: nowrap;
      }

      .description {
        grid-area: description;
        transition: all 0.3s ease-in-out;
        color: rgba(255, 255, 255, 0.38);
      }

      .text,
      .description,
      .count {
        align-self: center;
      }

      .count {
        color: rgba(255, 255, 255, 0.78);
        font-size: 14px;
        grid-area: count;
      }

      .new {
        grid-area: new;
        color: var(--green-2);
        background: rgba(255, 255, 255, 0.08);
        border-radius: 5px;
      }

      .icon {
        grid-area: icon;
        line-height: 100%;
        // min-width: 20px;
        color: white;
        font-size: 20px;
        text-transform: initial;
      }

      &::after,
      &::before {
        content: '';
        opacity: 0;
        display: block;
        right: -$activeLineWidth;
        height: 100%;
        position: absolute;
        transition: opacity 0.3s;
      }

      &:hover,
      &.active {
        .text {
          display: block;
        }
      }

      &:hover {
        .count {
          color: white;
        }
      }

      &.active {
        &::after,
        &::before {
          opacity: 1;
        }

        &::after {
          background: #fcf000;
          width: $activeLineWidth;
          box-shadow: 0px 0px 10px 1px rgba(255, 217, 0, 0.7);
          border-radius: 1px 1px 0px 0px;
        }
        &::before {
          background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(252, 240, 0, 0.15) 100%
          );

          width: 60px;
        }
      }
    }

    button {
      cursor: not-allowed;
      opacity: 0.38;
    }
  }

  &.mirror {
    direction: ltr;

    li {
      direction: rtl;

      a,
      button {
        padding-left: 25px;
        padding-right: unset;

        .count {
          direction: ltr;
        }

        &.active {
          &::after,
          &::before {
            left: -$activeLineWidth;
            right: unset;
          }

          &::before {
            transform: rotate(180deg);
          }
        }
      }
    }
  }
}