<template>
  <el-menu class="nav-menu" :class="{'collapse': isCollapse }">
    <div class="menu-title">CWG Markets</div>
    <el-menu-item v-for="(item, key) in menus" :key="key" :index="key" :class="{'broder-b': key != menus.length-1}">
      {{ item.name }}
    </el-menu-item>
  </el-menu>
</template>
<script setup lang="ts">
  import { computed, ref } from 'vue'

  const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
  })
  const isCollapse = computed(()=> props.isCollapse)
  console.log(isCollapse)
  const menus = [
    { link: '1', name: '1' },
    { link: '2', name: '2' },
    { link: '3', name: '3' },
    { link: '4', name: '4' },
    { link: '5', name: '15' },
  ]
</script>

<style scoped lang="scss">
  .nav-menu{
    width: 0;
    display: none;

    transition: all 1s ease;
    &.collapse{
      display: block;
      width: 240px;
      transition: all 1s ease;
    }
  }
  .menu-title {
    text-align: left;
    height: 80px;
    line-height: 60px;
    font-size: 30px;
    font-weight: bold;
    padding: 10px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #DFE6EE;
  }
  .broder-b{
    box-sizing: content-box;
    border-bottom: 1px solid #DFE6EE;
  }
</style>
