<template>
  <a-layout class="layout">
    <LayoutSider />
    <a-layout>
      <LayoutHeader />
      <a-layout-content>
        <div ref="contentRef" class="content">
          <RouterView v-slot="{ Component }">
            <KeepAlive>
              <component :is="Component" />
            </KeepAlive>
          </RouterView>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import LayoutHeader from '@/layout/header.vue'
import LayoutSider from '@/layout/sider.vue'

export const contentRef = ref<HTMLDivElement>()

export default defineComponent({
  name: 'App',
  components: {
    LayoutHeader,
    LayoutSider
  },
  setup() {
    return { contentRef }
  }
})
</script>

<style lang="scss" scoped>
.content,
.layout {
  height: 100%;
}

.content {
  --padding: 24px;
  display: flex;
  flex-direction: column;
}
</style>
