<template>
  <div class="basic-layout">
    <LayoutHeader />
    <main class="app-main">
      <router-view :key="key" />
    </main>
  </div>
</template>

<script>
export default {
  name: 'Layout'
};
</script>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router/composables';

import LayoutHeader from './components/LayoutHeader.vue';

const route = useRoute();
let key = computed(() => route.path);
</script>

<style lang="scss">
.basic-layout {
  height: 100%;
  padding-top: 130px;

  .app-main {
    height: 100%;
    overflow-y: auto;
    background-color: #f5f5f5;
  }
}
</style>
