gypsy-crm-frontend-vu/components/cwg-sidebar.vue

<template>
    <view class="cwg-sidebar">
        <view class="menu-list">
            <view class="menu" v-for="(item, index) in menus" :key="item.path">
                <view class="menu-item" @click="handleClick(index)">
                    <cwg-icon :name="item.icon" :size="20" color="#6c8595" />
                    <view class="menu-label" v-t="item.label" />
                    <view class="chevron-icon" :class="{ 'expanded': item.isOpenMenu }">
                        <cwg-icon v-if="item.children && item.children.length" name="crm-chevron-down" :size="20"
                            color="#6c8595" />
                    </view>
                </view>
                <view :ref="(el) => setSubmenuRef(index, el)" class="submenu-box" :a="index" :key1="item.path + index"
                    :b="item" :style="{
                        height: !(item.children && item.children.length) ? '0px' : item.isOpenMenu ? item.submenuHeight + 'px' : '0px',
                        transition: 'height 281ms cubic-bezier(0.4, 0, 0.2, 1)'
                    }" :class="{ 'active': item.isOpenMenu }">
                    <cwg-submenu v-if="item.children && item.children.length" :submenu-items="item.children"
                        @submenu-click="handleSubmenuClick" />
                </view>
            </view>
        </view>
        <view class="menu fixed">
            <view class="menu-item ib-box" @click="setMode('ib')" v-if="mode !== 'ib'">
                <cwg-icon name="crm-ib" :size="20" color="#6c8595" />
                <view class="menu-label" v-t="'Home.msg.Ib'" />
            </view>
            <view class="menu-item ib-box" @click="setMode('customer')" v-if="mode !== 'customer'">
                <cwg-icon name="crm-trade" :size="20" color="#6c8595" />
                <view class="menu-label" v-t="'Home.msg.Custom'" />
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useMenuSplit } from '@/composables/useMenuSplit'
const { menus, setSubmenuRef, setMode, handleClick, handleSubmenuClick, mode } = useMenuSplit()
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.cwg-sidebar {
    width: px2rpx(280);
    color: #6c8595;
    height: calc(100vh - 56px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: px2rpx(8);
    padding-top: px2rpx(20);
    box-sizing: border-box;
    gap: px2rpx(8);
    border-right: 1px solid rgba(108, 133, 149, 0.12);

    .logo {
        width: px2rpx(54);
    }

    .menu-list {
        flex: 1;
        width: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: px2rpx(8);
    }

    .submenu-box {
        width: 100%;
        height: 0;
        overflow: hidden;
    }

    .menu {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;

    }

    .menu-item {
        width: 100%;
        height: px2rpx(40);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: px2rpx(8);
        padding: px2rpx(10);
        box-sizing: border-box;
        font-size: 14px;

        .menu-label {
            flex: 1;
        }

        &:hover {
            background: rgba(108, 133, 149, 0.12) !important;
            border: 1px solid rgb(145, 163, 176) !important;
            border-radius: px2rpx(4);
        }

        .expanded .icon {
            transform: rotate(180deg);
        }
    }

    .ib-box {
        background: rgba(140, 69, 246, 0.08) !important;
        border: 1px solid rgba(140, 69, 246, 0.2) !important;
        font-size: px2rpx(18);
        font-weight: 600;
        color: #141d22;

        &:hover {
            background: rgba(140, 69, 246, 0.08) !important;
            border: 1px solid rgba(140, 69, 246, 0.2) !important;
        }
    }

    .zy-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .fixed {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(8);
    }
}
</style>