From 09760f31f8c09af59dfeb1b2fe782e04c8fec1a6 Mon Sep 17 00:00:00 2001
From: isamu <isamu@to-kyo.to>
Date: Tue, 24 Oct 2023 10:28:35 +0900
Subject: [PATCH] update menu

---
 src/components/MenuItem.vue | 37 +++++++++++++++++++
 src/components/MenuList.vue | 71 ++++++++++++-------------------------
 src/i18n/en.ts              |  7 ++++
 src/i18n/ja.ts              |  7 ++++
 4 files changed, 74 insertions(+), 48 deletions(-)
 create mode 100644 src/components/MenuItem.vue

diff --git a/src/components/MenuItem.vue b/src/components/MenuItem.vue
new file mode 100644
index 0000000..49e4452
--- /dev/null
+++ b/src/components/MenuItem.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="flex items-center rounded-lg bg-gray-200 px-4 py-2">
+    <router-link :to="localizedUrl(link)" v-if="link">
+      <div class="inline-flex items-center justify-center">
+        <span class="material-icons text-warmgray-600 mr-2 text-lg">{{
+          icon
+        }}</span>
+        <span class="text-warmgray-600 text-sm font-bold">{{ $t(title) }}</span>
+      </div>
+    </router-link>
+    <div class="inline-flex items-center justify-center" v-else>
+      <span class="material-icons text-warmgray-600 mr-2 text-lg">{{
+        icon
+      }}</span>
+      <span class="text-warmgray-600 text-sm font-bold">{{ $t(title) }}</span>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    link: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+});
+</script>
diff --git a/src/components/MenuList.vue b/src/components/MenuList.vue
index 3384f4d..b497a89 100644
--- a/src/components/MenuList.vue
+++ b/src/components/MenuList.vue
@@ -1,58 +1,28 @@
 <template>
   <div class="flex flex-col space-y-1 bg-white p-4">
-    <div
-      class="flex items-center rounded-lg bg-gray-200 px-4 py-2"
+    <MenuItem
       @click="handleClose"
+      link="/account"
+      icon="camera_alt"
+      title="menu.signin"
       v-if="!store.state.user"
-    >
-      <router-link :to="localizedUrl('/account')">
-        <div class="inline-flex items-center justify-center">
-          <span class="material-icons text-warmgray-600 mr-2 text-lg"
-            >camera_alt</span
-          >
-          <span class="text-warmgray-600 text-sm font-bold">ログイン</span>
-        </div>
-      </router-link>
-    </div>
+    />
+    <MenuItem @click="handleClose" link="/" icon="man" title="menu.top" />
 
-    <div
-      class="flex items-center rounded-lg bg-gray-200 px-4 py-2"
+    <MenuItem
       @click="handleClose"
+      link="/mypage"
+      icon="camera_alt"
+      title="menu.mypage"
       v-if="store.state.user"
-    >
-      <router-link :to="localizedUrl('/mypage')">
-        <div class="inline-flex items-center justify-center">
-          <span class="material-icons text-warmgray-600 mr-2 text-lg"
-            >camera_alt</span
-          >
-          <span class="text-warmgray-600 text-sm font-bold">マイページ</span>
-        </div>
-      </router-link>
-    </div>
+    />
 
-    <div
-      class="flex items-center rounded-lg bg-gray-200 px-4 py-2"
-      @click="handleClose"
-    >
-      <router-link :to="localizedUrl('/')">
-        <div class="inline-flex items-center justify-center">
-          <span class="material-icons text-warmgray-600 mr-2 text-lg">man</span>
-          <span class="text-warmgray-600 text-sm font-bold">メニュー</span>
-        </div>
-      </router-link>
-    </div>
-
-    <div
-      class="flex items-center rounded-lg bg-gray-200 px-4 py-2"
+    <MenuItem
       @click="logout"
-    >
-      <div class="inline-flex items-center justify-center">
-        <span class="material-icons text-warmgray-600 mr-2 text-lg"
-          >add_circle_outline</span
-        >
-        <span class="text-warmgray-600 text-sm font-bold">ログアウト</span>
-      </div>
-    </div>
+      icon="add_circle_outline"
+      title="menu.signout"
+      v-if="store.state.user"
+    />
   </div>
 </template>
 
@@ -62,8 +32,13 @@ import { useStore } from "vuex";
 import { auth } from "@/utils/firebase";
 import { signOut } from "firebase/auth";
 
+import MenuItem from "@/components/MenuItem.vue";
+
 export default defineComponent({
   emits: ["close-menu"],
+  components: {
+    MenuItem,
+  },
   setup(_, ctx) {
     const store = useStore();
 
@@ -76,8 +51,8 @@ export default defineComponent({
     };
     return {
       handleClose,
-      logout, 
-     store,
+      logout,
+      store,
     };
   },
 });
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 030c459..93c72db 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -4,6 +4,13 @@ const lang = {
   message: {
     hello: "hello world",
   },
+  menu: {
+    top: "Home",
+    mypage: "MyPage",
+    signin: "SignIn",
+    signout: "SignOut",
+    about: "Abount",
+  },
   languages,
 };
 
diff --git a/src/i18n/ja.ts b/src/i18n/ja.ts
index 214be27..ba14b66 100644
--- a/src/i18n/ja.ts
+++ b/src/i18n/ja.ts
@@ -4,6 +4,13 @@ const lang = {
   message: {
     hello: "こんにちは、世界",
   },
+  menu: {
+    top: "Home",
+    mypage: "マイページ",
+    signin: "ログイン",
+    signout: "ログアウト",
+    about: "Abount",
+  },
   languages,
 };