使用vue2根据element组件写一个右边展开收起的侧边导航栏

好的，这里是一个简单的示例，使用 Vue2 和 Element 组件库实现一个右侧展开收起的侧边导航栏：

<template>
  <div class="sidebar-container">
    <el-button type="primary" icon="el-icon-menu" @click="toggleSidebar" class="sidebar-toggle"></el-button>
    <el-menu :collapse="isCollapsed" :default-active="activeMenu" class="sidebar-menu">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>导航二</span>
        </template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false, // 控制侧边栏的展开和收起
      activeMenu: '1-1' // 默认选中的菜单项
    }
  },
  methods: {
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed;
    }
  }
}
</script>

<style scoped>
.sidebar-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 200px;
}

.sidebar-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

.sidebar-menu {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
}
</style>

这里使用了 Element 的 Menu 组件和 Submenu 组件，通过设置 `:collapse` 属性来控制侧边栏的展开和收起，使用 `:default-active` 属性来设置默认选中的菜单项。在模板中还添加了一个按钮，通过点击按钮来触发 `toggleSidebar` 方法来控制侧边栏的展开和收起。