ucard-person-app-front/components/cwg-sidebar.vue

<template>
    <view class="cwg-sidebar">
        <image class="logo" src="/static/images/logo3.png" mode="widthFix" />
        <view class="menu">
            <view class="menu-item" v-for="item in menu" :key="item.key" @click="handleClick(item)">
                <cwg-icon color="#fff" icon="chevron-right" class="arrow" />
            </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 emit = defineEmits(['menu-click']);
const menu = 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' },
]);
function handleClick(item: MenuItem) {
    router.push(item.key);
}
</script>

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

.cwg-sidebar {
    width: px2rpx(100);
    background: #11224d;
    color: #fff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: px2rpx(20);
    box-sizing: border-box;

    .logo {
        width: px2rpx(54);
    }

    .menu {
        display: flex;
        flex-direction: column;
        gap: px2rpx(20);
        align-items: center;
        padding-top: px2rpx(30);
    }

    .menu-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: px2rpx(54);
        height: px2rpx(54);
        border-radius: px2rpx(12);
        cursor: pointer;
        background: #122D6B;
        transition: background 0.2s;

        &:hover {
            background: #24325e;
        }

    }
}
</style>