
<template>
  <div class="common-layout">
    <el-container>
      <sidebar @handleCollapse="handleCollapse"></sidebar>
      <div class="common-content" :style="{width:isCollapse?'calc(100% - 64px)':'calc(100% - 281px)'}">
        <navbar></navbar>
        <app-main></app-main>
      </div>
    </el-container>
  </div>
</template>

<script setup>
import {ref} from "vue"
import AppMain from "./components/Appmain/AppMain.vue";
import Navbar from "./components/Navbar/NavBar";
import Sidebar from "./components/Sidebar/index";

const isCollapse = ref(false)
const handleCollapse = (data) =>{
  isCollapse.value = data
}
</script>

<style lang="scss" scoped>
.common-content{
  width: calc(100% - 281px);
  height: 100vh;
  transition: width 0.3s ease-in-out;
}
</style>