<script lang="ts">
export default { name: 'AppLayout' }
</script>

<script setup lang="ts">
import AppHeader from './Header.vue'
import AppAside from './Aside.vue'
import AppMain from './Main.vue'
import AppFooter from './Footer.vue'

withDefaults(defineProps<{ sidebar?: boolean; footer?: boolean; header?: boolean }>(), {
  header: true,
  sidebar: false,
  footer: false
})
</script>

<template>
  <div class="app-layout">
    <AppHeader v-if="header"></AppHeader>
    <div class="app-layout-container">
      <AppAside v-if="sidebar"></AppAside>
      <AppMain></AppMain>
    </div>
    <AppFooter v-if="footer"></AppFooter>
  </div>
</template>

<style lang="scss">
.app-layout {
  min-width: 1000px;
  min-height: 100vh;
  margin: 0 auto;
  background-color: #ecf2f7;
  display: flex;
  flex-direction: column;
}
.app-layout-container {
  // min-height: calc(100vh - 66px);
  flex: 1;
  display: flex;
}
</style>
