starwait/components/Home/Menu.vue

<script setup lang="ts">
const {menuExpandStatus} = defineProps({
    menuExpandStatus: {
        type: Boolean,
        default: false
    }
})
const route = useRoute()
const menuList = ref([
    {
        name: '首页',
        icon: '&#xe9a2;',
        message: '',
        path: ''
    },
    {
        name: '博客',
        icon: '&#xe9a1;',
        message: '',
        path: 'blog'
    },
    {
        name: '读书',
        icon: '&#xe99f;',
        message: '',
        path: 'book'
    },
    {
        name: '乐趣',
        icon: '&#xe9a0;',
        message: '',
        path: 'fun'
    },
    {
        name: '看看',
        icon: '&#xe802;',
        message: '',
        path: 'hello'
    },
    {
        name: '工具',
        icon: '&#xe69f;',
        message: '',
        path: 'tools'
    },
])
const activeMenu = computed(() => {
    return route.path.split('/')[2] || ''
})
</script>

<template>
    <div class="menu" id="menuOpen" :class="menuExpandStatus ? 'menuExpand' : ''">
        <div @click.stop class="menuContent">
            <nuxt-link class="menuItemContainer" :class="activeMenu == menuItem.path && 'active' " v-for="(menuItem) in menuList" :key="menuItem.name" :to="'/home/'+menuItem.path">
                <div class="menuItemContent">
                    <div class="starIconFont icon" v-html="menuItem.icon"/>
                    <div class="menuName">{{menuItem.name}}</div>
                    <div class="menuMessage">{{}}</div>
                </div>
            </nuxt-link>
        </div>
    </div>
</template>

<style scoped>

/* 手机端 */
@media (max-width: 767px){
    .menu{
        position: fixed;
        overflow: hidden;
        left: 0;
        top: 0;
        width: 100%;
        height: 0;
        backdrop-filter: blur(10px);
        transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: center;
        .menuContent{
            position: relative;
            width: min(60vw, 12rem);

            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                height: 3rem;
                width: 3px;
                background: var(--main-strong-color);
                transition: all 0.3s ease;
            }

            /* 选中固定效果 */
            &:has(a:nth-child(1).active)::after { transform: translateY(0); }
            &:has(a:nth-child(2).active)::after { transform: translateY(calc(100% + 0.6rem *1)); }
            &:has(a:nth-child(3).active)::after { transform: translateY(calc(200% + 0.6rem *2)); }
            &:has(a:nth-child(4).active)::after { transform: translateY(calc(300% + 0.6rem *3)); }
            &:has(a:nth-child(5).active)::after { transform: translateY(calc(400% + 0.6rem *4)); }
            &:has(a:nth-child(6).active)::after { transform: translateY(calc(500% + 0.6rem *5)); }

            &>.menuItemContainer{
                display: block;
                position: relative;
                &>.menuItemContent{
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: #33333310;
                    height: 3rem;
                    margin-bottom: 0.6rem;



                    & > div.icon{
                        position: relative;
                        left: -0.3rem;
                        margin-right: 0.3rem;
                    }
                    & > div.menuName{
                        position: relative;
                        font-size: 1rem;
                    }
                }
            }
        }
    }
    .menuExpand{
        height: 100vh;
    }
}
/* 平板及以上 */
@media (min-width: 768px){
    .menu{
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        & > div.menuContent{
            position: relative;
            height: 100%;
            width: 100%;
            display: flex;
            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                height: 3px;
                width: var(--nav-length);
                background: var(--main-strong-color);
                transition: all 0.3s ease;
            }
            /* 悬停效果 */
            &:has(a:nth-child(1):hover)::after { transform: translateX(0) !important; }
            &:has(a:nth-child(2):hover)::after { transform: translateX(100%) !important; }
            &:has(a:nth-child(3):hover)::after { transform: translateX(200%) !important; }
            &:has(a:nth-child(4):hover)::after { transform: translateX(300%) !important; }
            &:has(a:nth-child(5):hover)::after { transform: translateX(400%) !important; }
            &:has(a:nth-child(6):hover)::after { transform: translateX(500%) !important; }

            /* 选中固定效果 */
            &:has(a:nth-child(1).active)::after { transform: translateX(0); }
            &:has(a:nth-child(2).active)::after { transform: translateX(100%); }
            &:has(a:nth-child(3).active)::after { transform: translateX(200%); }
            &:has(a:nth-child(4).active)::after { transform: translateX(300%); }
            &:has(a:nth-child(5).active)::after { transform: translateX(400%); }
            &:has(a:nth-child(6).active)::after { transform: translateX(500%); }

            .menuItemContainer{
                position: relative;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                width: var(--nav-length);

                & > div.menuItemContent{
                    position: relative;
                    display: flex;
                    font-size: 1.1rem;
                    color: var(--color-text);
                    & > div.icon{
                        font-size: inherit;
                        padding: 0 0.5rem;
                        display: none;
                    }
                    & > div.menuName{
                        position: relative;
                    }
                    & > div.menuMessage{

                    }
                }
            }
        }
    }
}
</style>