
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/drawer/index.mdx'

## Default Class Table
  
<CssTable name="drawer" />
  
## Demo
  
<Demo></Demo>
  
## Css Schema


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

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

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.drawer {
  width: 100%;
}
.drawer-side > .drawer-overlay {
  @apply cursor-pointer bg-transparent transition-colors duration-200 ease-out;
}
.drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
  background-color: #0006;
}
.drawer-toggle:focus-visible ~ .drawer-content label.drawer-button {
  @apply outline outline-2 outline-offset-2;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css
.drawer-open > .drawer-toggle {
  @apply hidden;
}
.drawer-open > .drawer-toggle ~ .drawer-side {
  @apply pointer-events-auto visible sticky block w-auto overscroll-auto;
}
.drawer-open > .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
  transform: translateX(0%);
}
[dir="rtl"] .drawer-open > .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
  transform: translateX(0%);
}
.drawer-open > .drawer-toggle ~ .drawer-side > .drawer-overlay {
  @apply cursor-default bg-transparent;
}
.drawer-open > .drawer-toggle:checked ~ .drawer-side {
  @apply pointer-events-auto visible;
}

```

</div>
</div>



