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 px-4 touch-pan-y"
      ref="contentScrollContainer"
    >
      <div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5 w-full">
        <slot name="default" v-bind:scrollToBottom />
      </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">
import { useTemplateRef } from 'vue'

const slots = defineSlots<{
  default?: (slotBindings: { scrollToBottom: typeof scrollToBottom }) => void
  footer?: () => void
}>()

const contentScrollContainerRef = useTemplateRef('contentScrollContainer')

const scrollToBottom = () => {
  if (contentScrollContainerRef.value) {
    contentScrollContainerRef.value.scrollTop = contentScrollContainerRef.value.scrollHeight
  }
}

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

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