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

🐛 fix (sidebar): fix sidebar user info when user is not logged in

Browse Source
This commit is contained in:
Abizrh
2025-08-12 14:03:07 +07:00
parent dc5e7d48da
commit adf189dab9
1 changed files with 57 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/layout/SidebarNavFooter.vue
+57 -55
View File
@@ -22,73 +22,75 @@ const showModalTheme = ref(false)
</script> </script>
<template> <template>
<SidebarMenu> <ClientOnly>
<SidebarMenuItem> <SidebarMenu>
<DropdownMenu> <SidebarMenuItem>
<DropdownMenuTrigger as-child> <DropdownMenu>
<SidebarMenuButton <DropdownMenuTrigger as-child>
size="lg" <SidebarMenuButton
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" size="lg"
> 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" />
<AvatarFallback class="rounded-lg">
{{
userStore?.user_name
?.split(' ')
.map((n) => n[0])
.join('')
}}
</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>
</div>
<Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="end"
>
<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"> <Avatar class="h-8 w-8 rounded-lg">
<AvatarImage src="" :alt="userStore?.user_name" /> <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
<AvatarFallback class="rounded-lg"> <AvatarFallback class="rounded-lg">
{{ {{
userStore?.user_name userStore?.user_name
?.split(' ') ?.split(' ')
.map((n) => n[0]) .map((n) => n[0])
.join('') .join('') || ''
}} }}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div class="grid flex-1 text-left text-sm leading-tight"> <div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ userStore?.user_name }}</span> <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
<span class="truncate text-xs">{{ userStore?.user_email }}</span> <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
</div> </div>
</div> <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
</DropdownMenuLabel> </SidebarMenuButton>
<DropdownMenuSeparator /> </DropdownMenuTrigger>
<DropdownMenuSeparator /> <DropdownMenuContent
<DropdownMenuGroup> class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
<DropdownMenuItem @click="showModalTheme = true"> :side="isMobile ? 'bottom' : 'right'"
<Icon name="i-lucide-user" /> align="end"
Profile >
<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'" />
<AvatarFallback class="rounded-lg">
{{
userStore?.user_name
?.split(' ')
.map((n) => n[0])
.join('') || ''
}}
</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>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem @click="showModalTheme = true">
<Icon name="i-lucide-user" />
Profile
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem @click="handleLogout">
<Icon name="i-lucide-log-out" />
Log out
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuGroup> </DropdownMenuContent>
<DropdownMenuSeparator /> </DropdownMenu>
<DropdownMenuItem @click="handleLogout"> </SidebarMenuItem>
<Icon name="i-lucide-log-out" /> </SidebarMenu>
Log out </ClientOnly>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</template> </template>
<style scoped></style> <style scoped></style>