添加一個切換按鈕

需求描述：點logo彈出菜單，參考vue文檔，有切換按鈕，當頁面寬度小于500px。
寫法：
點擊topnav.vuem,0-500像素時候，把menu隱藏起來

 @media (max-width: 500px) {
        .menu {
            display: none;
        }

      .logo {//當頁面很小的時候margin0auto而不是margin-right auto
            margin: 0 auto;
        }

        .toggleAside {
            display: inline-block
        };
    }

logo放在中間

.topnav:{
justify-content: center;
    align-items: center;
}

寫切換按鈕

加了樣式以后有個問題，就是頁面加寬后，不應(yīng)該出現(xiàn)紅色按鈕
toggleAside默認加一句display:none,當0-500像素之間.toggleAside {display: inline-block; }
然后把@click事件掛到紅色按鈕上
<span class="toggleAside" @click="toggleMenu"></span>

pc端自適應(yīng)，pc上看不見aside

原因：1.寫樣式時候默認絕對定位，手機上才需要,pc上不需要浮動

@media (max-width:500px){
        position: fixed;
        top: 0;
        left: 0;
        padding-top: 70px;
    }

2.v-if的menuvisble邏輯在pc上應(yīng)該默認是true，pc上不存在按鈕，就不存在切換

通過獲取頁面寬度來決定初始值是真是假

方案：1.在app.vue上首先獲取屏幕的寬度
2.如果寬小于等于500，則false；大于就是true
const menuVisible = ref(width <= 500 ?false : true)