添加一个切换按钮
需求描述：点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)
