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

<template>
    <view class="cwg-submenu">
        <view class="submenu">
            <view class="cwg-submenu-item" :class="{ 'active': activePath === item.path }" v-for="item in submenuItems"
                :key="item.path" @click="handleClick(item)">
                <text v-t="item.label"></text>
                <cwg-icon v-if="item.isExternal" name="crm-fx" :size="20" color="#6c8595" />
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed, watch, nextTick } from 'vue';
import { openExternalUrl } from '@/utils/openExternalUrl'
import useRouter from "@/hooks/useRouter";
const router = useRouter();
import useRoute from '@/hooks/useRoute'
const route = useRoute()
interface MenuItem {
    key: string;
    label: string;
    icon?: string;
    children?: MenuItem[];
}
const props = defineProps({
    submenuItems: {
        type: Array as () => MenuItem[],
        default: () => []
    }
})
const activePath = computed(() => route.path + (route.query?.type ? `?type=${route.query.type}` : '') || '')
const emit = defineEmits(['submenu-click']);
function handleClick(item) {
    if (item.isExternal) {
        openExternalUrl(item.path);
    } else if (route.path !== item.path) {
        router.push(item.path);
    }
}
</script>

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

.cwg-submenu {
    width: 100%;

    .submenu {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: px2rpx(8);
        padding: px2rpx(8) px2rpx(8) px2rpx(8) px2rpx(32);
        box-sizing: border-box;
    }

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

        .tabler-icon-external-link {
            width: px2rpx(20);
            height: px2rpx(20);
        }

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

        &.active {
            background: rgba(108, 133, 149, 0.12) !important;
            border-radius: px2rpx(4);
        }
    }
}
</style>