santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): use icon fallback for sidebar user avatar

Browse Source
This commit is contained in:
santasri.pachhal
2026-07-23 10:16:34 +05:30
parent 2f25fd49be
commit 77b6755d05
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/app-sidebar.tsx
View File

@@ -55,7 +55,6 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
[authUser?.first_name, authUser?.last_name].filter(Boolean).join(' ') || [authUser?.first_name, authUser?.last_name].filter(Boolean).join(' ') ||
'Admin', 'Admin',
email: authUser?.email || '', email: authUser?.email || '',
avatar: authUser?.profile_photo_url || '/avatars/profile.jpg',
}; };
return ( return (

18
src/components/nav-user.tsx
View File

@@ -7,11 +7,12 @@ import {
CreditCard, CreditCard,
LogOut, LogOut,
Sparkles, Sparkles,
UserRound,
} from 'lucide-react'; } from 'lucide-react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@@ -39,7 +40,6 @@ export function NavUser({
user: { user: {
name: string; name: string;
email: string; email: string;
avatar: string;
}; };
}) { }) {
const { isMobile } = useSidebar(); const { isMobile } = useSidebar();
@@ -76,9 +76,10 @@ export function NavUser({
size="lg" size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
> >
<Avatar className="h-8 w-8 rounded-lg"> <Avatar className="h-8 w-8">
<AvatarImage src={user.avatar} alt={user.name} /> <AvatarFallback>
<AvatarFallback className="rounded-lg">CN</AvatarFallback> <UserRound className="size-4" aria-hidden="true" />
</AvatarFallback>
</Avatar> </Avatar>
<div className="grid flex-1 text-left text-sm leading-tight"> <div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">{user.name}</span> <span className="truncate font-semibold">{user.name}</span>
@@ -95,9 +96,10 @@ export function NavUser({
> >
<DropdownMenuLabel className="p-0 font-normal"> <DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm"> <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar className="h-8 w-8 rounded-lg"> <Avatar className="h-8 w-8">
<AvatarImage src={user.avatar} alt={user.name} /> <AvatarFallback>
<AvatarFallback className="rounded-lg">CN</AvatarFallback> <UserRound className="size-4" aria-hidden="true" />
</AvatarFallback>
</Avatar> </Avatar>
<div className="grid flex-1 text-left text-sm leading-tight"> <div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">{user.name}</span> <span className="truncate font-semibold">{user.name}</span>