refactor(gui): use nested submenu

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/pages/account/index.vue

@@ -3,7 +3,9 @@ import { navigateTo } from '#imports'
 
 const $route = useRoute()
 
-const selectedTabKeys = computed(() => [$route.params.page])
+// const selectedTabKeys = computed(() => [$route.params.page])
+const selectedKeys = computed(() => [$route.params.nestedPage ?? $route.params.page])
+const openKeys = ref([$route.params.nestedPage && 'users'])
 </script>
 
 <template>
@@ -11,19 +13,32 @@ const selectedTabKeys = computed(() => [$route.params.page])
     <a-layout class="h-full overflow-y-auto flex">
       <!-- Side tabs -->
       <a-layout-sider>
-        <div class="pt-4 h-full bg-white">
+        <div class="pt-4 h-full bg-white nc-user-sidebar">
-          <a-menu :selected-keys="selectedTabKeys" class="tabs-menu h-full" :open-keys="[]">
+          <a-menu :inline-indent="12" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" class="tabs-menu h-full" mode="inline">
-            <a-menu-item
+            <!--            <a-menu-item
-              key="users"
+                          key="users-old"
-              class="group active:(!ring-0) hover:(!bg-primary !bg-opacity-25)"
+                          class="group active:(!ring-0) hover:(!bg-primary !bg-opacity-25)"
-              @click="navigateTo('/account/users')"
+                          @click="navigateTo('/account/users')"
-            >
+                        >
-              <div class="flex items-center space-x-2">
+                          <div class="flex items-center space-x-2">
+                            <MdiAccountSupervisorOutline />
+
+                            <div class="select-none">User Management</div>
+                          </div>
+                        </a-menu-item> -->
+
+            <a-sub-menu key="users" class="!bg-white">
+              <template #icon>
                 <MdiAccountSupervisorOutline />
+              </template>
+              <template #title>Users</template>
+              <a-menu-item key="list" class="text-xs !pl-10" @click="navigateTo('/account/users/list')">User Management</a-menu-item>
+              <a-menu-item key="settings" class="text-xs !pl-10" @click="navigateTo('/account/users/settings')">Settings</a-menu-item>
+              <a-menu-item key="password-reset" class="text-xs !pl-10" @click="navigateTo('/account/users/password-reset')">
+                Reset Password
+              </a-menu-item>
+            </a-sub-menu>
 
-                <div class="select-none">User Management</div>
-              </div>
-            </a-menu-item>
             <a-menu-item
               key="tokens"
               class="group active:(!ring-0) hover:(!bg-primary !bg-opacity-25)"
@@ -57,3 +72,9 @@ const selectedTabKeys = computed(() => [$route.params.page])
     </a-layout>
   </div>
 </template>
+
+<style lang="scss" scoped>
+:deep(.nc-user-sidebar .ant-menu-sub.ant-menu-inline) {
+  @apply bg-transparent;
+}
+</style>

packages/nc-gui/pages/account/index/users.vue

@@ -1,41 +1,5 @@
-<script setup lang="ts">
-import { useUIPermission } from '~/composables/useUIPermission'
-
-const { isUIAllowed } = useUIPermission()
-
-const tabs = [
-  ...(isUIAllowed('superAdminUserManagement')
-    ? [
-        { label: 'Users', key: 'list' },
-        { label: 'Settings', key: 'settings' },
-      ]
-    : []),
-  { label: 'Reset Password', key: 'password-reset' },
-]
-
-const $route = useRoute()
-
-const selectedTabKey = computed({
-  get() {
-    return tabs.find((t) => t.key === $route.params.tabType)?.key ?? tabs[0].key
-  },
-  set(val) {
-    navigateTo(`/account/users/${val}`)
-  },
-})
-</script>
-
 <template>
   <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-4">
-    <a-tabs v-model:active-key="selectedTabKey" :open-keys="[]" mode="horizontal" class="nc-auth-tabs">
+    <NuxtPage />
-      <a-tab-pane v-for="tab of tabs" :key="tab.key" class="select-none">
-        <template #tab>
-          <span class="user-management-tab-label">
-            {{ tab.label }}
-          </span>
-        </template>
-      </a-tab-pane>
-    </a-tabs>
-    <NuxtPage :tab-key="selectedTabKey" />
   </div>
 </template>

packages/nc-gui/pages/account/index/users/[[nestedPage]].vue

@@ -0,0 +1,11 @@
+<template>
+  <template v-if="$route.params.nestedPage === 'list'">
+    <LazyAccountUserList />
+  </template>
+  <template v-else-if="$route.params.nestedPage === 'settings'">
+    <LazyAccountSignupSettings />
+  </template>
+  <template v-else-if="$route.params.nestedPage === 'password-reset'">
+    <LazyAccountResetPassword />
+  </template>
+</template>

packages/nc-gui/pages/account/index/users/[[tabType]].vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { defineProps } from '#imports'
-
-const props = defineProps<{
-  tabKey: string
-}>()
-</script>
-
-<template>
-  <template v-if="props.tabKey === 'list'">
-    <LazyAccountUserList />
-  </template>
-  <template v-else-if="props.tabKey === 'settings'">
-    <LazyAccountSignupSettings />
-  </template>
-  <template v-else-if="props.tabKey === 'password-reset'">
-    <LazyAccountResetPassword />
-  </template>
-</template>