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

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

interface Props {
  sidebar?: boolean
  footer?: boolean
}

withDefaults(defineProps<Props>(), {
  sidebar: true,
  footer: true
})
</script>

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

<style lang="scss">
.app-layout {
  min-height: 100vh;
  background-color: #ecf2f7;
  display: flex;
}
.app-layout-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>
