hereconnect/apps/frontend/src/layouts/LayoutWithTabs.vue

<template>
  <div class="grid h-full sm:grid-rows-[auto_1fr_auto] grid-rows-[1fr_auto_auto] overflow-hidden">
    <div class="flex overflow-auto pb-safe-or-4 sm:pt-safe w-full px-4 touch-pan-y">
      <div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5">
        <slot />
      </div>
    </div>

    <slot name="footer">
      <footer
        v-if="!slots.footer"
        class="bg-gray-100 text-center py-1.5 border-t text-xs sm:text-base text-gray-700 sm:order-last sm:pb-safe-or-1.5"
      >
        <span class="text-nowrap">Сделайте НаСвязи удобнее.</span>
        <span> </span>
        <span class="text-nowrap">
          Будем рады
          <a href="/donate" class="underline underline-offset-2">вашей поддержке</a>
        </span>
      </footer>
    </slot>

    <TabBar />
  </div>
</template>

<script setup lang="ts">
const slots = defineSlots<{
  default?: () => void
  footer?: () => void
}>()

const layoutPageHead = useHead({
  htmlAttrs: { class: 'overflow-hidden' },
  bodyAttrs: { class: 'overflow-hidden' },
})

onBeforeUnmount(() => layoutPageHead?.dispose())
</script>