uniapp应用如何实现菜单导航和侧边栏显示

<template><view class="container"><tabbar v-model="activeIndex" :list="tabList"></tabbar><view class="content"><text v-show="activeIndex === 0">首页</text><text v-show="activeIndex === 1">分类</text><text v-show="activeIndex === 2">购物车</text><text v-show="activeIndex === 3">我的</text></view></view></template><script>  export default {    data() {      return {        activeIndex: 0, // 当前选中的菜单索引        tabList: [          { iconPath: 'home.png', selectedIconPath: 'home-active.png', text: '首页' },          { iconPath: 'category.png', selectedIconPath: 'category-active.png', text: '分类' },          { iconPath: 'cart.png', selectedIconPath: 'cart-active.png', text: '购物车' },          { iconPath: 'user.png', selectedIconPath: 'user-active.png', text: '我的' },        ],      };    },  };</script><style>  .container {    height: 100vh;  }  .content {    padding-top: 60px;    text-align: center;  }</style>

<template><view><button>显示侧边栏</button>    <drawer v-model="isShow" :overlay="true"><view class="sidebar"><view class="sidebar-item">我的订单</view><view class="sidebar-item">我的收藏</view><view class="sidebar-item">个人设置</view></view></drawer></view></template><script>  export default {    data() {      return {        isShow: false, // 是否显示侧边栏      };    },    methods: {      showSidebar() {        this.isShow = true;      },    },  };</script><style>  .sidebar {    width: 200px;    height: 100vh;    background-color: #f0f0f0;    padding: 20px;  }  .sidebar-item {    margin-bottom: 20px;  }</style>