fini-ui/src/views/login/modelComponents/Drawer.vue

<template>
    <div class="wrapddd">
        <div class="imgWrap22222">
            <img src="@/assets/1x/1x/source8.png" alt="menu" >
        </div>
        <div class="nav">
            <li :class="state == 1 && 'active'" @click="setState(1)" >
                <img src="@/assets/1x/source10.png" alt="menu">
                <span>Home</span>
            </li>
            <li :class="state == 2 && 'active'" @click="setState(2)">
                <img src="@/assets/1x/source5.png" alt="menu">
                <span>Dashboard</span>
            </li>
            <li :class="state == 3 && 'active'" class="IPO" @click="setState(3)">
                <div class="ipoWrap">
                    <div>
                        <img src="@/assets/1x/source2.png" alt="menu">
                        <span>IPO Reference Data</span>
                    </div>
                    <div class="arrow" :style="{ transform: state == 3 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
                        <img src="@/assets/1x/source11.png" alt="" class="icon">
                    </div>
                </div>
                <div class="report" v-if="state == 3">
                    <span>report</span>
                    <img src="@/assets/1x/source3.png" alt="">
                </div>


            </li>
            <li :class="state == 4 && 'active'" @click="setState(4)">
                <img src="@/assets/1x/source6.png" alt="menu">
                <span>IPO Calendar</span>
            </li>
            <li :class="state == 5 && 'active'" @click="setState(5)" class="IPO">
                <div class="ipoWrap">
                    <div>
                        <img src="@/assets/1x/1x/source6.png" alt="menu">
                        <span>Languages</span>
                    </div>
                    <div class="arrow" :style="{ transform: state == 5 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
                        <img src="@/assets/1x/source11.png" alt="">
                    </div>
                </div>
                <div class="lang" v-if="state == 5" >
        <li @click="handleLang1">English</li>
        <li @click="handleLang2">繁體中文</li>
        <li @click="handleLang3">简体中文</li>
        </div>
        </li>

    </div>
    </div>
</template>

<script lang="ts">
export default {
    name: "drawer",
};
</script>

<script lang="ts" setup>
import { ref } from "vue"
import { getCurrentInstance, onUnmounted } from 'vue'
import { ipoStore } from "@/stores/ipo"
const store = ipoStore()
const { proxy } = (getCurrentInstance() as any)
let emit = defineEmits(['childfn'])

const props = defineProps({
    drawer:Boolean
})

let drawer = props.drawer

console.log(props);

const state = ref(1)
// const drawer = ref(true)
const setState = (number: number) => {
    state.value = number;
    if(number == 1){
        proxy.$router.push("/home")
    }
    if(number == 2){
        proxy.$router.push("/dashboard")
    }
    if(number == 3){
        proxy.$router.push("/IPO")
    }
    if(number == 4){
        proxy.$router.push("/IPOcalendar")
    }
}
const handleLang1 = () => {
    
    if (proxy.$i18n.locale = 'en') {
        proxy.$i18n.locale = 'en'
    }
    store.setLocale(1)
     emit('childfn',!drawer)
}
const handleLang2 = () => {
    if (proxy.$i18n.locale = 'zhCt') {
        proxy.$i18n.locale = 'zhCt'


    }
    store.setLocale(2)
    emit('childfn',!drawer)
}
const handleLang3 = () => {
    if (proxy.$i18n.locale = 'zhCn') {
        proxy.$i18n.locale = 'zhCn'
    }
    store.setLocale(3)
    emit('childfn',!drawer)
}

</script>

<style lang="scss" scoped>
.wrapddd {
    width: 80vw;
    transform: translateX(-20px);
    display: flex;
    flex-direction: column;
    .imgWrap22222 {
        margin-top: 20px;
        width: 25px;
        height: 20px;
         margin-left: 15px;
        img {
            width: 100%;
            height: 100%;
        }
    }

    .nav {
        height: fit-content;
        margin-top: 20px;
        width: 100%;

        >li {
            display: flex;
            align-items: center;
            justify-self: center;
            min-height: 50px;
            padding-left: 15px;
            margin-top: 10px;
            background-color: #B4C0C7;

            &.active {
                background-color: #fff
            }

            img {
                width: 22px;
                height: 22px;
            }

            span {
                margin-left: 25px;
                font-size: 20px;
                font-weight: 700;
                color: #1C3F56;
            }
        }

        .IPO {
            flex-direction: column;
            justify-content: center;
            height: fit-content;

            .lang {
                margin-left: -90px;
                color: #1C3F56;
                font-size: 18px;

                >li {
                    line-height: 24px;
                }
            }

            .report {
                margin-left: -120px;

                span {
                    margin-right: 10px;
                }
            }

            .ipoWrap {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;

                .arrow {
                    width: 12px;
                    height: 19px;
                    margin-right: 14px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }


            span {
                display: inline-block;
                transform: translateY(-3px);
            }

             
        }
    }
    
}
</style>