<template>
  <div>
    <Header />
    <div
      class="app-wrapper"
      :class="[$store.getters.sidebarOpened ? 'openSidebar' : 'hideSidebar']">
      <!-- 左侧 menu -->
      <SideBar
        id="guide-sidebar"
        class="sidebar-container"
       />

      <!-- 顶部的 navbar -->
      <div class="main-container">
        <TagsView></TagsView>
        <!-- 内容区 -->
        <AppMain />
      </div>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
@import "~@/styles/sidebar.scss";
@import "~@/styles/transition.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: calc(100vh - 88px);
  display: flex;
  overflow: hidden;
  .el-scrollbar {
    .is-active {
      background: #fff;
    }
  }
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  /* 在variables里面定义的变量 */
  transition: width #{$sideBarDuration};
}

.hideSidebar .fixed-header {
  width: calc(100% - #{$hideSideBarWidth});
}
::v-deep .el-scrollbar__view{
  border-right: 1px solid #07376d; 
  background-color: rgba(0, 0, 0, 0.1);
}
</style>