first commit

src/components/SideMenu.vue

@@ -0,0 +1,118 @@
+<template>
+  <v-navigation-drawer
+    app
+    clipped
+    color="black"
+    dark
+    permanent
+  >
+    <v-layout
+      column
+      fill-height
+    >
+      <v-list
+        v-for="item in items"
+        :key="item.title"
+        class="py-0"
+      >
+        <div v-if="!item.items">
+          <v-list-item
+            :to="item.route"
+            active-class="blue white--text"
+          >
+            <v-list-item-icon>
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-item-icon>
+
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </v-list-item>
+        </div>
+
+        <v-list-group
+          v-else
+          :prepend-icon="item.icon"
+          no-action
+        >
+          <template v-slot:activator>
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </template>
+
+          <div
+            v-for="childItem in item.items"
+            :key="childItem.title"
+          >
+            <v-list-item
+              :to="childItem.route"
+              active-class="blue white--text"
+            >
+              <v-list-item-title>{{ childItem.title }}</v-list-item-title>
+            </v-list-item>
+          </div>
+        </v-list-group>
+      </v-list>
+      <v-spacer />
+      <v-list>
+        <v-list-item @click="logout">
+          <v-list-item-icon>
+            <v-icon>mdi-logout</v-icon>
+          </v-list-item-icon>
+
+          <v-list-item-title>로그아웃</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-layout>
+  </v-navigation-drawer>
+</template>
+
+<script>
+import * as api from '@/api/menu'
+
+export default {
+  name: "SideMenu",
+  data() {
+    return {
+      isLoading: false,
+      items: [],
+    }
+  },
+
+  async created() {
+    await this.getMenus()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async getMenus() {
+      this.isLoading = true
+      try {
+        let res = await api.getMenus();
+        if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
+          this.items = res.data.data
+        } else {
+          this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
+          this.logout();
+        }
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
+        this.logout();
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    logout() {
+      this.$store.dispatch('accountStore/LOGOUT')
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>