<template>
  <!-- <div v-if="$store.getters.isBig"> -->
  <div class="boxmain">
    <!-- 头部 -->
    <Header />
    <div class="app-wrapper" :class="[$store.getters.sidebarOpened ? 'openSidebar' : 'hideSidebar']">
      <!-- 左侧 menu -->
      <SideBar id="guide-sidebar" class="sidebar-container" />
      <!--  -->
      <div class="main-container ml10 mt10" style="transition: width 0.2s;" :style="{width:$store.getters.sidebarOpened ? 'calc(100% - 292px)' :'calc(100% - 70px)'}">
        <!-- 顶部的 navbar -->
        <TagsView></TagsView>
        <!-- 内容区 -->
        <AppMain />
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from "./components/Header";
import SideBar from "./components/SideBar/index";
import AppMain from "./components/AppMain";
import TagsView from "@/components/TagsView/index";

</script>

<style lang="scss" scoped>
.app-wrapper {
  @include clearfix;
  position: relative;
  // height: calc(100vh - 57px);
  display: flex;
  overflow: hidden;

  .el-scrollbar {
    .is-active {
      background: #fff;
    }
  }
}

.sidebar-container {
  background-color: #fff;
  // border-right: 2px solid var(--el-color-primary);
}
</style>