<template>
  <div class="kole-quicknav">
    <div
      v-for="(it, i) in items"
      :key="i"
      class="kole-quicknav-item"
      @click="$emit('select', it)"
    >
      <div class="kole-quicknav-icon">{{ it.icon }}</div>
      <div class="kole-quicknav-label">{{ it.label }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KoleQuickNav',
  props: {
    items: {
      type: Array,
      default: () => [
        { icon: '📊', label: '数据看板' },
        { icon: '👥', label: '用户管理' },
        { icon: '📦', label: '订单管理' },
        { icon: '⚙️', label: '系统设置' },
        { icon: '📝', label: '审批中心' },
        { icon: '🔔', label: '消息通知' },
        { icon: '📁', label: '文件中心' },
        { icon: '🛡️', label: '权限管理' }
      ]
    }
  }
};
</script>

<style src="./QuickNav.css"></style>
