<template>
  <div class="bg-nav" :style="{ width: width }">
    <div class="bg-nav-title" v-if="title">
      <p class="text-clip"><bg-icon class="menu-icon" icon="#bg-ic-menu"></bg-icon>{{ title }}</p>
    </div>
    <div class="bg-nav-list bg-scroll">
      <NavList :list="list" :highlight-parent-rule="highlightParentRule" />
    </div>
  </div>
</template>

<script setup>
import NavList from "./bg-nav-list.vue";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "184px",
  }, // 宽度
  list: {
    type: Array,
    required: true,
  }, // 导航列表 [ { name: "xxx", path: "xxx" } ]
  highlightParentRule: {
    type: Function,
  },
});
</script>

<style lang="scss" scoped>
.bg-nav {
  background-color: #fff;
  box-shadow: 4px 0 4px #00076526;
  transition: all 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #202531;

  .bg-nav-title {
    padding: 0 0 12px 12px;
    font-weight: 600;
    line-height: 28px;
    .menu-icon {
      margin: 0 8px;
    }
    & > p {
      font-size: 16px;
      color: #3759be;
    }
  }
}
</style>
<style lang="scss">
// .bg-nav > .bg-nav-list ul.nav-list > li > .nav-item {
//   color: #202531;
//   margin: 10px 10px 10px 10px;
//   padding: 6px 10px;
//   border-radius: 6px;
// }
.bg-nav > .bg-nav-list ul.nav-list > li > .nav-item.current {
  background-color: #ebeff9;
  color: #3759be;

  &::before {
    display: none;
  }

  &::after {
    display: none;
  }
}

.bg-nav > .bg-nav-list ul.nav-list > li > ul.nav-list {
  background-color: #fff;
}
</style>
