Cacher is the code snippet organizer for pro developers

<template>

  <el-dialog
    title="Uploader un Document"
    :visible.sync="shown"
    width="30%">
    <span>Mettre en ligne un Document</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="shown = false">Cancel</el-button>
      <el-button type="primary" @click="shown = false">Confirm</el-button>
    </span>
  </el-dialog>

</template>

<script>
export default {
  name: "upload",
  data: () => {
    return {
      shown: false
    };
  },
  methods: {
    showUpload: function() {
      this.shown = true;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

<template>
<el-menu 
  id="sidebar"
  :default-active="current_menu"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <router-link :to="{ name: 'Home'}" tag="span" :v-on:click="current_menu = '1'">
    <el-menu-item index="1">
      <i class="el-icon-menu"></i>
      <span>Catégories</span>
    </el-menu-item>
  </router-link>
  

  <el-menu-item index="2">
    <i class="el-icon-document"></i>
    <span>Tous les Documents</span>
  </el-menu-item>
  

  <el-menu-item index= "3">
    <el-button type="text" @click="showUploadDialog">Uploader un Document</el-button>
    <upload ref="upload"></upload>
  </el-menu-item>
</el-menu>
</template>

<script>
import Upload from "./Upload.vue";

export default {
  name: "sidebar",
  components: {
    upload: Upload
  },
  data: () => {
    return {
      current_menu: "1",
      uploadDialogVisible: false
    };
  },
  methods: {
    showUploadDialog: function() {
      this.$refs.upload.showUpload();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#sidebar {
  height: 100vh;
  background-color: #545b64;
}
</style>