<template>
  <div class="flex justify-between items-center">
    <h1 class="">实验平台</h1>
    <div>
      <menu-unfold-outlined v-if="collapsed" @click="toggleCollapse" />
      <menu-fold-outlined v-else class="trigger" @click="toggleCollapse" />
      用户信息
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
// eslint-disable-next-line import/no-extraneous-dependencies
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';

const store = useStore();
const collapsed = computed(() => store.state.layout.display.left); // 是否显示左栏

// toggle left window display
function toggleCollapse() {
  store.commit('layout/setDisplay', { prop: 'left', show: !collapsed.value });
}
</script>

<style scoped>
h1 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
</style>
