cynx-lib 1.3.50 → 1.3.52

package/ui/components/Sidebar.jsx

@@ -0,0 +1,820 @@
+import React, { useState } from 'react';
+import { NavLink } from 'react-router-dom';
+import {
+  PanelLeftClose,
+  PanelLeftOpen,
+  LogOut,
+  ChevronDown,
+  Lock,
+} from 'lucide-react';
+import Button from './Button.jsx';
+
+export function isDarkColor(color) {
+  if (!color || typeof color !== 'string') return false;
+  let c = color.trim().toLowerCase();
+  if (c === 'transparent' || c === 'inherit') return false;
+
+  // Resolve CSS variable if running in browser
+  if (c.startsWith('var(') && typeof window !== 'undefined') {
+    let depth = 0;
+    while (c.startsWith('var(') && depth < 5) {
+      const varNameMatch = c.match(/var\(\s*(--[a-zA-Z0-9_-]+)(?:,\s*([^)]+))?\)/);
+      if (varNameMatch) {
+        const varName = varNameMatch[1];
+        const fallback = varNameMatch[2] ? varNameMatch[2].trim() : '';
+        const resolved = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+        if (resolved) {
+          c = resolved.toLowerCase();
+        } else if (fallback) {
+          c = fallback.toLowerCase();
+        } else {
+          break;
+        }
+      } else {
+        break;
+      }
+      depth++;
+    }
+  }
+
+  // Hex color (#rgb, #rgba, #rrggbb, #rrggbbaa)
+  if (c.startsWith('#')) {
+    let hex = c.slice(1);
+    if (hex.length === 3 || hex.length === 4) {
+      hex = hex.split('').slice(0, 3).map((x) => x + x).join('');
+    }
+    if (hex.length >= 6) {
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      const luma = 0.299 * r + 0.587 * g + 0.114 * b;
+      return luma < 145;
+    }
+  }
+
+  // RGB/RGBA color
+  if (c.startsWith('rgb')) {
+    const match = c.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (match) {
+      const r = parseInt(match[1], 10);
+      const g = parseInt(match[2], 10);
+      const b = parseInt(match[3], 10);
+      const luma = 0.299 * r + 0.587 * g + 0.114 * b;
+      return luma < 145;
+    }
+  }
+
+  // HSL color
+  if (c.startsWith('hsl')) {
+    const match = c.match(/hsla?\(\s*\d+\s*,\s*\d+%\s*,\s*(\d+)%/);
+    if (match) {
+      const lightness = parseInt(match[1], 10);
+      return lightness < 50;
+    }
+  }
+
+  // Named dark colors or dark CSS hints
+  if (
+    c === '#18181b' ||
+    c === '#141629' ||
+    c === '#09090b' ||
+    c === '#0f172a' ||
+    c === '#1e293b' ||
+    c === '#111827' ||
+    c === '#1f2937' ||
+    c === 'black' ||
+    c === '#000000' ||
+    c === '#000' ||
+    c.includes('dark') ||
+    c.includes('black') ||
+    c.includes('navy')
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+export default function Sidebar({
+  brand,
+  navSections = [],
+  navItems = [],
+  user,
+  onLogout,
+  onLock,
+  collapsible = true,
+  isCollapsed: controlledIsCollapsed,
+  defaultCollapsed = false,
+  defaultSectionsExpanded = false,
+  sectionsCollapsible = true,
+  autoExpandActive = true,
+  onToggleCollapse,
+  onToggleSection,
+  storageKey = 'app_sidebar_collapsed',
+  // Sidebar styling props
+  sidebarBg,
+  sidebarColor,
+  sidebarMutedColor,
+  sidebarBorder,
+  sidebarStyle = {},
+  sidebarClassName = '',
+  // Active states
+  activeBg,
+  activeColor,
+  activeSubBg,
+  activeSubColor,
+  subItemsIndent = 12,
+  hasPermission = () => true,
+  headerSlot,
+  footerSlot,
+  children,
+}) {
+  const [internalCollapsed, setInternalCollapsed] = useState(() => {
+    if (typeof window !== 'undefined' && storageKey) {
+      const saved = localStorage.getItem(storageKey);
+      if (saved !== null) return saved === 'true';
+    }
+    return defaultCollapsed;
+  });
+
+  const isCollapsed =
+    typeof controlledIsCollapsed === 'boolean' ? controlledIsCollapsed : internalCollapsed;
+
+  const [expandedSections, setExpandedSections] = useState({});
+
+  const toggleSidebarCollapse = (e) => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    const next = !isCollapsed;
+    if (onToggleCollapse) {
+      onToggleCollapse(next);
+    } else {
+      setInternalCollapsed(next);
+    }
+    if (typeof window !== 'undefined' && storageKey) {
+      localStorage.setItem(storageKey, String(next));
+    }
+  };
+
+  const isSectionCollapsible = (sec) => {
+    if (typeof sec.isCollapsible === 'boolean') return sec.isCollapsible;
+    if (typeof sec.collapsible === 'boolean') return sec.collapsible;
+    return sectionsCollapsible;
+  };
+
+  const isSectionExpanded = (sec, secIdx) => {
+    if (!isSectionCollapsible(sec)) {
+      return true;
+    }
+    if (typeof expandedSections[secIdx] === 'boolean') {
+      return expandedSections[secIdx];
+    }
+    if (typeof sec.defaultExpanded === 'boolean') return sec.defaultExpanded;
+    if (typeof sec.defaultCollapsed === 'boolean') return !sec.defaultCollapsed;
+    if (typeof sec.expanded === 'boolean') return sec.expanded;
+    if (typeof sec.collapsed === 'boolean') return !sec.collapsed;
+    return defaultSectionsExpanded;
+  };
+
+  const toggleSection = (sec, secIdx) => {
+    if (!isSectionCollapsible(sec)) return;
+    const current = isSectionExpanded(sec, secIdx);
+    const next = !current;
+    setExpandedSections((prev) => ({
+      ...prev,
+      [secIdx]: next,
+    }));
+    if (onToggleSection) {
+      onToggleSection({ section: sec, index: secIdx, expanded: next });
+    }
+  };
+
+  const sections = React.useMemo(() => {
+    if (Array.isArray(navSections) && navSections.length > 0) return navSections;
+    if (Array.isArray(navItems) && navItems.length > 0) return [{ items: navItems }];
+    return [];
+  }, [navSections, navItems]);
+
+  // Contrast & palette calculations
+  const effectiveSidebarBg = sidebarBg || 'var(--sidebar-bg, var(--surface, #ffffff))';
+  const isDarkSidebar = isDarkColor(effectiveSidebarBg);
+
+  const effectiveSidebarBorder =
+    sidebarBorder ||
+    (isDarkSidebar
+      ? '1px solid var(--sidebar-border, rgba(255, 255, 255, 0.08))'
+      : '1px solid var(--sidebar-border, var(--border-light, #f4f4f5))');
+
+  const brandTitleColor =
+    sidebarColor ||
+    (isDarkSidebar
+      ? 'var(--sidebar-text, #ffffff)'
+      : 'var(--sidebar-text, var(--primary-text, #09090b))');
+
+  const brandSubtitleColor =
+    sidebarMutedColor ||
+    (isDarkSidebar
+      ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
+      : 'var(--sidebar-text-muted, var(--muted, #71717a))');
+
+  const toggleBtnColor = isDarkSidebar
+    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.65))'
+    : 'var(--sidebar-text-muted, var(--t2, #71717a))';
+  const toggleBtnHoverBg = isDarkSidebar
+    ? 'var(--sidebar-item-hover, rgba(255, 255, 255, 0.08))'
+    : 'var(--sidebar-item-hover, var(--grey-1, #fafafa))';
+  const toggleBtnHoverColor = isDarkSidebar
+    ? 'var(--sidebar-text, #ffffff)'
+    : 'var(--sidebar-text, var(--primary-text, #09090b))';
+
+  const sectionHeaderColor =
+    sidebarMutedColor ||
+    (isDarkSidebar
+      ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
+      : 'var(--sidebar-text-muted, var(--muted, #71717a))');
+
+  const inactiveItemColor = isDarkSidebar
+    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.65))'
+    : 'var(--sidebar-text-muted, var(--t2, #71717a))';
+  const inactiveItemHoverBg = isDarkSidebar
+    ? 'var(--sidebar-item-hover, rgba(255, 255, 255, 0.06))'
+    : 'var(--sidebar-item-hover, var(--grey-1, #fafafa))';
+  const inactiveItemHoverColor = isDarkSidebar
+    ? 'var(--sidebar-text, #ffffff)'
+    : 'var(--sidebar-text, var(--primary-text, #09090b))';
+
+  const defaultActiveBg = isDarkSidebar
+    ? 'var(--sidebar-item-active-bg, rgba(255, 255, 255, 0.12))'
+    : 'var(--sidebar-item-active-bg, var(--grey-1, #fafafa))';
+
+  const defaultActiveColor = isDarkSidebar
+    ? 'var(--sidebar-item-active-text, #ffffff)'
+    : 'var(--sidebar-item-active-text, var(--primary-text, #09090b))';
+
+  const userFullNameColor = isDarkSidebar
+    ? 'var(--sidebar-text, rgba(255, 255, 255, 0.85))'
+    : 'var(--sidebar-text-muted, var(--muted, #71717a))';
+  const userUsernameColor = isDarkSidebar
+    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
+    : 'var(--sidebar-text-muted, var(--t3, #a1a1aa))';
+
+  return (
+    <aside
+      className={sidebarClassName}
+      style={{
+        width: isCollapsed ? 64 : 240,
+        minWidth: isCollapsed ? 64 : 240,
+        height: '100vh',
+        background: effectiveSidebarBg,
+        borderRight: effectiveSidebarBorder,
+        display: 'flex',
+        flexDirection: 'column',
+        boxSizing: 'border-box',
+        userSelect: 'none',
+        transition:
+          'width 0.2s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease',
+        overflow: 'hidden',
+        flexShrink: 0,
+        ...sidebarStyle,
+      }}
+    >
+      {/* Header Slot or Default Brand Header */}
+      {headerSlot ? (
+        headerSlot
+      ) : (
+        <div
+          style={{
+            height: 56,
+            minHeight: 56,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: isCollapsed ? 'center' : 'space-between',
+            padding: isCollapsed ? '0 8px' : '0 12px 0 16px',
+            borderBottom: effectiveSidebarBorder,
+            boxSizing: 'border-box',
+            flexShrink: 0,
+          }}
+        >
+          {!isCollapsed ? (
+            <>
+              <div
+                style={{
+                  flex: 1,
+                  minWidth: 0,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 10,
+                  overflow: 'hidden',
+                }}
+              >
+                {brand?.logoUrl ? (
+                  <img
+                    src={brand.logoUrl}
+                    alt=""
+                    style={{ maxHeight: 32, maxWidth: 145, objectFit: 'contain' }}
+                  />
+                ) : (
+                  <>
+                    {brand?.icon && <div style={{ flexShrink: 0 }}>{brand.icon}</div>}
+                    <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
+                      <span
+                        style={{
+                          fontWeight: 700,
+                          fontSize: '.88rem',
+                          color: brandTitleColor,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {brand?.title || 'Приложение'}
+                      </span>
+                      {brand?.subtitle && (
+                        <span
+                          style={{
+                            fontSize: '.64rem',
+                            color: brandSubtitleColor,
+                            fontWeight: 500,
+                          }}
+                        >
+                          {brand.subtitle}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+
+              {collapsible && (
+                <button
+                  type="button"
+                  onClick={toggleSidebarCollapse}
+                  title="Свернуть меню"
+                  style={{
+                    background: 'transparent',
+                    border: 'none',
+                    cursor: 'pointer',
+                    color: toggleBtnColor,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: 30,
+                    height: 30,
+                    borderRadius: 'var(--radxs, 6px)',
+                    padding: 0,
+                    transition: 'background .14s, color .14s',
+                    flexShrink: 0,
+                    marginLeft: 8,
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = toggleBtnHoverBg;
+                    e.currentTarget.style.color = toggleBtnHoverColor;
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'transparent';
+                    e.currentTarget.style.color = toggleBtnColor;
+                  }}
+                >
+                  <PanelLeftClose size={18} />
+                </button>
+              )}
+            </>
+          ) : (
+            collapsible && (
+              <button
+                type="button"
+                onClick={toggleSidebarCollapse}
+                title="Развернуть меню"
+                style={{
+                  background: 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  color: toggleBtnColor,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: 36,
+                  height: 36,
+                  borderRadius: 'var(--radxs, 6px)',
+                  padding: 0,
+                  transition: 'background .14s, color .14s',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = toggleBtnHoverBg;
+                  e.currentTarget.style.color = toggleBtnHoverColor;
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'transparent';
+                  e.currentTarget.style.color = toggleBtnColor;
+                }}
+              >
+                <PanelLeftOpen size={18} />
+              </button>
+            )
+          )}
+        </div>
+      )}
+
+      {/* Sidebar Navigation */}
+      <nav
+        style={{
+          padding: isCollapsed ? '12px 8px' : 12,
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 4,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+        }}
+      >
+        {sections.map((sec, secIdx) => {
+          const visibleItems = (sec.items || []).filter(
+            (it) => !it.permission || hasPermission(it.permission)
+          );
+          if (visibleItems.length === 0) return null;
+
+          const isCollapsibleSec = isSectionCollapsible(sec);
+          const isExpanded = isSectionExpanded(sec, secIdx);
+
+          return (
+            <div key={secIdx} style={{ marginTop: secIdx > 0 && !isCollapsed ? 6 : 0 }}>
+              {/* Section Header: Accordion Button (if collapsible) or Static Title (if not collapsible) */}
+              {sec.title && !isCollapsed && (
+                isCollapsibleSec ? (
+                  <button
+                    type="button"
+                    onClick={() => toggleSection(sec, secIdx)}
+                    style={{
+                      width: '100%',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      padding: '6px 10px',
+                      borderRadius: 'var(--rads, 8px)',
+                      fontSize: '.7rem',
+                      fontWeight: 600,
+                      textTransform: 'uppercase',
+                      letterSpacing: '.06em',
+                      color: sectionHeaderColor,
+                      background: 'transparent',
+                      border: 'none',
+                      cursor: 'pointer',
+                      boxSizing: 'border-box',
+                    }}
+                    onMouseEnter={(e) => {
+                      if (isDarkSidebar) {
+                        e.currentTarget.style.background = 'rgba(255, 255, 255, 0.04)';
+                      }
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.background = 'transparent';
+                    }}
+                  >
+                    <span>{sec.title}</span>
+                    <ChevronDown
+                      size={13}
+                      style={{
+                        transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                        transition: 'transform 0.22s cubic-bezier(0.4, 0, 0.2, 1)',
+                        opacity: isDarkSidebar ? 0.75 : 0.6,
+                      }}
+                    />
+                  </button>
+                ) : (
+                  <div
+                    style={{
+                      width: '100%',
+                      display: 'flex',
+                      alignItems: 'center',
+                      padding: '6px 10px',
+                      fontSize: '.7rem',
+                      fontWeight: 600,
+                      textTransform: 'uppercase',
+                      letterSpacing: '.06em',
+                      color: sectionHeaderColor,
+                      boxSizing: 'border-box',
+                      cursor: 'default',
+                    }}
+                  >
+                    <span>{sec.title}</span>
+                  </div>
+                )
+              )}
+
+              {/* Separator when collapsed */}
+              {sec.title && isCollapsed && secIdx > 0 && (
+                <div
+                  style={{
+                    height: 1,
+                    background: isDarkSidebar
+                      ? 'var(--sidebar-border, rgba(255, 255, 255, 0.08))'
+                      : 'var(--sidebar-border, var(--border-light, #f4f4f5))',
+                    margin: '4px 0',
+                  }}
+                />
+              )}
+
+              {/* Smooth 60fps Grid Container for Accordion Items */}
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateRows: isCollapsed || isExpanded ? '1fr' : '0fr',
+                  transition: 'grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1)',
+                }}
+              >
+                <div
+                  style={{
+                    overflow: 'hidden',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 2,
+                    paddingTop: sec.title && !isCollapsed ? 2 : 0,
+                    paddingLeft: sec.title && !isCollapsed && subItemsIndent ? subItemsIndent : 0,
+                  }}
+                >
+                  {visibleItems.map((item) => {
+                    const Icon = item.icon;
+
+                    // Active styles computation
+                    const effectiveActiveBg =
+                      item.activeBg ||
+                      (sec.title ? activeSubBg : null) ||
+                      activeBg ||
+                      defaultActiveBg;
+
+                    const isDarkActiveBg = isDarkColor(effectiveActiveBg);
+
+                    const effectiveActiveColor =
+                      item.activeColor ||
+                      (sec.title ? activeSubColor : null) ||
+                      activeColor ||
+                      (isDarkActiveBg ? '#ffffff' : defaultActiveColor);
+
+                    return (
+                      <NavLink
+                        key={item.to}
+                        to={item.to}
+                        end={item.end}
+                        title={isCollapsed ? item.label : undefined}
+                        style={({ isActive }) => {
+                          const currentBg = isActive ? effectiveActiveBg : 'transparent';
+                          const currentColor = isActive ? effectiveActiveColor : inactiveItemColor;
+
+                          return {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: isCollapsed ? 'center' : 'space-between',
+                            padding: isCollapsed
+                              ? '9px 0'
+                              : sec.title
+                              ? '6px 8px'
+                              : '8px 10px',
+                            borderRadius: 'var(--rads, 8px)',
+                            fontSize: sec.title && !isCollapsed ? '.79rem' : '.82rem',
+                            fontWeight: isActive ? 600 : sec.title ? 400 : 500,
+                            color: currentColor,
+                            background: currentBg,
+                            border: 'none',
+                            textDecoration: 'none',
+                            cursor: 'pointer',
+                            textAlign: 'left',
+                            fontFamily: 'inherit',
+                            transition: 'all .14s',
+                            boxSizing: 'border-box',
+                            outline: 'none',
+                          };
+                        }}
+                        onMouseEnter={(e) => {
+                          if (!e.currentTarget.classList.contains('active')) {
+                            e.currentTarget.style.background = inactiveItemHoverBg;
+                            e.currentTarget.style.color = inactiveItemHoverColor;
+                          }
+                        }}
+                        onMouseLeave={(e) => {
+                          if (!e.currentTarget.classList.contains('active')) {
+                            e.currentTarget.style.background = 'transparent';
+                            e.currentTarget.style.color = inactiveItemColor;
+                          }
+                        }}
+                      >
+                        {({ isActive }) => {
+                          const iconSize = isCollapsed ? 18 : sec.title ? 15 : 16;
+
+                          return (
+                            <>
+                              <div style={{ display: 'flex', alignItems: 'center', gap: sec.title ? 8 : 10 }}>
+                                {Icon && <Icon size={iconSize} style={{ flexShrink: 0 }} />}
+                                {!isCollapsed && <span>{item.label}</span>}
+                              </div>
+
+                              {!isCollapsed && typeof item.count === 'number' && (
+                                <span
+                                  style={{
+                                    fontSize: sec.title ? '.64rem' : '.68rem',
+                                    padding: '1px 6px',
+                                    borderRadius: 'var(--radxs, 4px)',
+                                    background: isActive
+                                      ? isDarkActiveBg
+                                        ? 'rgba(255,255,255,0.2)'
+                                        : isDarkSidebar
+                                        ? 'rgba(255,255,255,0.15)'
+                                        : 'var(--border, #e4e4e7)'
+                                      : isDarkSidebar
+                                      ? 'rgba(255,255,255,0.08)'
+                                      : 'var(--grey-1, #fafafa)',
+                                    color: isActive
+                                      ? isDarkActiveBg || isDarkSidebar
+                                        ? '#ffffff'
+                                        : 'var(--primary-text, #09090b)'
+                                      : isDarkSidebar
+                                      ? 'rgba(255,255,255,0.6)'
+                                      : 'var(--muted, #71717a)',
+                                    fontFamily: 'var(--mono, monospace)',
+                                    border:
+                                      isActive && (isDarkActiveBg || isDarkSidebar)
+                                        ? 'none'
+                                        : isDarkSidebar
+                                        ? '1px solid var(--sidebar-border, rgba(255,255,255,0.08))'
+                                        : '1px solid var(--sidebar-border, var(--border-light, #f4f4f5))',
+                                  }}
+                                >
+                                  {item.count}
+                                </span>
+                              )}
+                            </>
+                          );
+                        }}
+                      </NavLink>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+        {children}
+      </nav>
+
+      {/* Footer Slot or Default User Profile / Actions */}
+      {footerSlot ? (
+        footerSlot
+      ) : user ? (
+        <div
+          style={{
+            padding: isCollapsed ? '12px 8px' : 12,
+            borderTop: effectiveSidebarBorder,
+            flexShrink: 0,
+          }}
+        >
+          {!isCollapsed ? (
+            <>
+              <div
+                style={{
+                  fontSize: '.72rem',
+                  color: userFullNameColor,
+                  marginBottom: 8,
+                  padding: '0 8px',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}
+              >
+                {user.fullName ? (
+                  <>
+                    {user.fullName}{' '}
+                    {user.username && (
+                      <span style={{ color: userUsernameColor }}>({user.username})</span>
+                    )}
+                  </>
+                ) : (
+                  user.username
+                )}
+              </div>
+
+              <div style={{ display: 'flex', gap: 6 }}>
+                {onLock && (
+                  <Button
+                    variant={isDarkSidebar ? 'secondary' : 'ghost'}
+                    size="md"
+                    onClick={onLock}
+                    icon={<Lock size={13} />}
+                    title="Заблокировать"
+                    style={{
+                      flex: 1,
+                      justifyContent: 'center',
+                      ...(isDarkSidebar
+                        ? {
+                            background: 'rgba(255,255,255,0.08)',
+                            color: 'rgba(255,255,255,0.85)',
+                            borderColor: 'rgba(255,255,255,0.12)',
+                          }
+                        : {}),
+                    }}
+                  >
+                    Блок
+                  </Button>
+                )}
+
+                {onLogout && (
+                  <Button
+                    variant="ghost"
+                    size="md"
+                    onClick={onLogout}
+                    icon={<LogOut size={14} />}
+                    title="Выйти"
+                    style={{
+                      width: onLock ? 'auto' : '100%',
+                      flex: onLock ? 1 : undefined,
+                      justifyContent: 'center',
+                      color: isDarkSidebar ? '#f87171' : 'var(--danger, #ef4444)',
+                      ...(isDarkSidebar
+                        ? {
+                            background: 'rgba(239, 68, 68, 0.1)',
+                            borderColor: 'rgba(239, 68, 68, 0.2)',
+                          }
+                        : {}),
+                    }}
+                  >
+                    Выйти
+                  </Button>
+                )}
+              </div>
+            </>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
+              {onLock && (
+                <button
+                  type="button"
+                  onClick={onLock}
+                  title="Заблокировать экран"
+                  style={{
+                    width: 36,
+                    height: 36,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'transparent',
+                    border: 'none',
+                    borderRadius: 'var(--rads, 8px)',
+                    color: isDarkSidebar ? 'rgba(255,255,255,0.7)' : 'var(--t2, #71717a)',
+                    cursor: 'pointer',
+                    transition: 'all .14s',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = isDarkSidebar
+                      ? 'rgba(255,255,255,0.08)'
+                      : 'var(--grey-1, #fafafa)';
+                    e.currentTarget.style.color = isDarkSidebar
+                      ? '#ffffff'
+                      : 'var(--primary-text, #09090b)';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'transparent';
+                    e.currentTarget.style.color = isDarkSidebar
+                      ? 'rgba(255,255,255,0.7)'
+                      : 'var(--t2, #71717a)';
+                  }}
+                >
+                  <Lock size={16} />
+                </button>
+              )}
+
+              {onLogout && (
+                <button
+                  type="button"
+                  onClick={onLogout}
+                  title={`Выйти (${user?.username || user?.fullName || ''})`}
+                  style={{
+                    width: 36,
+                    height: 36,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'transparent',
+                    border: 'none',
+                    borderRadius: 'var(--rads, 8px)',
+                    color: isDarkSidebar ? '#f87171' : 'var(--danger, #ef4444)',
+                    cursor: 'pointer',
+                    transition: 'all .14s',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = isDarkSidebar
+                      ? 'rgba(239,68,68,0.2)'
+                      : 'var(--danger-bg, rgba(239,68,68,.10))';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'transparent';
+                  }}
+                >
+                  <LogOut size={17} />
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      ) : null}
+    </aside>
+  );
+}