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

const props = defineProps<{
  ux?: any
  homeProps?: any
  closeProps?: any
  navListProps?: any
}>()

const classes = useStyling(
  'scaffoldSimpleMobileSidebar',
  {
    slots: {
      base: '',
      header: 'flex rpy-2',
      footer: 'w-full rpy-2',
    },
  },
  props
)
</script>

<template>
  <UDrawer v-model:open="isOpen" direction="left" :handle="false">
    <template #content>
      <XScaffoldHeaderHeroMainFooter :class="classes.base">
        <template #header>
          <XScaffoldContent>
            <div :class="classes.header">
              <XScaffoldHomeButton v-bind="props.homeProps" />
              <div class="grow"></div>
              <XScaffoldMobileMenuCloseButton v-bind="props.closeProps" @click="isOpen = false" />
            </div>
          </XScaffoldContent>
        </template>

        <template #main>
          <XScaffoldContent :ux="{ content: '!min-w-[50vw]' }">
            <XScaffoldVerticalNavList v-bind="props.navListProps" />
          </XScaffoldContent>
        </template>

        <template #footer v-if="$slots.footer">
          <XScaffoldContent>
            <div :class="classes.footer">
              <slot name="footer" />
            </div>
          </XScaffoldContent>
        </template>
      </XScaffoldHeaderHeroMainFooter>
    </template>
  </UDrawer>
</template>
