<template>
  <syMenu
    class="blackModeMenu___"
    :ellipsis="false"
    :modelValue="modelValue"
    @update:modelValue="($event) => $emit('update:modelValue', $event)"
    :menu-list="list"
    textColor="var(--sy-black)"
    activeTextColor="var(--sy-black)"
    :text-font-weight="400"
    :active-text-font-weight="600"
  ></syMenu>
</template>

<script setup lang="ts">
import { syMenu } from "cqk-sy-ui";

const props = defineProps<{
  modelValue: string;
  list: { name: string; value: string }[];
}>();

const emit = defineEmits(["update:modelValue"]);
</script>

<style lang="scss">
.blackModeMenu___ {
  .line {
    height: 3px;
  }
  &.el-menu {
    height: 48px;
  }
  .el-menu-item {
    margin-left: 30px;
    margin-right: 30px;
  }
}
</style>
