システム管理者専用のページを追加しました。

frontend/src/layouts/MainLayout.vue

@@ -2,40 +2,26 @@
   <q-layout view="lHh Lpr lFf">
     <q-header elevated>
       <q-toolbar>
-        <q-btn
+        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
-          flat
-          dense
-          round
-          icon="menu"
-          aria-label="Menu"
-          @click="toggleLeftDrawer"
-        />
         <q-toolbar-title>
           {{ productName }}
           <q-badge align="top" outline>V{{ version }}</q-badge>
         </q-toolbar-title>
         <domain-selector></domain-selector>
-        <q-btn flat round dense icon="logout" @click="authStore.logout()"/>
+        <q-btn flat round dense icon="logout" @click="authStore.logout()" />
       </q-toolbar>
     </q-header>
 
-    <q-drawer
+    <q-drawer :model-value="authStore.LeftDrawer" :show-if-above="false" bordered>
-      :model-value="authStore.LeftDrawer"
-      :show-if-above="false"
-      bordered
-    >
       <q-list>
-        <q-item-label
+        <q-item-label header>
-          header
-        >
           メニュー
         </q-item-label>
 
-        <EssentialLink
+        <EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
-          v-for="link in essentialLinks"
+        <div v-if="isAdmin">
-          :key="link.title"
+          <EssentialLink v-for="link in adminLinks" :key="link.title" v-bind="link" />
-          v-bind="link"
+        </div>
-        />
       </q-list>
     </q-drawer>
 
@@ -54,19 +40,19 @@ import { useAuthStore } from 'stores/useAuthStore';
 const authStore = useAuthStore();
 
 const essentialLinks: EssentialLinkProps[] = [
-{
+  {
     title: 'ホーム',
     caption: '設計書から導入する',
     icon: 'home',
     link: '/',
-    target:'_self'
+    target: '_self'
   },
   {
     title: 'フローエディター',
     caption: 'イベントを設定する',
     icon: 'account_tree',
     link: '/#/FlowChart',
-    target:'_self'
+    target: '_self'
   },
   // {
   //   title: '条件エディター',
@@ -76,8 +62,8 @@ const essentialLinks: EssentialLinkProps[] = [
   //   target:'_self'
   // },
   {
-    title:'',
+    title: '',
-    isSeparator:true
+    isSeparator: true
   },
   // {
   //   title:'Kintone ポータル',
@@ -151,8 +137,33 @@ const essentialLinks: EssentialLinkProps[] = [
   // }
 ];
 
+const adminLinks: EssentialLinkProps[] = [
+  {
+    title: 'ユーザー',
+    caption: 'ユーザー設定する',
+    icon: 'manage_accounts',
+    link: '/#/user',
+    target: '_self'
+  },
+  {
+    title: 'テナント',
+    caption: 'テナント設定',
+    icon: 'domain',
+    link: '/#/domain',
+    target: '_self'
+  },
+  {
+    title: 'アカウント',
+    caption: 'アカウント設定',
+    icon: 'assignment_ind',
+    link: '/#/userDomain',
+    target: '_self'
+  },
+]
+
 const version = process.env.version;
 const productName = process.env.productName;
+
 onMounted(() => {
   authStore.toggleLeftMenu();
 });
@@ -160,4 +171,8 @@ onMounted(() => {
 function toggleLeftDrawer() {
   authStore.toggleLeftMenu();
 }
+function isAdmin(){
+  const permission = authStore.permissions;
+  return permission === 'admin'
+}
 </script>