添加一個切換按鈕
需求描述：點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;
}
寫切換按鈕
加了樣式以后有個問題，就是頁面加寬后，不應該出現紅色按鈕
toggleAside默認加一句display:none,當0-500像素之間.toggleAside {display: inline-block; }
然后把@click事件掛到紅色按鈕上
<span class="toggleAside" @click="toggleMenu"></span>
pc端自適應，pc上看不見aside
原因：1.寫樣式時候默認絕對定位，手機上才需要,pc上不需要浮動
@media (max-width:500px){
position: fixed;
top: 0;
left: 0;
padding-top: 70px;
}
2.v-if的menuvisble邏輯在pc上應該默認是true，pc上不存在按鈕，就不存在切換
通過獲取頁面寬度來決定初始值是真是假
方案：1.在app.vue上首先獲取屏幕的寬度
2.如果寬小于等于500，則false；大于就是true
const menuVisible = ref(width <= 500 ?false : true)
