<script setup lang="ts">
const { g, l, p } = useContentInjected()
const separator = resolveComponent('XSeparator')
</script>

<template>
  <!--  <XScaffoldSimpleMobileSidebar-->
  <!--    :home-props="{ size: 'xl' }"-->
  <!--    :close-props="{ size: 'xl' }"-->
  <!--    :nav-list-props="{ linkProps: { visual: 'section', color: 'none' } }"-->
  <!--  >-->
  <!--    <template #footer>-->
  <!--      <XFooterCopyrightLegal />-->
  <!--    </template>-->
  <!--  </XScaffoldSimpleMobileSidebar>-->

  <XScaffoldMenuModal :full-height="false" horizontal="fill" vertical="top" position="below">
    <XScaffoldContent>
      <XScaffoldNavigationLinkList orientation="vertical" :link-props="{ class: 'text-lg' }" />
    </XScaffoldContent>
  </XScaffoldMenuModal>

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

        <template #navigation>
          <XScaffoldNavigationLinkList
            orientation="horizontal"
            :exclude="['home']"
            :link-props="{ class: 'text-lg' }"
          />
        </template>

        <template #switchers>
          <XContentLocaleSwitcher class="text-lg" />
          <XContentVariantSwitcher class="text-lg" />
        </template>

        <XScaffoldNavigationHomeLink visual="heading" :margin="false" />
      </XScaffoldHeaderNew>
      <!--      <XScaffoldHeaderSimple-->
      <!--        :brand-props="{ visual: 'heading', color: 'primary' }"-->
      <!--        :link-props="{ visual: 'paragraph', color: 'none' }"-->
      <!--        :home-props="{ size: 'xl' }"-->
      <!--        :mobile-props="{ size: 'xl' }"-->
      <!--      >-->
      <!--        <template #locale>-->
      <!--          <XContentLocaleSwitcher />-->
      <!--        </template>-->

      <!--        <template #variant>-->
      <!--          <XContentVariantSwitcher />-->
      <!--        </template>-->
      <!--      </XScaffoldHeaderSimple>-->
    </template>

    <NuxtPage />

    <template #footer>
      <AppFooter />
    </template>
  </XScaffoldGridLayout>
</template>
