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

src/components/dashboard/sidebar.tsx

@@ -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="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'}`}>
+        {/* ОХУЕННАЯ кнопка сворачивания - на правом краю сайдбара */}
+        <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="p-3">
-              <div className="relative mb-2">
+                <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>
   )
 } 

src/hooks/useSidebar.tsx

@@ -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 (