<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'
withDefaults(defineProps<{ sidebar?: boolean; hasTitle?: boolean }>(), {
  sidebar: false,
  hasTitle: true
})
</script>

<template>
  <div class="app-layout">
    <app-header :hasTitle="hasTitle"></app-header>
    <div class="app-layout-container">
      <app-aside v-if="sidebar"></app-aside>
      <app-main></app-main>
    </div>
  </div>
</template>

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