<template>
  <el-container>
    <el-header height="80px" class="header__box">
      <HeadBar></HeadBar>
    </el-header>
    <el-container>
      <el-aside
        :width="isCollapse ? '68px' : '320px'"
        style="transition: ease-in-out 0.5s"
      >
        <Sidebar @onOpenOrClose="handleOpenOrClose"></Sidebar>
      </el-aside>
      <el-main>
        <AppMain></AppMain>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import HeadBar from './components/headBar.vue'
import AppMain from './components/appMain.vue'
import Sidebar from './components/sideBar/index.vue'
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const isCollapse = ref(false)
const handleOpenOrClose = (val: boolean) => {
  isCollapse.value = val
}
</script>

<style scoped lang="scss">
.el-main{
  &::-webkit-scrollbar{
    display: none;
  }
}
.header__box {
  background: #1d3359;
  // border-bottom: 1px solid #dcdcdc;
}
.is-vertical{
  .el-container{
    height: calc(100vh - 80px);
  }
}
.el-menu-vertical {
  height: calc(100vh - 80px);
  padding: 10px 8px;
  .el-menu-item {
    height: 36px;
    line-height: 36px;
    border-radius: 2px;
  }
  .el-menu-item:hover,
  .el-menu-item.is-active {
    background: #f2f2f2;
  }
}
:deep(.el-menu-item.is-active i) {
  background-color: #e8eaee;
}
.menu__containt {
  height: calc(100vh - 80px);
  overflow: hidden;
}
</style>
