<script setup lang="ts">
import { useRouter } from 'vue-router'
const { cut } = defineProps(["cut"])
const routerList = useRouter().options.routes[0]?.children
</script>
<template>
    <div class="side_bar" :style="{ width: cut ? '250px' : '80px' }">
        <div class="title"> {{ cut ? "调压通后台管理系统" : "调压通" }}</div>
        <el-menu router :collapse="!cut" default-active="/overview" class="menu" background-color="#304156"
            text-color="#bfcbd9" active-text-color="#409EFF">
            <el-menu-item class="menu_item" v-for="route in routerList" :key="route.name" :index="route.path">
                <i :class="['iconfont', route.meta?.icon]"></i>
                <span>{{ route.meta?.title }}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<style scoped>
.side_bar {
    background-color: #304156;
    transition: all 0.3s;
    overflow: hidden;

    .title {
        background-color: #2b2f3a;
        font-size: 16px;
        color: #fff;
        height: 60px;
        font-weight: bold;
        text-align: center;
        line-height: 60px;
    }

    .menu {
        border-right: none;

        i {
            margin-right: 10px;
        }
    }
}
</style>