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:38:22 +03:00
parent 85b1758950
commit 3f61ec1bb8
2 changed files with 291 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,6 +28,7 @@ export function Sidebar() {
const pathname = usePathname()
const { isCollapsed, toggleSidebar } = useSidebar()
// Загружаем список чатов для подсчета непрочитанных сообщений
const { data: conversationsData } = useQuery(GET_CONVERSATIONS, {
pollInterval: 60000, // Обновляем каждую минуту в сайдбаре - этого достаточно
@ -141,28 +142,53 @@ export function Sidebar() {
const isPartnersActive = pathname.startsWith('/partners')
return (
<div className={`fixed left-4 top-4 bottom-4 ${isCollapsed ? 'w-12' : 'w-56'} bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl ${isCollapsed ? 'p-2' : 'p-3'} transition-all duration-300 ease-in-out z-50`}>
<div className="flex flex-col h-full">
{/* Кнопка сворачивания */}
<div className={`flex ${isCollapsed ? 'justify-center' : 'justify-end'} ${isCollapsed ? 'mb-2' : 'mb-3'}`}>
<div className="relative">
{/* Основной сайдбар */}
<div className={`fixed left-4 top-4 bottom-4 ${isCollapsed ? 'w-16' : 'w-56'} bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl ${isCollapsed ? 'p-2' : 'p-3'} transition-all duration-300 ease-in-out z-50`}>
{/* ОХУЕННАЯ кнопка сворачивания - на правом краю сайдбара */}
<div className="absolute -right-6 top-1/2 -translate-y-1/2 z-[999]">
<div className="relative group">
{/* Основная кнопка с безопасными эффектами */}
<Button
variant="ghost"
size="icon"
onClick={toggleSidebar}
className={`${isCollapsed ? 'h-7 w-7' : 'h-8 w-8'} text-white/60 hover:text-white hover:bg-white/10 transition-all duration-200`}
className="relative h-12 w-12 rounded-full bg-gradient-to-br from-white/20 to-white/5 border border-white/30 hover:from-white/30 hover:to-white/10 transition-all duration-300 ease-out hover:scale-110 active:scale-95 backdrop-blur-xl shadow-lg hover:shadow-xl hover:shadow-purple-500/20 group-hover:border-purple-300/50"
title={isCollapsed ? "Развернуть сайдбар" : "Свернуть сайдбар"}
>
{/* Простая анимированная иконка */}
<div className="transition-transform duration-300 ease-out group-hover:scale-110">
{isCollapsed ? (
<ChevronRight className="h-4 w-4" />
<ChevronRight className="h-6 w-6 text-white/80 group-hover:text-white transition-colors duration-300" />
) : (
<ChevronLeft className="h-4 w-4" />
<ChevronLeft className="h-6 w-6 text-white/80 group-hover:text-white transition-colors duration-300" />
)}
</Button>
</div>
{/* Простое свечение при наведении */}
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-purple-500/0 to-blue-500/0 group-hover:from-purple-500/10 group-hover:to-blue-500/10 transition-all duration-500"></div>
</Button>
{/* Подсказка только в свернутом состоянии */}
{isCollapsed && (
<div className="absolute left-full ml-3 top-1/2 -translate-y-1/2 whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all duration-300">
<div className="bg-gradient-to-r from-purple-500/20 to-blue-500/20 backdrop-blur-xl border border-white/20 rounded-lg px-3 py-2">
<div className="text-sm text-white font-medium flex items-center space-x-2">
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<span>⚡ Развернуть</span>
</div>
</div>
</div>
)}
</div>
</div>
<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 p-4 mb-4 shadow-lg">
<Card className="bg-gradient-to-br from-white/15 to-white/5 backdrop-blur border border-white/30 mb-4 shadow-lg overflow-hidden">
{!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">
@ -191,10 +217,12 @@ export function Sidebar() {
</div>
</div>
</div>
</div>
) : (
// Свернутое состояние
<div className="flex flex-col items-center">
<div className="relative mb-2">
// Свернутое состояние - более компактное и красивое
<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
@ -209,18 +237,6 @@ export function Sidebar() {
</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="text-center">
<p className="text-white text-[10px] font-semibold leading-tight max-w-full break-words"
title={getOrganizationName()}
style={{ fontSize: '9px', lineHeight: '11px' }}>
{getOrganizationName().length > 12
? getOrganizationName().substring(0, 12) + '...'
: getOrganizationName()
}
</p>
<div className="flex items-center justify-center mt-1">
<div className="w-1.5 h-1.5 bg-purple-400 rounded-full"></div>
</div>
</div>
</div>
)}
@ -438,5 +454,6 @@ export function Sidebar() {
</div>
</div>
</div>
</div>
)
}

2
src/hooks/useSidebar.tsx
View File

@ -20,7 +20,7 @@ export function SidebarProvider({ children }: { children: ReactNode }) {
const getSidebarMargin = () => {
// Учитываем отступ слева (left-4) + ширина сайдбара + дополнительный отступ
return isCollapsed ? 'ml-20' : 'ml-64'
return isCollapsed ? 'ml-24' : 'ml-64'
}
return (