<script setup lang="ts">
const separator = resolveComponent('XSeparator')
</script>

<template>
  <XScaffoldGridLayout>
    <template #header>
      <XScaffoldHeaderNew
        home="break"
        mobile="right"
        main="left"
        navigation="right"
        :separator-list-props="{
          separator: separator,
          separatorProps: { orientation: 'vertical' },
        }"
      >
        <template #home>
          <XScaffoldNavigationHomeButton />
        </template>

        <template #mobile>
          <XScaffoldMenuToggleButton />
        </template>

        <template #navigation> nav </template>

        <template #switchers> switchers </template>

        <template #main-break>break</template>

        main
      </XScaffoldHeaderNew>
    </template>

    <XScaffoldMenuDrawer :full-height="false" direction="top" position="below">
      menu aölksddsfj aösdlkfj aösfl asödlf aösdkf öaskjfö aslfjkasölffkajs döl
    </XScaffoldMenuDrawer>

    <NuxtPage />

    <template #footer>
      <div class=""><UButton>abc</UButton></div>
    </template>
  </XScaffoldGridLayout>
  <!--  <div class="w-full">-->
  <!--    <XScaffoldSimpleMobileSidebar>-->
  <!--      <template #footer>-->
  <!--        <XFooterCopyrightLegal />-->
  <!--      </template>-->
  <!--    </XScaffoldSimpleMobileSidebar>-->

  <!--    <XScaffoldSimpleScaffold>-->
  <!--      <template #header>-->
  <!--        <XScaffoldSimpleHeader>-->
  <!--          <template #locale>-->
  <!--            <LocaleSwitcher />-->
  <!--          </template>-->

  <!--          <template #variant>-->
  <!--            <VariantSwitcher />-->
  <!--          </template>-->
  <!--        </XScaffoldSimpleHeader>-->
  <!--      </template>-->

  <!--      <template #hero>-->
  <!--        <div class="green">Default Hero</div>-->
  <!--      </template>-->

  <!--      <template #hero-background>-->
  <!--        <div class="p-4">Default Hero Background</div>-->
  <!--      </template>-->

  <!--      <template #main>-->
  <!--        <XContainerRow class="red" break="lg" :pad="true" :gap="false">-->
  <!--          <XContainerRowItem class="red"> abaösdkfj öaslddfkj </XContainerRowItem>-->
  <!--          <XContainerRowItem class="red"> abaösdkfj öaslddfkj </XContainerRowItem>-->
  <!--          <XContainerRowItem class="red"> abaösdkfj öaslddfkj </XContainerRowItem>-->
  <!--        </XContainerRow>-->
  <!--      </template>-->

  <!--      <template #footer>-->
  <!--        <XFooterCopyrightLegal />-->
  <!--      </template>-->
  <!--    </XScaffoldSimpleScaffold>-->
  <!--  </div>-->
</template>
