gypsy-crm-frontend-vu/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="item.icon" 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: 'crm-house' },
    { key: 'promotion', label: 'Promotion Center', icon: 'crm-users' },
    { key: 'deposit', label: 'Deposit', icon: 'crm-chart-area' },
    { key: 'withdrawal', label: 'Withdrawal', icon: 'crm-download' },
    { key: 'withdrawal', label: 'Withdrawal', icon: 'crm-headset' },
]);
function handleClick(item: MenuItem) {
    router.push(item.key);
}
</script>

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

.cwg-sidebar {
    width: px2rpx(100);
    background: var(--color-navy-900);
    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: var(--color-navy-700);
        transition: background 0.2s;

        &:hover {
            background: var(--color-navy-600);
        }

    }
}
</style>