Обновлен компонент сайдбара: изменен интерфейс кнопки сворачивания, добавлены анимации и подсказки для улучшения взаимодействия с пользователем. Оптимизирован код для лучшей читаемости. Изменен отступ для коллапсированного состояния сайдбара.
This commit is contained in:
Bivekich
@ -28,6 +28,7 @@ export function Sidebar() {
|
|||||||
const pathname = usePathname()
|
const pathname = usePathname()
|
||||||
const { isCollapsed, toggleSidebar } = useSidebar()
|
const { isCollapsed, toggleSidebar } = useSidebar()
|
||||||
|
|
||||||
|
|
||||||
// Загружаем список чатов для подсчета непрочитанных сообщений
|
// Загружаем список чатов для подсчета непрочитанных сообщений
|
||||||
const { data: conversationsData } = useQuery(GET_CONVERSATIONS, {
|
const { data: conversationsData } = useQuery(GET_CONVERSATIONS, {
|
||||||
pollInterval: 60000, // Обновляем каждую минуту в сайдбаре - этого достаточно
|
pollInterval: 60000, // Обновляем каждую минуту в сайдбаре - этого достаточно
|
||||||
@ -141,300 +142,316 @@ export function Sidebar() {
|
|||||||
const isPartnersActive = pathname.startsWith('/partners')
|
const isPartnersActive = pathname.startsWith('/partners')
|
||||||
|
|
||||||
return (
|
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="relative">
|
||||||
<div className="flex flex-col h-full">
|
{/* Основной сайдбар */}
|
||||||
{/* Кнопка сворачивания */}
|
<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={`flex ${isCollapsed ? 'justify-center' : 'justify-end'} ${isCollapsed ? 'mb-2' : 'mb-3'}`}>
|
{/* ОХУЕННАЯ кнопка сворачивания - на правом краю сайдбара */}
|
||||||
<Button
|
<div className="absolute -right-6 top-1/2 -translate-y-1/2 z-[999]">
|
||||||
variant="ghost"
|
<div className="relative group">
|
||||||
size="icon"
|
{/* Основная кнопка с безопасными эффектами */}
|
||||||
onClick={toggleSidebar}
|
<Button
|
||||||
className={`${isCollapsed ? 'h-7 w-7' : 'h-8 w-8'} text-white/60 hover:text-white hover:bg-white/10 transition-all duration-200`}
|
variant="ghost"
|
||||||
>
|
size="icon"
|
||||||
{isCollapsed ? (
|
onClick={toggleSidebar}
|
||||||
<ChevronRight className="h-4 w-4" />
|
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-6 w-6 text-white/80 group-hover:text-white transition-colors duration-300" />
|
||||||
|
) : (
|
||||||
|
<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">
|
||||||
|
<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 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">
|
||||||
|
{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()}
|
||||||
|
</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>
|
||||||
) : (
|
) : (
|
||||||
<ChevronLeft className="h-4 w-4" />
|
// Свернутое состояние - более компактное и красивое
|
||||||
)}
|
<div className="p-3">
|
||||||
</Button>
|
<div className="flex flex-col items-center space-y-2">
|
||||||
</div>
|
<div className="relative" title={`${getOrganizationName()} - ${getCabinetType()}`}>
|
||||||
|
<Avatar className="h-10 w-10 ring-2 ring-white/20">
|
||||||
{/* Информация о пользователе */}
|
{user?.avatar ? (
|
||||||
<Card className="bg-gradient-to-br from-white/15 to-white/5 backdrop-blur border border-white/30 p-4 mb-4 shadow-lg">
|
<AvatarImage
|
||||||
{!isCollapsed ? (
|
src={user.avatar}
|
||||||
// Развернутое состояние
|
alt="Аватар пользователя"
|
||||||
<div className="flex items-center space-x-3">
|
className="w-full h-full object-cover"
|
||||||
<div className="relative flex-shrink-0">
|
/>
|
||||||
<Avatar className="h-12 w-12 ring-2 ring-white/20">
|
) : null}
|
||||||
{user?.avatar ? (
|
<AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white text-xs font-semibold">
|
||||||
<AvatarImage
|
{getInitials()}
|
||||||
src={user.avatar}
|
</AvatarFallback>
|
||||||
alt="Аватар пользователя"
|
</Avatar>
|
||||||
className="w-full h-full object-cover"
|
<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>
|
||||||
) : 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()}
|
|
||||||
</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>
|
)}
|
||||||
) : (
|
</Card>
|
||||||
// Свернутое состояние
|
|
||||||
<div className="flex flex-col items-center">
|
{/* Навигация */}
|
||||||
<div className="relative mb-2">
|
<div className="space-y-1 mb-3 flex-1">
|
||||||
<Avatar className="h-10 w-10 ring-2 ring-white/20">
|
<Button
|
||||||
{user?.avatar ? (
|
variant={isMarketActive ? "secondary" : "ghost"}
|
||||||
<AvatarImage
|
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
|
||||||
src={user.avatar}
|
isMarketActive
|
||||||
alt="Аватар пользователя"
|
? 'bg-white/20 text-white hover:bg-white/30'
|
||||||
className="w-full h-full object-cover"
|
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
||||||
/>
|
} cursor-pointer`}
|
||||||
) : null}
|
onClick={handleMarketClick}
|
||||||
<AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white text-xs font-semibold">
|
title={isCollapsed ? "Маркет" : ""}
|
||||||
{getInitials()}
|
>
|
||||||
</AvatarFallback>
|
<Store className={`${isCollapsed ? 'h-4 w-4' : 'h-4 w-4'} flex-shrink-0`} />
|
||||||
</Avatar>
|
{!isCollapsed && <span className="ml-3">Маркет</span>}
|
||||||
<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>
|
</Button>
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
<Button
|
||||||
<p className="text-white text-[10px] font-semibold leading-tight max-w-full break-words"
|
variant={isMessengerActive ? "secondary" : "ghost"}
|
||||||
title={getOrganizationName()}
|
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs relative ${
|
||||||
style={{ fontSize: '9px', lineHeight: '11px' }}>
|
isMessengerActive
|
||||||
{getOrganizationName().length > 12
|
? 'bg-white/20 text-white hover:bg-white/30'
|
||||||
? getOrganizationName().substring(0, 12) + '...'
|
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
||||||
: getOrganizationName()
|
} cursor-pointer`}
|
||||||
}
|
onClick={handleMessengerClick}
|
||||||
</p>
|
title={isCollapsed ? "Мессенджер" : ""}
|
||||||
<div className="flex items-center justify-center mt-1">
|
>
|
||||||
<div className="w-1.5 h-1.5 bg-purple-400 rounded-full"></div>
|
<MessageCircle className="h-4 w-4 flex-shrink-0" />
|
||||||
|
{!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>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</div>
|
</Button>
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Навигация */}
|
<Button
|
||||||
<div className="space-y-1 mb-3 flex-1">
|
variant={isPartnersActive ? "secondary" : "ghost"}
|
||||||
<Button
|
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs relative ${
|
||||||
variant={isMarketActive ? "secondary" : "ghost"}
|
isPartnersActive
|
||||||
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
|
? 'bg-white/20 text-white hover:bg-white/30'
|
||||||
isMarketActive
|
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
||||||
? 'bg-white/20 text-white hover:bg-white/30'
|
} cursor-pointer`}
|
||||||
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
onClick={handlePartnersClick}
|
||||||
} cursor-pointer`}
|
title={isCollapsed ? "Партнёры" : ""}
|
||||||
onClick={handleMarketClick}
|
>
|
||||||
title={isCollapsed ? "Маркет" : ""}
|
<Handshake className="h-4 w-4 flex-shrink-0" />
|
||||||
>
|
{!isCollapsed && <span className="ml-3">Партнёры</span>}
|
||||||
<Store className={`${isCollapsed ? 'h-4 w-4' : 'h-4 w-4'} flex-shrink-0`} />
|
{/* Индикатор входящих заявок */}
|
||||||
{!isCollapsed && <span className="ml-3">Маркет</span>}
|
{incomingRequestsCount > 0 && (
|
||||||
</Button>
|
<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>
|
||||||
|
|
||||||
<Button
|
{/* Услуги - только для фулфилмент центров */}
|
||||||
variant={isMessengerActive ? "secondary" : "ghost"}
|
{user?.organization?.type === 'FULFILLMENT' && (
|
||||||
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs relative ${
|
<Button
|
||||||
isMessengerActive
|
variant={isServicesActive ? "secondary" : "ghost"}
|
||||||
? 'bg-white/20 text-white hover:bg-white/30'
|
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
|
||||||
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
isServicesActive
|
||||||
} cursor-pointer`}
|
? 'bg-white/20 text-white hover:bg-white/30'
|
||||||
onClick={handleMessengerClick}
|
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
||||||
title={isCollapsed ? "Мессенджер" : ""}
|
} cursor-pointer`}
|
||||||
>
|
onClick={handleServicesClick}
|
||||||
<MessageCircle className="h-4 w-4 flex-shrink-0" />
|
title={isCollapsed ? "Услуги" : ""}
|
||||||
{!isCollapsed && <span className="ml-3">Мессенджер</span>}
|
>
|
||||||
{/* Индикатор непрочитанных сообщений */}
|
<Wrench className="h-4 w-4 flex-shrink-0" />
|
||||||
{totalUnreadCount > 0 && (
|
{!isCollapsed && <span className="ml-3">Услуги</span>}
|
||||||
<div className={`absolute ${
|
</Button>
|
||||||
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"}
|
{user?.organization?.type === 'FULFILLMENT' && (
|
||||||
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs relative ${
|
<Button
|
||||||
isPartnersActive
|
variant={isEmployeesActive ? "secondary" : "ghost"}
|
||||||
? 'bg-white/20 text-white hover:bg-white/30'
|
className={`w-full ${isCollapsed ? 'justify-center px-2 h-9' : 'justify-start h-10'} text-left transition-all duration-200 text-xs ${
|
||||||
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
isEmployeesActive
|
||||||
} cursor-pointer`}
|
? 'bg-white/20 text-white hover:bg-white/30'
|
||||||
onClick={handlePartnersClick}
|
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
||||||
title={isCollapsed ? "Партнёры" : ""}
|
} cursor-pointer`}
|
||||||
>
|
onClick={handleEmployeesClick}
|
||||||
<Handshake className="h-4 w-4 flex-shrink-0" />
|
title={isCollapsed ? "Сотрудники" : ""}
|
||||||
{!isCollapsed && <span className="ml-3">Партнёры</span>}
|
>
|
||||||
{/* Индикатор входящих заявок */}
|
<Users className="h-4 w-4 flex-shrink-0" />
|
||||||
{incomingRequestsCount > 0 && (
|
{!isCollapsed && <span className="ml-3">Сотрудники</span>}
|
||||||
<div className={`absolute ${
|
</Button>
|
||||||
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`}>
|
{user?.organization?.type === 'SELLER' && (
|
||||||
{isCollapsed ? '' : (incomingRequestsCount > 99 ? '99+' : incomingRequestsCount)}
|
<Button
|
||||||
</div>
|
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 ${
|
||||||
|
isSuppliesActive
|
||||||
|
? '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>}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Входящие поставки - для фулфилмент */}
|
||||||
|
{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 ${
|
||||||
|
isSuppliesActive
|
||||||
|
? '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>}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Отгрузки - для оптовиков */}
|
||||||
|
{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 ${
|
||||||
|
isSuppliesActive
|
||||||
|
? '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>}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Перевозки - для логистов */}
|
||||||
|
{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 ${
|
||||||
|
isSuppliesActive
|
||||||
|
? '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>}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Склад - только для оптовиков */}
|
||||||
|
{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 ${
|
||||||
|
isWarehouseActive
|
||||||
|
? '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 ? "Склад" : ""}
|
||||||
|
>
|
||||||
|
<Warehouse className="h-4 w-4 flex-shrink-0" />
|
||||||
|
{!isCollapsed && <span className="ml-3">Склад</span>}
|
||||||
|
</Button>
|
||||||
)}
|
)}
|
||||||
</Button>
|
|
||||||
|
|
||||||
{/* Услуги - только для фулфилмент центров */}
|
|
||||||
{user?.organization?.type === 'FULFILLMENT' && (
|
|
||||||
<Button
|
<Button
|
||||||
variant={isServicesActive ? "secondary" : "ghost"}
|
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 ${
|
||||||
isServicesActive
|
isSettingsActive
|
||||||
? 'bg-white/20 text-white hover:bg-white/30'
|
? 'bg-white/20 text-white hover:bg-white/30'
|
||||||
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
||||||
} cursor-pointer`}
|
} cursor-pointer`}
|
||||||
onClick={handleServicesClick}
|
onClick={handleSettingsClick}
|
||||||
title={isCollapsed ? "Услуги" : ""}
|
title={isCollapsed ? "Настройки профиля" : ""}
|
||||||
>
|
>
|
||||||
<Wrench className="h-4 w-4 flex-shrink-0" />
|
<Settings className="h-4 w-4 flex-shrink-0" />
|
||||||
{!isCollapsed && <span className="ml-3">Услуги</span>}
|
{!isCollapsed && <span className="ml-3">Настройки профиля</span>}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
{/* Сотрудники - только для фулфилмент центров */}
|
{/* Кнопка выхода */}
|
||||||
{user?.organization?.type === 'FULFILLMENT' && (
|
<div>
|
||||||
<Button
|
<Button
|
||||||
variant={isEmployeesActive ? "secondary" : "ghost"}
|
variant="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-white/80 hover:bg-red-500/20 hover:text-red-300 cursor-pointer text-xs transition-all duration-200`}
|
||||||
isEmployeesActive
|
onClick={logout}
|
||||||
? 'bg-white/20 text-white hover:bg-white/30'
|
title={isCollapsed ? "Выйти" : ""}
|
||||||
: 'text-white/80 hover:bg-white/10 hover:text-white'
|
|
||||||
} cursor-pointer`}
|
|
||||||
onClick={handleEmployeesClick}
|
|
||||||
title={isCollapsed ? "Сотрудники" : ""}
|
|
||||||
>
|
>
|
||||||
<Users className="h-4 w-4 flex-shrink-0" />
|
<LogOut className="h-4 w-4 flex-shrink-0" />
|
||||||
{!isCollapsed && <span className="ml-3">Сотрудники</span>}
|
{!isCollapsed && <span className="ml-3">Выйти</span>}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
{/* Мои поставки - для селлеров */}
|
|
||||||
{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 ${
|
|
||||||
isSuppliesActive
|
|
||||||
? '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>}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Входящие поставки - для фулфилмент */}
|
|
||||||
{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 ${
|
|
||||||
isSuppliesActive
|
|
||||||
? '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>}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Отгрузки - для оптовиков */}
|
|
||||||
{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 ${
|
|
||||||
isSuppliesActive
|
|
||||||
? '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>}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Перевозки - для логистов */}
|
|
||||||
{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 ${
|
|
||||||
isSuppliesActive
|
|
||||||
? '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>}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Склад - только для оптовиков */}
|
|
||||||
{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 ${
|
|
||||||
isWarehouseActive
|
|
||||||
? '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 ? "Склад" : ""}
|
|
||||||
>
|
|
||||||
<Warehouse className="h-4 w-4 flex-shrink-0" />
|
|
||||||
{!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 ${
|
|
||||||
isSettingsActive
|
|
||||||
? '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 ? "Настройки профиля" : ""}
|
|
||||||
>
|
|
||||||
<Settings className="h-4 w-4 flex-shrink-0" />
|
|
||||||
{!isCollapsed && <span className="ml-3">Настройки профиля</span>}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Кнопка выхода */}
|
|
||||||
<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`}
|
|
||||||
onClick={logout}
|
|
||||||
title={isCollapsed ? "Выйти" : ""}
|
|
||||||
>
|
|
||||||
<LogOut className="h-4 w-4 flex-shrink-0" />
|
|
||||||
{!isCollapsed && <span className="ml-3">Выйти</span>}
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -20,7 +20,7 @@ export function SidebarProvider({ children }: { children: ReactNode }) {
|
|||||||
|
|
||||||
const getSidebarMargin = () => {
|
const getSidebarMargin = () => {
|
||||||
// Учитываем отступ слева (left-4) + ширина сайдбара + дополнительный отступ
|
// Учитываем отступ слева (left-4) + ширина сайдбара + дополнительный отступ
|
||||||
return isCollapsed ? 'ml-20' : 'ml-64'
|
return isCollapsed ? 'ml-24' : 'ml-64'
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user