<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: true,
  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 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f8f8;
}
.app-layout-container {
  flex: 1;
  display: flex;
}
</style>
