<template>
  <div class="app-page">
    <div class="app-page__sidebar">
      <app-sidebar v-model:collapse="isCollapse" />
    </div>
    <div class="app-page__wrapper">
      <div class="app-page__header">
        <app-header>
          <template #left>
            <i class="icon-fold-expand" title="折叠/展开" @click="isCollapse = !isCollapse">
              <span :class="isCollapse ? 'g-icon--expand' : 'g-icon--fold'"></span>
            </i>
          </template>
        </app-header>
      </div>
      <div id="appPageTeleport" class="app-page__main app-page__teleport"></div>
      <div class="app-page__main">
        <router-view v-slot="{ Component, route }">
          <component :is="Component" :key="route.fullPath" />
        </router-view>
      </div>
      <div class="app-page__footer">
        <app-footer />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import client from '@/utils/client'
import AppHeader from '../header/index.vue'
import AppFooter from '../footer/index.vue'
import AppSidebar from '../sidebar/index.vue'

const isCollapse = ref(client.state.isMobile)
</script>

<style lang="less">
@import './index.less';
</style>