@let(classes = "[grid-area:sidebar] z-1 flex flex-col gap-4 [:where(&)]:w-64 p-4")

@if (stashable)
    <ui:sidebar.backdrop />
@endif

<div {{
  $props
  .except(['stashable', 'sticky'])
  .mergeIf(sticky, {
    'x-bind:style': '{ position: \'sticky\', top: $el.offsetTop + \'px\', \'max-height\': \'calc(100dvh - \' + $el.offsetTop + \'px)\' }',
    'class': ['max-h-dvh overflow-y-auto overscroll-contain'],
  })
  .mergeIf(stashable, {
    'x-bind:data-stashed' : '! screenLg',
    'x-resize.document' : 'screenLg = window.innerWidth >= 1024',
    'x-init' : '$el.classList.add(\'-translate-x-full\', \'rtl:translate-x-full\'); $el.removeAttribute(\'data-mobile-cloak\'); $el.classList.add(\'transition-transform\')',
    'class': [
      'max-lg:data-mobile-cloak:hidden',
      '[[data-show-stashed-sidebar]_&]:translate-x-0! lg:translate-x-0!',
      'z-20! data-stashed:start-0! data-stashed:fixed! data-stashed:top-0! data-stashed:min-h-dvh! data-stashed:max-h-dvh!'
    ],
  })
  .merge({'class': [classes] })
  .toAttrs() }}
  x-data="{ screenLg: window.innerWidth >= 1024 }"
  data-mobile-cloak data-ui-sidebar>
  {{{ await $slots.main() }}}
</div>