rx-flextagram 레이아웃 모바일 슬라이드 메뉴 방향을 바꿀수 있을까요?

안녕하세요

rx-flextagram 레이아웃 모바일 슬라이드 메뉴가 우측에서 슬라이드되서 나오게 되어있는데

좌측으로 변경하고 싶어서요

아래가 css 들어가는 내용인데 활성화 상태에서 왼쪽 출력은 가능한데

슬라이딩 되는 기준점이 왼쪽에서 불러오는게 아니라 계속 오른쪽에서 불러와서요 ㅜㅜ

활성화 상태에서 출력 위치를 왼쪽으로 변경하니까 close 위치도 변경해줘야는데 

관련 검색을 해보고 이것저것 바꿔봐도 잘 안되서요

혹시 바꾸신분 계신가요?

조언 좀 부탁드립니다 ㅜㅜ

감사합니다

css 소스

.app-sidebar {
  position: fixed;
  top: $header-height;
  right: 0;
  z-index: 200;

  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%;

  background-color: rgba(black, 0.5);

  transition: 0.3s ease;

  @media (max-width: $mobile-w) {
    top: 0;
  }

  &__content {
    position: relative;
    flex: 0 0 auto;
    max-width: 240px;
    width: 100%;
    height: 100%;

    background-color: $color-background;
    background-color: var(--color-background);
    box-sizing: border-box;

    // @media (max-width: $mobile-w) {
    //   // max-height: calc(100% - (#{$header-height} * 2));
    //   &::after {
    //     content: '';
    //     position: absolute;
    //     right: 0;
    //     bottom: 0;
    //     width: $border-radius-4;
    //     height: $border-radius-4;
    //     background-color: $color-background;
    //     background-color: var(--color-background);
    //     margin-bottom: -$border-radius-4;
    //   }
    // }
  }

  &__container {
    position: relative;
    height: 100%;
    max-height: calc(100% - #{$header-height});
    padding: 1rem 0;
    overflow: auto;
  }

  &-bg {
    flex: 1;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background-color: transparent;
  }
}

// 비활성화 상태
// ──────────────────────────────────────────────────────────────────────────
.app-sidebar {
  opacity: 0;
  visibility: hidden;
  user-select: none;
  pointer-events: none;

  .app-sidebar__content {
    transform: translateX(100%);
    transition: transform 0.3s ease, background-color 0.2s ease;
  }

  .app-sidebar__close {
    transform: scale(0.8) rotate(-45deg);
    transition: 0.5s ease;
  }

  .app-sidebar-nav {
    transform: translateY(-1rem);
    transition: 0.6s ease;
  }
}

// 활성화 상태
// ──────────────────────────────────────────────────────────────────────────
.app-sidebar.active {
  opacity: 1;
  visibility: visible;
  user-select: initial;
  pointer-events: initial;

  .app-sidebar__content {
    transform: translateX(0);
  }

  .app-sidebar__close {
    transform: scale(1);
  }

  .app-sidebar-nav {
    transform: translateY(0);
  }
}