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">
{/* Информация о пользователе */}
<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 ? (
// Развернутое состояние
<div className="p-4">
<div className="flex items-center space-x-3">
<div className="relative flex-shrink-0">
<Avatar className="h-12 w-12 ring-2 ring-white/20">
{user?.avatar ? (
<AvatarImage
src={user.avatar}
alt="Аватар пользователя"
className="w-full h-full object-cover"
/>
) : null}
<AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white text-sm font-semibold">
{getInitials()}
</AvatarFallback>
</Avatar>
<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 className="flex-1 min-w-0">
<p className="text-white text-sm font-semibold mb-1 break-words" title={getOrganizationName()}>
{getOrganizationName()}
// Развернутое состояние - без карточки
<div className="flex items-center space-x-2.5">
<div className="relative flex-shrink-0">
<Avatar className="h-8 w-8 ring-2 ring-white/40">
{user?.avatar ? (
<AvatarImage
src={user.avatar}
alt="Аватар пользователя"
className="w-full h-full object-cover"
/>
) : null}
<AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white text-xs font-semibold">
{getInitials()}
</AvatarFallback>
</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>
<div className="flex-1 min-w-0">
<p className="text-white text-xs font-medium mb-0.5 break-words" title={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>
<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 className="p-3">
<div className="flex flex-col items-center space-y-2">
<div className="relative" title={`${getOrganizationName()} - ${getCabinetType()}`}>
<Avatar className="h-10 w-10 ring-2 ring-white/20">
{user?.avatar ? (
<AvatarImage
src={user.avatar}
alt="Аватар пользователя"
className="w-full h-full object-cover"
/>
) : null}
<AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white text-xs font-semibold">
{getInitials()}
</AvatarFallback>
</Avatar>
<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 className="flex justify-center">
<div className="relative" title={`${getOrganizationName()} - ${getCabinetType()}`}>
<Avatar className="h-7 w-7 ring-2 ring-white/40">
{user?.avatar ? (
<AvatarImage
src={user.avatar}
alt="Аватар пользователя"
className="w-full h-full object-cover"
/>
) : null}
<AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white text-[10px] font-semibold">
{getInitials()}
</AvatarFallback>
</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>
</div>
)}
</Card>
</div>
{/* Навигация */}
<div className="space-y-1 mb-3 flex-1">