munawwirul_jamal/simrsx-fe
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat/menu-structure: update role switcher

Browse Source
This commit is contained in:
Andrian Roshandy
2025-11-12 06:51:03 +07:00
parent e9e0e21d1b
commit 02c14089f1
2 changed files with 44 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/layout/SidebarNavFooter.vue
+20 -16
View File
@@ -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" />