写一个类似于elementui的侧边栏导航，可以点击，数据用本地模拟，其中一级菜单包括首页，个人中心，用户管理，菜品分类管理，菜品信息管理，餐桌管理菜品订单管理，系统管理等，一级分类菜品分类管理里边包含菜品分类，菜品信息管理包含菜品信息

好的，这是一个比较常见的UI组件，需要用到Vue框架和Element UI组件库。我们可以先创建一个Sidebar组件，然后在其中使用Element UI的Menu组件来实现导航栏的功能。以下是一个示例代码：

<template>
  <el-menu :default-active="activeMenu" class="sidebar-menu" @select="handleMenuSelect">
    <el-menu-item index="home">首页</el-menu-item>
    <el-submenu index="user">
      <template slot="title">个人中心</template>
      <el-menu-item index="profile">个人资料</el-menu-item>
      <el-menu-item index="password">修改密码</el-menu-item>
    </el-submenu>
    <el-submenu index="user-management">
      <template slot="title">用户管理</template>
      <el-menu-item index="user-list">用户列表</el-menu-item>
      <el-menu-item index="add-user">添加用户</el-menu-item>
    </el-submenu>
    <el-submenu index="menu-management">
      <template slot="title">菜品管理</template>
      <el-menu-item index="category">菜品分类管理</el-menu-item>
      <el-menu-item index="dishes">菜品信息管理</el-menu-item>
    </el-submenu>
    <el-submenu index="table-management">
      <template slot="title">餐桌管理</template>
      <el-menu-item index="table-list">餐桌列表</el-menu-item>
      <el-menu-item index="add-table">添加餐桌</el-menu-item>
    </el-submenu>
    <el-submenu index="order-management">
      <template slot="title">订单管理</template>
      <el-menu-item index="order-list">订单列表</el-menu-item>
      <el-menu-item index="add-order">添加订单</el-menu-item>
    </el-submenu>
    <el-submenu index="system-management">
      <template slot="title">系统管理</template>
      <el-menu-item index="log">系统日志</el-menu-item>
      <el-menu-item index="config">系统配置</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: 'home'
    }
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenu = index
      this.$emit('menu-selected', index)
    }
  }
}
</script>

<style>
.sidebar-menu {
  width: 200px;
}
</style>

在上述代码中，我们定义了一个Sidebar组件，其中包含一个Element UI的Menu组件，并且定义了一些菜单项。其中，一级菜单项直接使用`el-menu-item`组件，而二级菜单项使用了`el-submenu`组件。通过设置`default-active`属性，我们可以指定默认选中的菜单项。在用户点击菜单项时，我们使用`@select`事件来处理选中菜单项的逻辑，并且通过`$emit`方法来向父组件发送事件，以便父组件能够处理选中菜单项的逻辑。

需要注意的是，上述代码中的菜单项只是示例，具体的菜单项可以根据实际需求进行调整。同时，为了使菜单栏样式更加美观，我们可以在CSS中设置一些样式，比如设置菜单栏的宽度等。