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

<template>
    <view class="cwg-submenu">
        <view class="cwg-submenu-title">
            <text>
                CWG Markets
            </text>
        </view>
        <view class="submenu">
            <view class="cwg-submenu-item" v-for="item in submenuItems" :key="item.key" @click="handleClick(item)">
                <text>{{ item.label }}</text>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import useRouter from "@/hooks/useRouter";
const router = useRouter();
interface MenuItem {
    key: string;
    label: string;
    icon?: string;
    children?: MenuItem[];
}

const submenuItems = ref<MenuItem[]>([{ key: 'client', label: 'Client Zone', icon: 'icon-client' },
{ key: 'promotion', label: 'Promotion Center', icon: 'icon-promotion' },
{ key: 'deposit', label: 'Deposit', icon: 'icon-deposit' },
{ key: 'withdrawal', label: 'Withdrawal', icon: 'icon-withdrawal' },
{ key: 'payment', label: 'Payment History', icon: 'icon-payment' },
{ key: 'transfer', label: 'Internal Transfer', icon: 'icon-transfer' },
{ key: 'application', label: 'Application History', icon: 'icon-application' },
{ key: 'ib', label: 'IB Zone', icon: 'icon-ib' },
{ key: 'copy', label: 'Copy Trading', icon: 'icon-copy' },
{ key: 'platform', label: 'Trading Platform', icon: 'icon-platform' },
{ key: 'chat', label: 'Online Chat', icon: 'icon-chat' },])
const emit = defineEmits(['submenu-click']);
function handleClick(item: MenuItem) {
    router.push(item.key);
}
</script>

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

.cwg-submenu {
    background: #fff;
    position: relative;
    z-index: 11;

    padding: 0;
    margin: 0;
    box-shadow: px2rpx(4) 0 px2rpx(12) rgba(15, 23, 43, 0.08);
    border-left: 1px solid #E2E8F0;

    .cwg-submenu-title {
        padding: px2rpx(20);
        font-size: px2rpx(16);
        font-weight: 700;
        border-bottom: 1px solid #E2E8F0;
        color: #0F172B;
    }

    .submenu {
        margin: 0 px2rpx(20);
        width: px2rpx(200);
    }

    .cwg-submenu-item {
        padding: px2rpx(20) 0px;
        cursor: pointer;
        color: #0F172B;
        font-weight: 600;
        transition: background 0.2s;
        display: flex;
        align-items: center;
        gap: px2rpx(10);
        font-size: px2rpx(14);
        border-bottom: 1px solid #E2E8F0;
    }
}
</style>