vue3-搭建官网-改造topnav

添加一个切换按钮

需求描述：点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事件挂到红色按钮上

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)