basecoat/src/css/components/sidebar.css

/* Sidebar */
@layer components {
  .sidebar {
    &:not([data-sidebar-initialized]) {
      @apply max-md:hidden;
    }
    &:not([aria-hidden]),
    &[aria-hidden=false] {
      @apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
    }
    nav {
      @apply fixed inset-y-0 z-50 flex w-(--sidebar-mobile-width) flex-col transition-transform duration-300 ease-in-out md:w-(--sidebar-width);
    }
    & + * {
      @apply transition-[margin] ease-in-out duration-300;
    }
    &:not([data-side]),
    &[data-side=left] {
      nav {
        @apply left-0 border-r;
      }
      & + * {
        @apply relative md:ml-(--sidebar-width);
      }
      &[aria-hidden=true] {
        nav {
          @apply -translate-x-full;
        }
        & + * {
          @apply md:ml-0;
        }
      }
    }
    &[data-side=right] {
      nav {
        @apply right-0 border-l;
      }
      & + * {
        @apply relative md:mr-(--sidebar-width);
      }
      &[aria-hidden=true] {
        nav {
          @apply translate-x-full;
        }
        & + * {
          @apply md:mr-0;
        }
      }
    }
    nav {
      > header,
      > footer {
        @apply flex flex-col;
      }
      [role=separator] {
        @apply w-auto;
      }
      > section {
        @apply flex min-h-0 flex-1 flex-col overflow-y-auto;

        > [role=group] {
          @apply relative flex w-full min-w-0 flex-col;
        }
        h3 {
          @apply flex shrink-0 items-center outline-hidden transition-[margin,opacity] duration-200 ease-linear [&>svg]:shrink-0;
        }
        ul {
          @apply flex w-full min-w-0 flex-col;

          li {
            @apply relative;

            > a,
            > button,
            > details > summary {
              @apply flex w-full items-center overflow-hidden text-left outline-hidden transition-[width,height,padding] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0;
            }
            > details {
              &:not([open]) {
                > summary {
                  &::after {
                    @apply -rotate-90 rtl:rotate-90;
                  }
                }
              }
              > summary {
                &::after {
                  @apply ms-auto block size-3.5 bg-current content-[''] transition-transform ease-linear;
                  @apply mask-[image:var(--chevron-down-icon)] mask-size-[1rem] mask-no-repeat mask-center;
                }
              }
            }
          }
          ul {
            @apply flex min-w-0 flex-col;
          }
        }
      }
    }
  }
}