es-web/src/views/file/index.vue

<template>
  <el-container>
    <el-aside width="200px" class="custom-aside separate-twoside">
      <el-menu >
        <el-menu-item
        v-for="(item,index) in filemenuitems"
        :key="index"
        :index="item.index"
        >
        <img :src="item.img" style="width: 24px; margin-right: 5px;" />
        <span>{{ item.label }}</span>
        </el-menu-item>
      </el-menu>
      <div style="padding:20px;">
        <el-divider style="margin: 10px 0;"></el-divider>
        <el-button class="exitbutton" @click="exittop">
          <img :src="exit"  style="width: 24px;">
          <span>Exit</span>
        </el-button>
      </div>
    </el-aside>
    <el-main>Main</el-main>
  </el-container>
</template>

<script setup>
import { RouterView, RouterLink,useRouter } from "vue-router"
import { useI18n } from 'vue-i18n'
import { useProjectStore } from "@/store/project"


import tempic from "@/assets/img/temp.png"
import exit from "@/assets/img/exit.png"

const { t, locale } = useI18n()
const router = useRouter();

const projectStore = useProjectStore()


const filemenuitems = ref([
  { index: '1', img: tempic, label: 'Back' },
  { index: '2', img: tempic, label: 'Save' },
  { index: '3', img: tempic, label: 'Save As' },
  { index: '4', img: tempic, label: 'Export' },
  { index: '1', img: tempic, label: 'Open' },
  { index: '2', img: tempic, label: 'Recent' },
  { index: '3', img: tempic, label: 'Close' },
]);


const exittop = () => {
  projectStore.clearproject();
  router.push({path:'/'})
}

</script>

<style scoped>
.separate-twoside {
  display: flex;
  justify-content: space-between;
}

.exitbutton {
  width: 100%;
  border: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}


</style>