Update menu list

src/components/menu-list/menu-item/index.vue

@@ -3,8 +3,7 @@
     v-if="item.children && item.children.length"
     :label="item.pageName"
     :icon="item.pageIcon"
-    :header-inset-level="item.level - 1"
-    :header-style="`margin-left: -${(item.level - 1) * 1.8}rem`"
+    :header-style="`padding-left: ${item.level * 1.8}rem`"
     :model-value="isActive"
   >
     <MenuItemComponent
@@ -18,8 +17,7 @@
     expand-icon-class="hidden"
     :label="item.pageName"
     :icon="item.pageIcon"
-    :header-inset-level="item.level - 1"
-    :header-style="`margin-left: -${(item.level - 1) * 1.8}rem`"
+    :header-style="`padding-left: ${item.level * 1.8}rem`"
     :to="item.pageUrl || '/'"
     exact
     active-class="bg-primary text-white"

src/store/authentication/actions.ts

@@ -7,7 +7,33 @@ import { Router } from 'src/router';
 import { Pages } from 'src/router/routes';
 import { ActionTree } from 'vuex';
 import { StateInterface } from '../index';
-import { AuthenticationState, MenuItem, Page, PageRole } from './state';
+import {
+  AuthenticationState,
+  MenuItem,
+  Page,
+  PageRole,
+  RoleInfo,
+} from './state';
+
+const constructMenuItem = (
+  menuItem: MenuItem,
+  pageRoles: RoleInfo[],
+  parentRole: RoleInfo
+) => {
+  if (!menuItem.pageUrl) {
+    menuItem.children = [];
+
+    menuItem.children.push(
+      ...pageRoles.filter((r) => r.parentId === parentRole.id)
+    );
+
+    menuItem.children.forEach((child) => {
+      if (!child.pageUrl) {
+        constructMenuItem(child, pageRoles, menuItem);
+      }
+    });
+  }
+};
 
 const actions: ActionTree<AuthenticationState, StateInterface> = {
   async callAPILogin(context, payload: { userName: string; password: string }) {
@@ -29,11 +55,14 @@ const actions: ActionTree<AuthenticationState, StateInterface> = {
                 ...role,
               };
 
-              menuItem.children = [];
+              constructMenuItem(menuItem, res.data.data.pageRoles, role);
+
+              // menuItem.children = [];
+
+              // menuItem.children.push(
+              //   ...res.data.data.pageRoles.filter((r) => r.parentId === role.id)
+              // );
 
-              menuItem.children.push(
-                ...res.data.data.pageRoles.filter((r) => r.parentId === role.id)
-              );
               acc.push(menuItem);
             }
             return acc;