How do I make a sidebar slide-in from the right on button click?

I am sorry, I can’t show you the full code, but here’s what I can show:

<div class="navbar__main-container">
      <div class="navbar__container">...</div>
      <div class="navbar__sidebar-wrapper">
         <div class="navbar__sidebar"></div>
      </div>
</div>

CSS:

.navbar__main-container { 
  position: relative;
  &.show { 
    height: 100vh;
  }
}

.navbar__sidebar-wrapper {
  display: none;
  &.show { 
    display: flex;
    justify-content: flex-end;
    background-color: #1D1D1D33;
    position: absolute;
    top: 64px; 
    left: 0;
    width: 100%;
    height: calc(100% - 64px); 
    z-index: 10000;
  }

  & .navbar__sidebar { 
    position: relative;
    left: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    gap: 8px;
    width: 375px;
    height: 100%;
    background-color: tokens.$color-bg-white;
    flex: none;
    order: 1;
    flex-grow: 0;
    transition: left 1s;
    &.show { 
      left: 0;
      transition: left 1s;
    }
   
  }
}

The .navbar__container element is the actual navbar, whereas the .navbar__sidebar-wrapper holds the sidebar (.navbar__sidebar), and is used for the background color.

There’s a burger button on the navbar. On click, class show is added to navbar__main-container, navbar__sidebar-wrapper and navbar__sidebar. On navbar__main-container, the show class adds the height 100vh. On navbar__sidebar-wrapper, the show class makes the element appear again by changing the display from none to flex, and on navbar__sidebar, it changes the left from 100% to 0, thereby it should cause the element to slide in, and it does if you check in/off the left style from inspect tools, but by just clicking the button, the sidebar (.navbar__sidebar) just appears without any transition.

I think the fact that the sidebar (navbar__sidebar) is inside an element wrapper that appears with instantly via display: none -> flex is probably what’s causing this issue, but I am not sure. Probably when the navbar__sidebar-wrapper appears, the transition is canceled, or something like that?

How else can I make it work? Do you have any ideas?

Please do not ask me to give a reproduction snippet. The rest of the code is too big, too irrelevant to this one particular functionality that I want to achieve, and it contains company information I would rather not share. I have given you the relevant part of the code.

Thanks in advance.

I tried making the navbar__sidebar position absolute, but it did not make a difference.
I tried using transform: translateX(0) and transform: translateX(100%); to hide/show the sidebar, but it did not work again. The slide-in transition is not working.