<template>
  <div class="flex-justify-between h-f">
    <div class="flex-center">
      <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
      <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
    </div>
    <div class="margin-right flex-center">
      <a-avatar />
    </div>
  </div>
</template>

<script setup lang="ts">
import { staticRouter } from '@/router/staticRouters'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'

const collapsed = defineModel<boolean>('collapsed')
</script>

<style scoped lang="scss">
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}
</style>
