<script setup lang="ts">
const isOpen = useMobileMenuOpen()

const props = defineProps<{
  class?: string
  ux?: any
  fullHeight?: boolean
  gridMenuProps?: any
  drawerProps?: any
  direction: 'top' | 'bottom' | 'left' | 'right'
}>()

const classes = useStyling(
  'scaffoldMenuDrawer',
  {
    slots: {
      wrapper: 'relative w-full h-full',
      overlay: 'absolute',
      content: 'absolute ring-0 rounded-none',
    },
  },
  props
)
</script>

<template>
  <XScaffoldGridMenu
    :fill="true"
    :overlap="props.fullHeight"
    position="above"
    v-bind="props.gridMenuProps"
  >
    <div :class="classes.wrapper">
      <UDrawer
        v-model:open="isOpen"
        :direction="props.direction"
        :portal="false"
        :no-body-styles="true"
        :ui="{ overlay: classes.overlay, content: classes.content }"
        v-bind="props.drawerProps"
      >
        <template #content>
          <slot />
        </template>
      </UDrawer>
    </div>
  </XScaffoldGridMenu>
</template>
