TelegramPWA/src/components/main/Main.scss

#Main {
  height: 100%;
  text-align: left;
  overflow: hidden;

  @media (min-width: 1276px) {
    position: relative;
  }

  @media (max-width: 600px) {
    height: calc(var(--vh, 1vh) * 100);
  }

  @media (min-width: 926px) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 100%;
  }
}

.has-group-call-header {
  --group-call-header-height: 2rem;
  #LeftColumn, #MiddleColumn, #RightColumn-wrapper {
    height: calc(100% - 2rem);
    margin-top: 2rem;
  }
}

#LeftColumn {
  min-width: 12rem;
  width: 33vw;
  max-width: 26.5rem;
  height: 100%;
  position: relative;

  & > div {
    height: 100%;
    overflow: hidden;
  }

  @media (max-width: 600px) {
    height: calc(var(--vh, 1vh) * 100);
  }

  @media (min-width: 926px) {
    max-width: 40vw;
  }

  @media (min-width: 1276px) {
    width: 25vw;
    max-width: 33vw;
  }

  @media (max-width: 925px) {
    position: fixed;
    left: 0;
    top: 0;
    height: calc(var(--vh, 1vh) * 100);
    width: 26.5rem !important;

    transform: translate3d(-5rem, 0, 0);
    transition: transform var(--layer-transition);

    body.animation-level-0 & {
      transition: none;
    }

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: black;
      opacity: var(--layer-blackout-opacity);
      transition: opacity var(--layer-transition);
      z-index: 1;

      body.animation-level-0 & {
        transition: none;
      }

      // @optimization
      body.is-android & {
        display: none;
      }

      body.is-android .middle-column-shown & {
        display: block;
      }
    }

    #Main:not(.middle-column-open) & {
      transform: translate3d(0, 0, 0);

      &::after {
        opacity: 0;
        pointer-events: none;
      }
    }

    #Main.history-animation-disabled & {
      transition: none;

      &:after {
        transition: none;
      }
    }
  }

  @media (max-width: 600px) {
    max-width: none;
    transform: translate3d(-20vw, 0, 0);
    left: env(safe-area-inset-left) !important;
    width: calc(100vw - env(safe-area-inset-left)) !important;
  }
}

#RightColumn {
  @media (max-width: 600px) {
    height: calc(var(--vh, 1vh) * 100 + 1px);
  }

  #Main.history-animation-disabled & {
    transition: none;

    .overlay-backdrop {
      transition: none;
    }
  }
}

#Main.history-animation-disabled .overlay-backdrop {
  transition: none;
}

#MiddleColumn {
  border-left: 1px solid var(--color-borders);

  @media (max-width: 925px) {
    max-width: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;

    transform: translate3d(0, 0, 0);
    transition: transform var(--layer-transition);

    body.animation-level-0 & {
      transition: none;
    }

    #Main:not(.middle-column-open) & {
      transform: translate3d(26.5rem, 0, 0);
    }
  }

  @media (max-width: 600px) {
    border-left: none;

    #Main:not(.middle-column-open) & {
      transform: translate3d(100vw, 0, 0);
    }

    #Main.right-column-open & {
      transform: translate3d(-20vw, 0, 0);
    }
  }

  #Main.history-animation-disabled & {
    transition: none;

    &:after {
      transition: none;
    }
  }
}

body.is-android.animation-level-1 {
  --layer-transition: 250ms ease-in-out;

  #LeftColumn, #MiddleColumn, #RightColumn {
    transition: transform var(--layer-transition), opacity var(--layer-transition);
  }

  #Main:not(.middle-column-shown) {
    #MiddleColumn {
      display: none;
    }
  }

  #Main:not(.middle-column-open) {
    #MiddleColumn {
      transform: translate3d(10vw, 0, 0);
      opacity: 0;
    }
  }

  #Main.middle-column-open {
    #LeftColumn {
      transform: translate3d(0, 0, 0);
      opacity: 0;
    }
  }

  #Main:not(.right-column-shown) {
    #RightColumn {
      display: none;
    }
  }

  #Main:not(.right-column-open) {
    #RightColumn {
      transform: translate3d(10vw, 0, 0);
      opacity: 0;
    }
  }

  #Main.right-column-open {
    #MiddleColumn {
      transform: translate3d(0, 0, 0);
      opacity: 0;
    }
  }
}