Sfera/sfera
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Обновлен компонент сайдбара: изменен интерфейс отображения информации о пользователе, улучшена компоновка для развернутого и свернутого состояний. Оптимизирован код для лучшей читаемости и взаимодействия с пользователем.

Browse Source
This commit is contained in:
Bivekich
2025-07-21 16:58:49 +03:00
parent 3f61ec1bb8
commit ec974998c9
1 changed files with 43 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/dashboard/sidebar.tsx
View File

@ -185,62 +185,58 @@ export function Sidebar() {
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
{/* Информация о пользователе */} {/* Информация о пользователе */}
<Card className="bg-gradient-to-br from-white/15 to-white/5 backdrop-blur border border-white/30 mb-4 shadow-lg overflow-hidden"> <div className="bg-white/5 backdrop-blur border border-white/30 rounded-xl mb-3 p-2.5 shadow-sm">
{!isCollapsed ? ( {!isCollapsed ? (
// Развернутое состояние // Развернутое состояние - без карточки
<div className="p-4"> <div className="flex items-center space-x-2.5">
<div className="flex items-center space-x-3"> <div className="relative flex-shrink-0">
<div className="relative flex-shrink-0"> <Avatar className="h-8 w-8 ring-2 ring-white/40">
<Avatar className="h-12 w-12 ring-2 ring-white/20"> {user?.avatar ? (
{user?.avatar ? ( <AvatarImage
<AvatarImage src={user.avatar}
src={user.avatar} alt="Аватар пользователя"
alt="Аватар пользователя" className="w-full h-full object-cover"
className="w-full h-full object-cover" />
/> ) : null}
) : null} <AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white text-xs font-semibold">
<AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white text-sm font-semibold"> {getInitials()}
{getInitials()} </AvatarFallback>
</AvatarFallback> </Avatar>
</Avatar> <div className="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-green-400 rounded-full border-2 border-white/40"></div>
<div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-400 rounded-full border-2 border-white/20"></div> </div>
</div> <div className="flex-1 min-w-0">
<div className="flex-1 min-w-0"> <p className="text-white text-xs font-medium mb-0.5 break-words" title={getOrganizationName()}>
<p className="text-white text-sm font-semibold mb-1 break-words" title={getOrganizationName()}> {getOrganizationName()}
{getOrganizationName()} </p>
<div className="flex items-center space-x-1">
<div className="w-1 h-1 bg-purple-400 rounded-full flex-shrink-0"></div>
<p className="text-white/50 text-[10px]">
{getCabinetType()}
</p> </p>
<div className="flex items-center space-x-1">
<div className="w-2 h-2 bg-purple-400 rounded-full flex-shrink-0"></div>
<p className="text-white/70 text-xs font-medium">
{getCabinetType()}
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
// Свернутое состояние - более компактное и красивое // Свернутое состояние - только аватар
<div className="p-3"> <div className="flex justify-center">
<div className="flex flex-col items-center space-y-2"> <div className="relative" title={`${getOrganizationName()} - ${getCabinetType()}`}>
<div className="relative" title={`${getOrganizationName()} - ${getCabinetType()}`}> <Avatar className="h-7 w-7 ring-2 ring-white/40">
<Avatar className="h-10 w-10 ring-2 ring-white/20"> {user?.avatar ? (
{user?.avatar ? ( <AvatarImage
<AvatarImage src={user.avatar}
src={user.avatar} alt="Аватар пользователя"
alt="Аватар пользователя" className="w-full h-full object-cover"
className="w-full h-full object-cover" />
/> ) : null}
) : null} <AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white text-[10px] font-semibold">
<AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white text-xs font-semibold"> {getInitials()}
{getInitials()} </AvatarFallback>
</AvatarFallback> </Avatar>
</Avatar> <div className="absolute -bottom-0.5 -right-0.5 w-1.5 h-1.5 bg-green-400 rounded-full border-2 border-white/40"></div>
<div className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-green-400 rounded-full border border-white/20"></div>
</div>
</div> </div>
</div> </div>
)} )}
</Card> </div>
{/* Навигация */} {/* Навигация */}
<div className="space-y-1 mb-3 flex-1"> <div className="space-y-1 mb-3 flex-1">