Обновлен компонент сайдбара: улучшена структура кода, добавлены новые кнопки для навигации, включая "Склад" и "Статистика" для фулфилмент-центров. Оптимизированы запросы GraphQL для получения данных о пользователе и его организации. Улучшена читаемость кода и взаимодействие с пользователем.

This commit is contained in:
Veronika Smirnova
2025-07-22 10:48:06 +03:00
parent a611460168
commit 03ca28e68c
5 changed files with 1395 additions and 154 deletions

View File

@ -1,15 +1,15 @@
"use client"
"use client";
import { useAuth } from '@/hooks/useAuth'
import { useSidebar } from '@/hooks/useSidebar'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
import { useRouter, usePathname } from 'next/navigation'
import { useQuery } from '@apollo/client'
import { GET_CONVERSATIONS, GET_INCOMING_REQUESTS } from '@/graphql/queries'
import {
Settings,
import { useAuth } from "@/hooks/useAuth";
import { useSidebar } from "@/hooks/useSidebar";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { useRouter, usePathname } from "next/navigation";
import { useQuery } from "@apollo/client";
import { GET_CONVERSATIONS, GET_INCOMING_REQUESTS } from "@/graphql/queries";
import {
Settings,
LogOut,
Store,
MessageCircle,
@ -19,132 +19,157 @@ import {
Truck,
Handshake,
ChevronLeft,
ChevronRight
} from 'lucide-react'
ChevronRight,
BarChart3,
} from "lucide-react";
export function Sidebar() {
const { user, logout } = useAuth()
const router = useRouter()
const pathname = usePathname()
const { isCollapsed, toggleSidebar } = useSidebar()
const { user, logout } = useAuth();
const router = useRouter();
const pathname = usePathname();
const { isCollapsed, toggleSidebar } = useSidebar();
// Загружаем список чатов для подсчета непрочитанных сообщений
const { data: conversationsData } = useQuery(GET_CONVERSATIONS, {
pollInterval: 60000, // Обновляем каждую минуту в сайдбаре - этого достаточно
fetchPolicy: 'cache-first',
errorPolicy: 'ignore', // Игнорируем ошибки чтобы не ломать сайдбар
fetchPolicy: "cache-first",
errorPolicy: "ignore", // Игнорируем ошибки чтобы не ломать сайдбар
notifyOnNetworkStatusChange: false, // Плавные обновления без мерцания
})
});
// Загружаем входящие заявки для подсчета новых запросов
const { data: incomingRequestsData } = useQuery(GET_INCOMING_REQUESTS, {
pollInterval: 60000, // Обновляем каждую минуту
fetchPolicy: 'cache-first',
errorPolicy: 'ignore',
fetchPolicy: "cache-first",
errorPolicy: "ignore",
notifyOnNetworkStatusChange: false,
})
});
const conversations = conversationsData?.conversations || []
const incomingRequests = incomingRequestsData?.incomingRequests || []
const totalUnreadCount = conversations.reduce((sum: number, conv: { unreadCount?: number }) => sum + (conv.unreadCount || 0), 0)
const incomingRequestsCount = incomingRequests.length
const conversations = conversationsData?.conversations || [];
const incomingRequests = incomingRequestsData?.incomingRequests || [];
const totalUnreadCount = conversations.reduce(
(sum: number, conv: { unreadCount?: number }) =>
sum + (conv.unreadCount || 0),
0
);
const incomingRequestsCount = incomingRequests.length;
const getInitials = () => {
const orgName = getOrganizationName()
return orgName.charAt(0).toUpperCase()
}
const orgName = getOrganizationName();
return orgName.charAt(0).toUpperCase();
};
const getOrganizationName = () => {
if (user?.organization?.name) {
return user.organization.name
return user.organization.name;
}
if (user?.organization?.fullName) {
return user.organization.fullName
return user.organization.fullName;
}
return 'Организация'
}
return "Организация";
};
const getCabinetType = () => {
if (!user?.organization?.type) return 'Кабинет'
if (!user?.organization?.type) return "Кабинет";
switch (user.organization.type) {
case 'FULFILLMENT':
return 'Фулфилмент'
case 'SELLER':
return 'Селлер'
case 'LOGIST':
return 'Логистика'
case 'WHOLESALE':
return 'Оптовик'
case "FULFILLMENT":
return "Фулфилмент";
case "SELLER":
return "Селлер";
case "LOGIST":
return "Логистика";
case "WHOLESALE":
return "Оптовик";
default:
return 'Кабинет'
return "Кабинет";
}
}
};
const handleSettingsClick = () => {
router.push('/settings')
}
router.push("/settings");
};
const handleMarketClick = () => {
router.push('/market')
}
router.push("/market");
};
const handleMessengerClick = () => {
router.push('/messenger')
}
router.push("/messenger");
};
const handleServicesClick = () => {
router.push('/services')
}
router.push("/services");
};
const handleWarehouseClick = () => {
router.push('/warehouse')
}
router.push("/warehouse");
};
const handleEmployeesClick = () => {
router.push('/employees')
}
router.push("/employees");
};
const handleSuppliesClick = () => {
// Для каждого типа кабинета свой роут
switch (user?.organization?.type) {
case 'FULFILLMENT':
router.push('/fulfillment-supplies')
break
case 'SELLER':
router.push('/supplies')
break
case 'WHOLESALE':
router.push('/supplies')
break
case 'LOGIST':
router.push('/logistics')
break
case "FULFILLMENT":
router.push("/fulfillment-supplies");
break;
case "SELLER":
router.push("/supplies");
break;
case "WHOLESALE":
router.push("/supplies");
break;
case "LOGIST":
router.push("/logistics");
break;
default:
router.push('/supplies')
router.push("/supplies");
}
}
};
const handleFulfillmentWarehouseClick = () => {
router.push("/fulfillment-warehouse");
};
const handleFulfillmentStatisticsClick = () => {
router.push("/fulfillment-statistics");
};
const handlePartnersClick = () => {
router.push('/partners')
}
router.push("/partners");
};
const isSettingsActive = pathname === '/settings'
const isMarketActive = pathname.startsWith('/market')
const isMessengerActive = pathname.startsWith('/messenger')
const isServicesActive = pathname.startsWith('/services')
const isWarehouseActive = pathname.startsWith('/warehouse')
const isEmployeesActive = pathname.startsWith('/employees')
const isSuppliesActive = pathname.startsWith('/supplies') || pathname.startsWith('/fulfillment-supplies') || pathname.startsWith('/logistics')
const isPartnersActive = pathname.startsWith('/partners')
const isSettingsActive = pathname === "/settings";
const isMarketActive = pathname.startsWith("/market");
const isMessengerActive = pathname.startsWith("/messenger");
const isServicesActive = pathname.startsWith("/services");
const isWarehouseActive = pathname.startsWith("/warehouse");
const isFulfillmentWarehouseActive = pathname.startsWith(
"/fulfillment-warehouse"
);
const isFulfillmentStatisticsActive = pathname.startsWith(
"/fulfillment-statistics"
);
const isEmployeesActive = pathname.startsWith("/employees");
const isSuppliesActive =
pathname.startsWith("/supplies") ||
pathname.startsWith("/fulfillment-supplies") ||
pathname.startsWith("/logistics");
const isPartnersActive = pathname.startsWith("/partners");
return (
<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={`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">
@ -164,11 +189,11 @@ export function Sidebar() {
<ChevronLeft className="h-6 w-6 text-white/80 group-hover:text-white transition-colors duration-300" />
)}
</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">
@ -192,9 +217,9 @@ export function Sidebar() {
<div className="relative flex-shrink-0">
<Avatar className="h-8 w-8 ring-2 ring-white/40">
{user?.avatar ? (
<AvatarImage
src={user.avatar}
alt="Аватар пользователя"
<AvatarImage
src={user.avatar}
alt="Аватар пользователя"
className="w-full h-full object-cover"
/>
) : null}
@ -205,7 +230,10 @@ export function Sidebar() {
<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()}>
<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">
@ -219,12 +247,15 @@ export function Sidebar() {
) : (
// Свернутое состояние - только аватар
<div className="flex justify-center">
<div className="relative" title={`${getOrganizationName()} - ${getCabinetType()}`}>
<div
className="relative"
title={`${getOrganizationName()} - ${getCabinetType()}`}
>
<Avatar className="h-7 w-7 ring-2 ring-white/40">
{user?.avatar ? (
<AvatarImage
src={user.avatar}
alt="Аватар пользователя"
<AvatarImage
src={user.avatar}
alt="Аватар пользователя"
className="w-full h-full object-cover"
/>
) : null}
@ -242,24 +273,32 @@ export function Sidebar() {
<div className="space-y-1 mb-3 flex-1">
<Button
variant={isMarketActive ? "secondary" : "ghost"}
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs ${
isMarketActive
? 'bg-white/20 text-white hover:bg-white/30'
: 'text-white/80 hover:bg-white/10 hover:text-white'
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handleMarketClick}
title={isCollapsed ? "Маркет" : ""}
>
<Store className={`${isCollapsed ? 'h-4 w-4' : 'h-4 w-4'} flex-shrink-0`} />
<Store
className={`${
isCollapsed ? "h-4 w-4" : "h-4 w-4"
} flex-shrink-0`}
/>
{!isCollapsed && <span className="ml-3">Маркет</span>}
</Button>
<Button
variant={isMessengerActive ? "secondary" : "ghost"}
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs relative ${
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs relative ${
isMessengerActive
? 'bg-white/20 text-white hover:bg-white/30'
: 'text-white/80 hover:bg-white/10 hover:text-white'
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handleMessengerClick}
title={isCollapsed ? "Мессенджер" : ""}
@ -268,22 +307,30 @@ export function Sidebar() {
{!isCollapsed && <span className="ml-3">Мессенджер</span>}
{/* Индикатор непрочитанных сообщений */}
{totalUnreadCount > 0 && (
<div className={`absolute ${
isCollapsed
? 'top-1 right-1 w-3 h-3'
: 'top-2 right-2 w-4 h-4'
} bg-red-500 text-white text-xs rounded-full flex items-center justify-center font-bold`}>
{isCollapsed ? '' : (totalUnreadCount > 99 ? '99+' : totalUnreadCount)}
<div
className={`absolute ${
isCollapsed
? "top-1 right-1 w-3 h-3"
: "top-2 right-2 w-4 h-4"
} bg-red-500 text-white text-xs rounded-full flex items-center justify-center font-bold`}
>
{isCollapsed
? ""
: totalUnreadCount > 99
? "99+"
: totalUnreadCount}
</div>
)}
</Button>
<Button
variant={isPartnersActive ? "secondary" : "ghost"}
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs relative ${
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs relative ${
isPartnersActive
? 'bg-white/20 text-white hover:bg-white/30'
: 'text-white/80 hover:bg-white/10 hover:text-white'
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handlePartnersClick}
title={isCollapsed ? "Партнёры" : ""}
@ -292,24 +339,32 @@ export function Sidebar() {
{!isCollapsed && <span className="ml-3">Партнёры</span>}
{/* Индикатор входящих заявок */}
{incomingRequestsCount > 0 && (
<div className={`absolute ${
isCollapsed
? 'top-1 right-1 w-3 h-3'
: 'top-2 right-2 w-4 h-4'
} bg-red-500 text-white text-xs rounded-full flex items-center justify-center font-bold`}>
{isCollapsed ? '' : (incomingRequestsCount > 99 ? '99+' : incomingRequestsCount)}
<div
className={`absolute ${
isCollapsed
? "top-1 right-1 w-3 h-3"
: "top-2 right-2 w-4 h-4"
} bg-red-500 text-white text-xs rounded-full flex items-center justify-center font-bold`}
>
{isCollapsed
? ""
: incomingRequestsCount > 99
? "99+"
: incomingRequestsCount}
</div>
)}
</Button>
{/* Услуги - только для фулфилмент центров */}
{user?.organization?.type === 'FULFILLMENT' && (
{user?.organization?.type === "FULFILLMENT" && (
<Button
variant={isServicesActive ? "secondary" : "ghost"}
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs ${
isServicesActive
? 'bg-white/20 text-white hover:bg-white/30'
: 'text-white/80 hover:bg-white/10 hover:text-white'
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handleServicesClick}
title={isCollapsed ? "Услуги" : ""}
@ -320,13 +375,15 @@ export function Sidebar() {
)}
{/* Сотрудники - только для фулфилмент центров */}
{user?.organization?.type === 'FULFILLMENT' && (
{user?.organization?.type === "FULFILLMENT" && (
<Button
variant={isEmployeesActive ? "secondary" : "ghost"}
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs ${
isEmployeesActive
? 'bg-white/20 text-white hover:bg-white/30'
: 'text-white/80 hover:bg-white/10 hover:text-white'
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handleEmployeesClick}
title={isCollapsed ? "Сотрудники" : ""}
@ -337,13 +394,15 @@ export function Sidebar() {
)}
{/* Мои поставки - для селлеров */}
{user?.organization?.type === 'SELLER' && (
{user?.organization?.type === "SELLER" && (
<Button
variant={isSuppliesActive ? "secondary" : "ghost"}
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs ${
isSuppliesActive
? 'bg-white/20 text-white hover:bg-white/30'
: 'text-white/80 hover:bg-white/10 hover:text-white'
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handleSuppliesClick}
title={isCollapsed ? "Мои поставки" : ""}
@ -354,30 +413,74 @@ export function Sidebar() {
)}
{/* Входящие поставки - для фулфилмент */}
{user?.organization?.type === 'FULFILLMENT' && (
{user?.organization?.type === "FULFILLMENT" && (
<Button
variant={isSuppliesActive ? "secondary" : "ghost"}
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs ${
isSuppliesActive
? 'bg-white/20 text-white hover:bg-white/30'
: 'text-white/80 hover:bg-white/10 hover:text-white'
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handleSuppliesClick}
title={isCollapsed ? "Входящие поставки" : ""}
>
<Truck className="h-4 w-4 flex-shrink-0" />
{!isCollapsed && <span className="ml-3">Входящие поставки</span>}
{!isCollapsed && (
<span className="ml-3">Входящие поставки</span>
)}
</Button>
)}
{/* Склад - для фулфилмент */}
{user?.organization?.type === "FULFILLMENT" && (
<Button
variant={isFulfillmentWarehouseActive ? "secondary" : "ghost"}
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs ${
isFulfillmentWarehouseActive
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handleFulfillmentWarehouseClick}
title={isCollapsed ? "Склад" : ""}
>
<Warehouse className="h-4 w-4 flex-shrink-0" />
{!isCollapsed && <span className="ml-3">Склад</span>}
</Button>
)}
{/* Статистика - для фулфилмент */}
{user?.organization?.type === "FULFILLMENT" && (
<Button
variant={isFulfillmentStatisticsActive ? "secondary" : "ghost"}
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs ${
isFulfillmentStatisticsActive
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handleFulfillmentStatisticsClick}
title={isCollapsed ? "Статистика" : ""}
>
<BarChart3 className="h-4 w-4 flex-shrink-0" />
{!isCollapsed && <span className="ml-3">Статистика</span>}
</Button>
)}
{/* Отгрузки - для оптовиков */}
{user?.organization?.type === 'WHOLESALE' && (
{user?.organization?.type === "WHOLESALE" && (
<Button
variant={isSuppliesActive ? "secondary" : "ghost"}
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs ${
isSuppliesActive
? 'bg-white/20 text-white hover:bg-white/30'
: 'text-white/80 hover:bg-white/10 hover:text-white'
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handleSuppliesClick}
title={isCollapsed ? "Отгрузки" : ""}
@ -388,13 +491,15 @@ export function Sidebar() {
)}
{/* Перевозки - для логистов */}
{user?.organization?.type === 'LOGIST' && (
{user?.organization?.type === "LOGIST" && (
<Button
variant={isSuppliesActive ? "secondary" : "ghost"}
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs ${
isSuppliesActive
? 'bg-white/20 text-white hover:bg-white/30'
: 'text-white/80 hover:bg-white/10 hover:text-white'
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handleSuppliesClick}
title={isCollapsed ? "Перевозки" : ""}
@ -405,13 +510,15 @@ export function Sidebar() {
)}
{/* Склад - только для оптовиков */}
{user?.organization?.type === 'WHOLESALE' && (
{user?.organization?.type === "WHOLESALE" && (
<Button
variant={isWarehouseActive ? "secondary" : "ghost"}
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs ${
isWarehouseActive
? 'bg-white/20 text-white hover:bg-white/30'
: 'text-white/80 hover:bg-white/10 hover:text-white'
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handleWarehouseClick}
title={isCollapsed ? "Склад" : ""}
@ -420,13 +527,15 @@ export function Sidebar() {
{!isCollapsed && <span className="ml-3">Склад</span>}
</Button>
)}
<Button
variant={isSettingsActive ? "secondary" : "ghost"}
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-left transition-all duration-200 text-xs ${
isSettingsActive
? 'bg-white/20 text-white hover:bg-white/30'
: 'text-white/80 hover:bg-white/10 hover:text-white'
? "bg-white/20 text-white hover:bg-white/30"
: "text-white/80 hover:bg-white/10 hover:text-white"
} cursor-pointer`}
onClick={handleSettingsClick}
title={isCollapsed ? "Настройки профиля" : ""}
@ -440,7 +549,9 @@ export function Sidebar() {
<div>
<Button
variant="ghost"
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-white/80 hover:bg-red-500/20 hover:text-red-300 cursor-pointer text-xs transition-all duration-200`}
className={`w-full ${
isCollapsed ? "justify-center px-2 h-9" : "justify-start h-10"
} text-white/80 hover:bg-red-500/20 hover:text-red-300 cursor-pointer text-xs transition-all duration-200`}
onClick={logout}
title={isCollapsed ? "Выйти" : ""}
>
@ -451,5 +562,5 @@ export function Sidebar() {
</div>
</div>
</div>
)
}
);
}