<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-07-25 16:10:52
-->
<template>
  <div class="app-wrapper">
    <navbar />
    <div :class="{ hasTagsView: needTagsView }" class="main-container">
      <div :class="{ 'fixed-header': fixedHeader }">
        <sidebar class="sidebar-container" />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
    </div>
  </div>
</template>
<script>
  import { AppMain, Navbar, Sidebar, TagsView } from './components'
  import ResizeMixin from './mixin/ResizeHandler'
  import { mapState } from 'vuex'
  export default {
    name: 'Layout',
    components: {
      AppMain,
      Navbar,
      Sidebar,
      TagsView
    },
    mixins: [ResizeMixin],
    computed: {
      ...mapState({
        sidebar: state => state.app.sidebar,
        needTagsView: state => state.settings.tagsView,
        fixedHeader: state => state.settings.fixedHeader
      })
    }
  }
</script>
<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .fixed-header {
    width: 100%;
    transition: width 0.28s;
  }

  .el-dropdown-menu--small {
    padding: 0;
    width: 5px;
  }
</style>