<template>
  <!-- <n-space class="layout" :size="0" vertical>
    <n-layout>
      <Header />
    </n-layout>
    <n-layout has-sider>
      <SideBar />
      <n-layout class="layout__content">
        <Bread />
        <router-view />
      </n-layout>
    </n-layout>
  </n-space> -->
  <n-space class="layout" :size="0" vertical>
    <n-layout has-sider>
      <SideBar v-if="menuMode === 'sidebar'" />
      <n-layout>
        <Header />
        <Tags v-if="tagsMenuSetting.show" />
        <n-layout class="layout__content" :class="{'layout__content--fix': tagsMenuSetting.fixed }">
          <router-view />
        </n-layout>
      </n-layout>
    </n-layout>
  </n-space>
</template>

<script setup>
// import { reactive } from 'vue'
import Header from './components/Header/index.vue'
import SideBar from './components/Sidebar/index.vue'
import Tags from './components/Tags/index.vue'
import { useSettingStore } from '@/store/modules/setting.js'
import { computed } from 'vue'
import { useUserStore } from '@/store/modules/user.js'
const settingStore = useSettingStore()
const menuMode = computed(() => settingStore.getMenuMode)
const tagsMenuSetting = computed(() => settingStore.getTagsMenuSetting)
const useUser = useUserStore()
// function getUserNow() {
//   useUser.getUserInfo()
// }
// getUserNow()

</script>

<style lang="scss" scoped>
.layout__content--fix{
  padding-top: 44px;
}
</style>
