<template>
  <div class="header-left">
    <MenuCollapse />
    <BreadCrumb class="header-breadcrumb" hidden sm:block />
  </div>
  <div v-if="loginUser.account === 'admin'" class="header-actions">
    <Export/>
    <FullScreen />
    <UserAvatar />
  </div>
  <div v-else class="header-actions">
    <FullScreen />
    <UserAvatar />
  </div>
</template>

<script setup>
import BreadCrumb from './components/BreadCrumb.vue'
import MenuCollapse from './components/MenuCollapse.vue'
import FullScreen from './components/FullScreen.vue'
import UserAvatar from './components/UserAvatar.vue'
import Export from './components/Export.vue'
import { useUserStore } from '@/store'
const loginUser = useUserStore()
</script>

<style scoped lang="scss">
.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.header-breadcrumb {
  min-width: 0;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
}
</style>
