feat/menu-structure: update role switcher

app/components/layout/AppSidebar.vue

@@ -4,6 +4,8 @@ type NavGroup = {
   items: any[]
 }
 
+const { getActiveRole } = useUserStore()
+
 const navMenu = ref<NavGroup[]>([])
 
 const teams: {
@@ -41,18 +43,34 @@ onMounted(async () => {
   await setMenu()
 })
 
+async function setMenu() {
+  const activeRole = getActiveRole()
+  const activeRoleParts = activeRole ? activeRole.split('|') : []
+  const role = activeRoleParts[0]+(activeRoleParts.length > 1 ? `-${activeRoleParts[1]}` : '')
+  try {
+    const res = await fetch(`/side-menu-items/${role.toLowerCase()}.json`)
+    const rawMenu = await res.text()
+    navMenu.value = JSON.parse(rawMenu)
+  } catch (e) {
+    const res = await fetch(`/side-menu-items/blank.json`)
+    const rawMenu = await res.text()
+    navMenu.value = JSON.parse(rawMenu)
+  }
+}
+
 function resolveNavItemComponent(item: any): any {
   if ('children' in item) return resolveComponent('LayoutSidebarNavGroup')
 
   return resolveComponent('LayoutSidebarNavLink')
 }
 
-async function setMenu() {
-  const position_code = 'sys'
-  const res = await fetch(`/side-menu-items/${position_code}.json`)
-  const rawMenu = await res.text()
-  navMenu.value = JSON.parse(rawMenu)
-}
+watch(getActiveRole, async () => {
+  await setMenu()
+  // const activeRole = getActiveRole()
+  // const res = await fetch(`/side-menu-items/${activeRole}.json`)
+  // const rawMenu = await res.text()
+  // navMenu.value = JSON.parse(rawMenu)
+})
 </script>
 
 <template>

app/components/layout/SidebarNavFooter.vue

@@ -10,8 +10,8 @@ import { useSidebar } from '~/components/pub/ui/sidebar'
 // }>()
 
 const { isMobile } = useSidebar()
-const { logout } = useUserStore()
-const userStore = useUserStore().user
+const { user, logout, setActiveRole, getActiveRole } = useUserStore()
+// const userStore = useUserStore().user
 
 function handleLogout() {
   navigateTo('/auth/login')
@@ -32,10 +32,10 @@ const showModalTheme = ref(false)
               class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <Avatar class="h-8 w-8 rounded-lg">
-                <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
+                <AvatarImage src="" :alt="user.user_name || 'system'" />
                 <AvatarFallback class="rounded-lg">
                   {{
-                    userStore?.user_name
+                    user.user_name
                       ?.split(' ')
                       .map((n: string) => n[0])
                       .join('') || ''
@@ -43,8 +43,8 @@ const showModalTheme = ref(false)
                 </AvatarFallback>
               </Avatar>
               <div class="grid flex-1 text-left text-sm leading-tight">
-                <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
-                <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
+                <span class="truncate font-semibold">{{ user.user_name || '' }}</span>
+                <span class="truncate text-xs">{{ user.user_email || '' }}</span>
               </div>
               <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
             </SidebarMenuButton>
@@ -57,10 +57,10 @@ const showModalTheme = ref(false)
             <DropdownMenuLabel class="p-0 font-normal">
               <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <Avatar class="h-8 w-8 rounded-lg">
-                  <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
+                  <AvatarImage src="" :alt="user.user_name || 'system'" />
                   <AvatarFallback class="rounded-lg">
                     {{
-                      userStore?.user_name
+                      user.user_name
                         ?.split(' ')
                         .map((n: string) => n[0])
                         .join('') || ''
@@ -68,20 +68,24 @@ const showModalTheme = ref(false)
                   </AvatarFallback>
                 </Avatar>
                 <div class="grid flex-1 text-left text-sm leading-tight">
-                  <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
-                  <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
+                  <span class="truncate font-semibold">{{ user.user_name || '' }}</span>
+                  <span class="truncate text-xs">{{ user.user_email || '' }}</span>
                 </div>
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            {{ userStore }}
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem class="hover:bg-gray-100" @click="showModalTheme = true">
+            <DropdownMenuItem class="hover:bg-gray-100" @click="showModalTheme = true">
+              <Icon name="i-lucide-user" />
+              Profile
+            </DropdownMenuItem>
+            <template v-if="user.roles.length > 1">
+              <DropdownMenuSeparator />
+              <DropdownMenuItem v-for="role in user.roles" class="hover:bg-gray-100" @click="setActiveRole(role)">
                 <Icon name="i-lucide-user" />
-                Profile
+                {{ role }}
+                <Icon name="i-lucide-check" class="ml-auto" v-if="getActiveRole() === role" />
               </DropdownMenuItem>
-            </DropdownMenuGroup>
+            </template>
             <DropdownMenuSeparator />
             <DropdownMenuItem class="hover:bg-gray-100" @click="handleLogout">
               <Icon name="i-lucide-log-out" />