<template>
  <div class="breadcrumb-index">
    <Breadcrumb v-if="isBreadcrumb" />
    <User />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import Logo from "../../logo/index.vue";
import Breadcrumb from "./breadcrumb.vue";
import User from "./user.vue";
import store from "@/hooks/useStore";

export default defineComponent({
  name: "BreadcrumbIndex",

  setup() {
    const isBreadcrumb = computed(() => {
      return store.state.themeConfig.isBreadcrumb;
    });

    return {
      isBreadcrumb,
    };
  },

  components: {
    Logo,
    Breadcrumb,
    User,
  },
});
</script>

<style lang="scss" scoped>
.breadcrumb-index {
  display: flex;
  padding-left: 15px;
  background-color: var(--bg-topBar);
  border-bottom: 1px solid #f1f2f3;
}
</style>
