drawer.css

.drawer {
  @apply relative grid;
  grid-auto-columns: max-content auto;
  &-content {
    @apply col-start-2 row-start-1 min-w-0;
  }
  &-side {
    @apply pointer-events-none fixed start-0 top-0 col-start-1 row-start-1 grid w-full grid-cols-1 grid-rows-1 items-start justify-items-start overflow-x-hidden overflow-y-hidden overscroll-contain;
    height: 100vh;
    height: 100dvh;
    & > .drawer-overlay {
      @apply sticky top-0 place-self-stretch;
    }
    & > * {
      @apply col-start-1 row-start-1;
    }
    & > *:not(.drawer-overlay) {
      @apply transition-transform duration-300 ease-out will-change-transform;
      transform: translateX(-100%);
      [dir="rtl"] & {
        transform: translateX(100%);
      }
    }
  }
  &-toggle {
    @apply fixed h-0 w-0 appearance-none opacity-0;
    &:checked {
      & ~ .drawer-side {
        @apply pointer-events-auto visible overflow-y-auto;
        & > *:not(.drawer-overlay) {
          transform: translateX(0%);
        }
      }
    }
  }
  &-end {
    grid-auto-columns: auto max-content;
    .drawer-toggle {
      & ~ .drawer-content {
        @apply col-start-1;
      }
      & ~ .drawer-side {
        @apply col-start-2 justify-items-end;
      }
      & ~ .drawer-side > *:not(.drawer-overlay) {
        transform: translateX(100%);
        [dir="rtl"] & {
          transform: translateX(-100%);
        }
      }
      &:checked ~ .drawer-side > *:not(.drawer-overlay) {
        transform: translateX(0%);
      }
    }
  }
}