<template>
  <v-app>
    <v-sheet :style="`width: ${contentWidth}px; margin-left: ${offsetLeft}px;`" color="transparent">
      <main-nav :style="`padding-left: ${offsetLeft}px;`" />

      <v-main>
        <build-server-stats />

        <packages />
      </v-main>
    </v-sheet>

    <v-footer :style="`padding-left: ${offsetLeft}px;`" app color="black">
      <footer-content />
    </v-footer>
  </v-app>
</template>

<script lang="ts" setup>
import MainNav from '@/components/MainNav.vue'
import BuildServerStats from '@/components/BuildServerStats.vue'
import Packages from '@/components/Packages.vue'
import { onMounted, ref } from 'vue'
import FooterContent from '@/components/FooterContent.vue'

const contentWidth = ref(1440)
const offsetLeft = ref(0)

onMounted(() => {
  const innerWidth = window.innerWidth
  offsetLeft.value = (innerWidth - contentWidth.value) / 2
})
</script>
