cynx-lib 1.3.84 → 1.3.85

package/vue/components/Sidebar.vue

@@ -1,955 +1,955 @@
-<script setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
-import {
-  PanelLeftClose,
-  PanelLeftOpen,
-  LogOut,
-  ChevronDown,
-  Lock,
-} from 'lucide-vue-next';
-import Button from './Button.vue';
-
-const props = defineProps({
-  brand: {
-    type: Object,
-    default: () => ({}),
-  },
-  navSections: {
-    type: Array,
-    default: () => [],
-  },
-  navItems: {
-    type: Array,
-    default: () => [],
-  },
-  user: {
-    type: Object,
-    default: null,
-  },
-  collapsible: {
-    type: Boolean,
-    default: true,
-  },
-  collapsed: {
-    type: Boolean,
-    default: undefined,
-  },
-  defaultCollapsed: {
-    type: Boolean,
-    default: false,
-  },
-  defaultSectionsExpanded: {
-    type: Boolean,
-    default: false,
-  },
-  sectionsCollapsible: {
-    type: Boolean,
-    default: true,
-  },
-  autoExpandActive: {
-    type: Boolean,
-    default: true,
-  },
-  modelValue: {
-    type: Boolean,
-    default: undefined,
-  },
-  storageKey: {
-    type: String,
-    default: 'app_sidebar_collapsed',
-  },
-  sidebarBg: {
-    type: String,
-    default: '',
-  },
-  sidebarColor: {
-    type: String,
-    default: '',
-  },
-  sidebarMutedColor: {
-    type: String,
-    default: '',
-  },
-  sidebarBorder: {
-    type: String,
-    default: '',
-  },
-  sidebarStyle: {
-    type: [Object, String],
-    default: () => ({}),
-  },
-  sidebarClass: {
-    type: [String, Object, Array],
-    default: '',
-  },
-  activeBg: {
-    type: String,
-    default: '',
-  },
-  activeColor: {
-    type: String,
-    default: '',
-  },
-  activeSubBg: {
-    type: String,
-    default: '',
-  },
-  activeSubColor: {
-    type: String,
-    default: '',
-  },
-  subItemsIndent: {
-    type: Number,
-    default: 12,
-  },
-  hasPermission: {
-    type: Function,
-    default: () => true,
-  },
-  isItemActive: {
-    type: Function,
-    default: null,
-  },
-});
-
-const emit = defineEmits([
-  'update:modelValue',
-  'update:collapsed',
-  'toggle-collapse',
-  'toggle-section',
-  'logout',
-  'lock',
-  'item-click',
-]);
-
-const internalCollapsed = ref(props.defaultCollapsed);
-const isDocumentDark = ref(false);
-
-const updateDarkThemeState = () => {
-  if (typeof document !== 'undefined') {
-    const cl = document.documentElement.classList;
-    isDocumentDark.value = cl.contains('dark') || cl.contains('dark1') || cl.contains('dark2');
-  }
-};
-
-let darkObserver = null;
-
-onMounted(() => {
-  updateDarkThemeState();
-  if (typeof MutationObserver !== 'undefined' && typeof document !== 'undefined') {
-    darkObserver = new MutationObserver(updateDarkThemeState);
-    darkObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-  }
-
-  if (typeof window !== 'undefined' && props.storageKey) {
-    const saved = localStorage.getItem(props.storageKey);
-    if (saved !== null) {
-      internalCollapsed.value = saved === 'true';
-    } else {
-      internalCollapsed.value = props.defaultCollapsed;
-    }
-  }
-});
-
-onBeforeUnmount(() => {
-  if (darkObserver) darkObserver.disconnect();
-});
-
-const isCollapsed = computed(() => {
-  if (typeof props.modelValue === 'boolean') return props.modelValue;
-  if (typeof props.collapsed === 'boolean') return props.collapsed;
-  return internalCollapsed.value;
-});
-
-const toggleSidebarCollapse = (e) => {
-  if (e) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  const next = !isCollapsed.value;
-  internalCollapsed.value = next;
-  emit('update:modelValue', next);
-  emit('update:collapsed', next);
-  emit('toggle-collapse', next);
-  if (typeof window !== 'undefined' && props.storageKey) {
-    localStorage.setItem(props.storageKey, String(next));
-  }
-};
-
-const expandedSections = ref({});
-
-const isSectionCollapsible = (sec) => {
-  if (typeof sec.isCollapsible === 'boolean') return sec.isCollapsible;
-  if (typeof sec.collapsible === 'boolean') return sec.collapsible;
-  return props.sectionsCollapsible;
-};
-
-const isSectionExpanded = (sec, secIdx) => {
-  // If section is configured as not collapsible, it is ALWAYS open/expanded
-  if (!isSectionCollapsible(sec)) {
-    return true;
-  }
-
-  // Check if user manually toggled this section
-  if (typeof expandedSections.value[secIdx] === 'boolean') {
-    return expandedSections.value[secIdx];
-  }
-
-  // Check if any child item is active (auto-expand active section)
-  if (props.autoExpandActive && props.isItemActive && Array.isArray(sec.items)) {
-    const hasActiveChild = sec.items.some((item) => props.isItemActive(item));
-    if (hasActiveChild) {
-      return true;
-    }
-  }
-
-  // Section level defaults
-  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;
-
-  // Component level default (default: false / collapsed)
-  return props.defaultSectionsExpanded;
-};
-
-const toggleSection = (sec, secIdx) => {
-  if (!isSectionCollapsible(sec)) return;
-  const current = isSectionExpanded(sec, secIdx);
-  expandedSections.value[secIdx] = !current;
-  emit('toggle-section', { section: sec, index: secIdx, expanded: !current });
-};
-
-const sections = computed(() => {
-  if (Array.isArray(props.navSections) && props.navSections.length > 0) return props.navSections;
-  if (Array.isArray(props.navItems) && props.navItems.length > 0) return [{ items: props.navItems }];
-  return [];
-});
-
-function isDark(color) {
-  if (!color || typeof color !== 'string') return false;
-  let c = color.trim().toLowerCase();
-  if (c === 'transparent' || c === 'inherit') return false;
-  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;
-    }
-  }
-  if (c.includes('dark') || c.includes('black') || c === '#141629' || c === '#18181b') return true;
-  return false;
-}
-
-const isDarkSidebar = computed(() => {
-  if (props.sidebarBg) return isDark(props.sidebarBg);
-  return isDocumentDark.value;
-});
-
-const effectiveSidebarBg = computed(() => {
-  if (props.sidebarBg) return props.sidebarBg;
-  return isDarkSidebar.value ? '#141629' : 'var(--sidebar-bg, var(--surface, #ffffff))';
-});
-
-const effectiveSidebarBorder = computed(() => {
-  if (props.sidebarBorder) return props.sidebarBorder;
-  return isDarkSidebar.value
-    ? '1px solid var(--sidebar-border, rgba(255, 255, 255, 0.08))'
-    : '1px solid var(--sidebar-border, var(--border-light, #f4f4f5))';
-});
-
-const brandTitleColor = computed(() => {
-  if (props.sidebarColor) return props.sidebarColor;
-  return isDarkSidebar.value
-    ? 'var(--sidebar-text, #ffffff)'
-    : 'var(--sidebar-text, var(--primary-text, #09090b))';
-});
-
-const brandSubtitleColor = computed(() => {
-  if (props.sidebarMutedColor) return props.sidebarMutedColor;
-  return isDarkSidebar.value
-    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
-    : 'var(--sidebar-text-muted, var(--muted, #71717a))';
-});
-
-const toggleBtnColor = computed(() => {
-  return isDarkSidebar.value
-    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.65))'
-    : 'var(--sidebar-text-muted, var(--t2, #71717a))';
-});
-
-const sectionHeaderColor = computed(() => {
-  if (props.sidebarMutedColor) return props.sidebarMutedColor;
-  return isDarkSidebar.value
-    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
-    : 'var(--sidebar-text-muted, var(--muted, #71717a))';
-});
-
-const inactiveItemColor = computed(() => {
-  return isDarkSidebar.value
-    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.65))'
-    : 'var(--sidebar-text-muted, var(--t2, #71717a))';
-});
-
-const defaultActiveBg = computed(() => {
-  return isDarkSidebar.value
-    ? 'var(--sidebar-item-active-bg, rgba(255, 255, 255, 0.12))'
-    : 'var(--sidebar-item-active-bg, var(--grey-1, #fafafa))';
-});
-
-const defaultActiveColor = computed(() => {
-  return isDarkSidebar.value
-    ? 'var(--sidebar-item-active-text, #ffffff)'
-    : 'var(--sidebar-item-active-text, var(--primary-text, #09090b))';
-});
-
-const userFullNameColor = computed(() => {
-  return isDarkSidebar.value
-    ? 'var(--sidebar-text, rgba(255, 255, 255, 0.85))'
-    : 'var(--sidebar-text-muted, var(--muted, #71717a))';
-});
-
-const userUsernameColor = computed(() => {
-  return isDarkSidebar.value
-    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
-    : 'var(--sidebar-text-muted, var(--t3, #a1a1aa))';
-});
-
-const handleItemClick = (item, event) => {
-  emit('item-click', item, event);
-  if (typeof item.onSelect === 'function') {
-    item.onSelect(item, event);
-  }
-};
-</script>
-
-<template>
-  <aside
-    class="cynx-sidebar"
-    :class="[
-      sidebarClass,
-      {
-        'cynx-sidebar--collapsed': isCollapsed,
-        'cynx-sidebar--dark': isDarkSidebar,
-      },
-    ]"
-    :style="[
-      {
-        width: isCollapsed ? '64px' : '240px',
-        minWidth: isCollapsed ? '64px' : '240px',
-        background: effectiveSidebarBg,
-        borderRight: effectiveSidebarBorder,
-      },
-      sidebarStyle,
-    ]"
-  >
-    <!-- Header Slot or Default Brand Header -->
-    <slot name="header" :is-collapsed="isCollapsed" :toggle-collapse="toggleSidebarCollapse">
-      <div
-        class="cynx-sidebar__header"
-        :style="{
-          borderBottom: effectiveSidebarBorder,
-          justifyContent: isCollapsed ? 'center' : 'space-between',
-          padding: isCollapsed ? '0 8px' : '0 12px 0 16px',
-        }"
-      >
-        <template v-if="!isCollapsed">
-          <slot name="brand">
-            <div class="cynx-sidebar__brand">
-              <img
-                v-if="brand?.logoUrl"
-                :src="brand.logoUrl"
-                alt=""
-                class="cynx-sidebar__brand-logo"
-              />
-              <template v-else>
-                <div v-if="brand?.icon" class="cynx-sidebar__brand-icon">
-                  <component :is="brand.icon" />
-                </div>
-                <div class="cynx-sidebar__brand-text">
-                  <span class="cynx-sidebar__brand-title" :style="{ color: brandTitleColor }">
-                    {{ brand?.title || 'Приложение' }}
-                  </span>
-                  <span
-                    v-if="brand?.subtitle"
-                    class="cynx-sidebar__brand-subtitle"
-                    :style="{ color: brandSubtitleColor }"
-                  >
-                    {{ brand.subtitle }}
-                  </span>
-                </div>
-              </template>
-            </div>
-          </slot>
-
-          <button
-            v-if="collapsible"
-            type="button"
-            class="cynx-sidebar__toggle-btn"
-            :style="{ color: toggleBtnColor }"
-            title="Свернуть меню"
-            @click="toggleSidebarCollapse"
-          >
-            <PanelLeftClose :size="18" />
-          </button>
-        </template>
-
-        <template v-else>
-          <slot
-            name="brand-collapsed"
-            :is-collapsed="isCollapsed"
-            :toggle-collapse="toggleSidebarCollapse"
-          >
-            <button
-              v-if="collapsible"
-              type="button"
-              class="cynx-sidebar__toggle-btn"
-              :style="{ color: toggleBtnColor, width: '36px', height: '36px' }"
-              title="Развернуть меню"
-              @click="toggleSidebarCollapse"
-            >
-              <PanelLeftOpen :size="18" />
-            </button>
-          </slot>
-        </template>
-      </div>
-    </slot>
-
-    <!-- Sidebar Navigation -->
-    <nav class="cynx-sidebar__nav" :style="{ padding: isCollapsed ? '12px 8px' : '12px' }">
-      <template v-for="(sec, secIdx) in sections" :key="secIdx">
-        <div
-          v-if="sec.items && sec.items.filter((it) => !it.permission || hasPermission(it.permission)).length > 0"
-          class="cynx-sidebar__section"
-          :style="{ marginTop: secIdx > 0 && !isCollapsed ? '6px' : '0px' }"
-        >
-          <!-- Section Header: Accordion Button (if collapsible) or Static Title (if not collapsible) -->
-          <template v-if="sec.title && !isCollapsed">
-            <button
-              v-if="isSectionCollapsible(sec)"
-              type="button"
-              class="cynx-sidebar__section-title cynx-sidebar__section-title--clickable"
-              :style="{ color: sectionHeaderColor }"
-              @click="toggleSection(sec, secIdx)"
-            >
-              <span>{{ sec.title }}</span>
-              <ChevronDown
-                :size="13"
-                class="cynx-sidebar__chevron"
-                :class="{ 'cynx-sidebar__chevron--expanded': isSectionExpanded(sec, secIdx) }"
-              />
-            </button>
-
-            <div
-              v-else
-              class="cynx-sidebar__section-title cynx-sidebar__section-title--static"
-              :style="{ color: sectionHeaderColor }"
-            >
-              <span>{{ sec.title }}</span>
-            </div>
-          </template>
-
-          <!-- Separator when collapsed -->
-          <div
-            v-if="sec.title && isCollapsed && secIdx > 0"
-            class="cynx-sidebar__separator"
-            :style="{ background: effectiveSidebarBorder }"
-          />
-
-          <!-- Accordion Grid -->
-          <div
-            class="cynx-sidebar__accordion-grid"
-            :style="{
-              gridTemplateRows: isCollapsed || isSectionExpanded(sec, secIdx) ? '1fr' : '0fr',
-            }"
-          >
-            <div
-              class="cynx-sidebar__items-wrapper"
-              :style="{
-                paddingTop: sec.title && !isCollapsed ? '2px' : '0px',
-                paddingLeft: sec.title && !isCollapsed && subItemsIndent ? `${subItemsIndent}px` : '0px',
-              }"
-            >
-              <template
-                v-for="item in sec.items.filter((it) => !it.permission || hasPermission(it.permission))"
-                :key="item.to?.name || item.to?.path || item.to || item.label || item.text"
-              >
-                <slot
-                  name="item"
-                  :item="item"
-                  :is-collapsed="isCollapsed"
-                  :is-accordion="Boolean(sec.title)"
-                >
-                  <!-- Router Link Navigation Item -->
-                  <router-link
-                    v-if="item.to"
-                    :to="item.to"
-                    custom
-                    v-slot="{ isActive, isExactActive, href, navigate }"
-                  >
-                    <a
-                      :href="href"
-                      class="cynx-sidebar__link"
-                      :class="{
-                        'is-active': isItemActive ? isItemActive(item) : (item.exact ? isExactActive : isActive),
-                      }"
-                      :title="isCollapsed ? (item.label || item.text) : undefined"
-                      :style="{
-                        justifyContent: isCollapsed ? 'center' : 'space-between',
-                        padding: isCollapsed
-                          ? '9px 0'
-                          : sec.title
-                          ? '6px 8px'
-                          : '8px 10px',
-                        background: (isItemActive ? isItemActive(item) : (item.exact ? isExactActive : isActive))
-                          ? (item.activeBg || (sec.title ? activeSubBg : null) || activeBg || defaultActiveBg)
-                          : 'transparent',
-                        color: (isItemActive ? isItemActive(item) : (item.exact ? isExactActive : isActive))
-                          ? (item.activeColor || (sec.title ? activeSubColor : null) || activeColor || defaultActiveColor)
-                          : inactiveItemColor,
-                      }"
-                      @click="navigate($event); handleItemClick(item, $event)"
-                    >
-                      <div class="cynx-sidebar__item-content">
-                        <component
-                          :is="item.icon"
-                          v-if="item.icon"
-                          :size="isCollapsed ? 18 : sec.title ? 15 : 16"
-                          class="cynx-sidebar__item-icon"
-                        />
-                        <span v-if="!isCollapsed" class="cynx-sidebar__item-label">
-                          {{ item.label || item.text }}
-                        </span>
-                      </div>
-
-                      <span
-                        v-if="!isCollapsed && (typeof item.count === 'number' || item.badge)"
-                        class="cynx-sidebar__item-badge"
-                        :class="{ 'is-active': isItemActive ? isItemActive(item) : (item.exact ? isExactActive : isActive) }"
-                      >
-                        {{ typeof item.count === 'number' ? item.count : item.badge }}
-                      </span>
-                    </a>
-                  </router-link>
-
-                  <!-- Normal Click Item -->
-                  <button
-                    v-else
-                    type="button"
-                    class="cynx-sidebar__link"
-                    :style="{
-                      justifyContent: isCollapsed ? 'center' : 'space-between',
-                      padding: isCollapsed ? '9px 0' : sec.title ? '6px 8px' : '8px 10px',
-                      color: inactiveItemColor,
-                    }"
-                    @click="handleItemClick(item, $event)"
-                  >
-                    <div class="cynx-sidebar__item-content">
-                      <component
-                        :is="item.icon"
-                        v-if="item.icon"
-                        :size="isCollapsed ? 18 : sec.title ? 15 : 16"
-                        class="cynx-sidebar__item-icon"
-                      />
-                      <span v-if="!isCollapsed" class="cynx-sidebar__item-label">
-                        {{ item.label || item.text }}
-                      </span>
-                    </div>
-                  </button>
-                </slot>
-              </template>
-            </div>
-          </div>
-        </div>
-      </template>
-
-      <!-- Slot for custom navigation content -->
-      <slot />
-    </nav>
-
-    <!-- Footer Slot or Default User Profile -->
-    <slot
-      name="footer"
-      :user="user"
-      :is-collapsed="isCollapsed"
-      :on-logout="() => emit('logout')"
-      :on-lock="() => emit('lock')"
-    >
-      <div
-        v-if="user"
-        class="cynx-sidebar__footer"
-        :style="{
-          padding: isCollapsed ? '12px 8px' : '12px',
-          borderTop: effectiveSidebarBorder,
-        }"
-      >
-        <template v-if="!isCollapsed">
-          <div class="cynx-sidebar__user-text" :style="{ color: userFullNameColor }">
-            <template v-if="user.fullName">
-              {{ user.fullName }}
-              <span v-if="user.username" :style="{ color: userUsernameColor }">
-                ({{ user.username }})
-              </span>
-            </template>
-            <template v-else>
-              {{ user.username }}
-            </template>
-          </div>
-
-          <div class="cynx-sidebar__footer-actions">
-            <Button
-              variant="ghost"
-              size="md"
-              title="Заблокировать"
-              class="cynx-sidebar__footer-btn"
-              @click="emit('lock')"
-            >
-              <template #icon>
-                <Lock :size="13" />
-              </template>
-              Блок
-            </Button>
-
-            <Button
-              variant="ghost"
-              size="md"
-              title="Выйти"
-              class="cynx-sidebar__footer-btn cynx-sidebar__footer-btn--danger"
-              @click="emit('logout')"
-            >
-              <template #icon>
-                <LogOut :size="14" />
-              </template>
-              Выйти
-            </Button>
-          </div>
-        </template>
-
-        <template v-else>
-          <div class="cynx-sidebar__collapsed-footer">
-            <button
-              type="button"
-              class="cynx-sidebar__collapsed-btn"
-              title="Заблокировать экран"
-              @click="emit('lock')"
-            >
-              <Lock :size="16" />
-            </button>
-
-            <button
-              type="button"
-              class="cynx-sidebar__collapsed-btn cynx-sidebar__collapsed-btn--danger"
-              :title="`Выйти (${user?.username || user?.fullName || ''})`"
-              @click="emit('logout')"
-            >
-              <LogOut :size="17" />
-            </button>
-          </div>
-        </template>
-      </div>
-    </slot>
-  </aside>
-</template>
-
-<style scoped>
-.cynx-sidebar {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  user-select: 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;
-  flex-shrink: 0;
-  font-family: var(--sans, inherit);
-}
-
-.cynx-sidebar__header {
-  height: 56px;
-  min-height: 56px;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-
-.cynx-sidebar__brand {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  overflow: hidden;
-}
-
-.cynx-sidebar__brand-logo {
-  max-height: 32px;
-  max-width: 145px;
-  object-fit: contain;
-}
-
-.cynx-sidebar__brand-icon {
-  flex-shrink: 0;
-}
-
-.cynx-sidebar__brand-text {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.cynx-sidebar__brand-title {
-  font-weight: 700;
-  font-size: 0.88rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.cynx-sidebar__brand-subtitle {
-  font-size: 0.64rem;
-  font-weight: 600;
-}
-
-.cynx-sidebar__toggle-btn {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border-radius: var(--radxs, 6px);
-  padding: 0;
-  transition: background 0.14s, color 0.14s;
-  flex-shrink: 0;
-  margin-left: 8px;
-}
-
-.cynx-sidebar__toggle-btn:hover {
-  background: var(--sidebar-item-hover, var(--grey-1, #fafafa));
-  color: var(--sidebar-text, var(--primary-text, #09090b));
-}
-
-.cynx-sidebar--dark .cynx-sidebar__toggle-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: #ffffff;
-}
-
-.cynx-sidebar__nav {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.cynx-sidebar__section {
-  display: flex;
-  flex-direction: column;
-}
-
-.cynx-sidebar__section-title {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 10px;
-  border-radius: var(--rads, 8px);
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  background: transparent;
-  border: none;
-  box-sizing: border-box;
-}
-
-.cynx-sidebar__section-title--clickable {
-  cursor: pointer;
-}
-
-.cynx-sidebar__section-title--clickable:hover {
-  background: var(--sidebar-item-hover, var(--grey-1, #fafafa));
-}
-
-.cynx-sidebar--dark .cynx-sidebar__section-title--clickable:hover {
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.cynx-sidebar__section-title--static {
-  cursor: default;
-}
-
-.cynx-sidebar__chevron {
-  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
-  opacity: 0.6;
-}
-
-.cynx-sidebar__chevron--expanded {
-  transform: rotate(180deg);
-}
-
-.cynx-sidebar__separator {
-  height: 1px;
-  margin: 4px 0;
-}
-
-.cynx-sidebar__accordion-grid {
-  display: grid;
-  transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.cynx-sidebar__items-wrapper {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.cynx-sidebar__link {
-  display: flex;
-  align-items: center;
-  border-radius: var(--rads, 8px);
-  font-size: 0.82rem;
-  font-weight: 600;
-  border: none;
-  text-decoration: none;
-  cursor: pointer;
-  text-align: left;
-  font-family: inherit;
-  transition: all 0.14s;
-  box-sizing: border-box;
-  outline: none;
-  width: 100%;
-}
-
-.cynx-sidebar__link.is-active {
-  font-weight: 600;
-}
-
-.cynx-sidebar__link:not(.is-active):hover {
-  background: var(--sidebar-item-hover, var(--grey-1, #fafafa));
-  color: var(--sidebar-text, var(--primary-text, #09090b));
-}
-
-.cynx-sidebar--dark .cynx-sidebar__link:not(.is-active):hover {
-  background: rgba(255, 255, 255, 0.06);
-  color: #ffffff;
-}
-
-.cynx-sidebar__item-content {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.cynx-sidebar__item-icon {
-  flex-shrink: 0;
-}
-
-.cynx-sidebar__item-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.cynx-sidebar__item-badge {
-  font-size: 0.68rem;
-  padding: 1px 6px;
-  border-radius: var(--radxs, 4px);
-  font-family: var(--sans, inherit);
-  font-weight: 600;
-  background: var(--grey-1, #fafafa);
-  color: var(--muted, #71717a);
-  border: 1px solid var(--border-light, #f4f4f5);
-}
-
-.cynx-sidebar__item-badge.is-active {
-  background: var(--border, #e4e4e7);
-  color: var(--primary-text, #09090b);
-}
-
-.cynx-sidebar--dark .cynx-sidebar__item-badge {
-  background: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.6);
-  border-color: rgba(255, 255, 255, 0.08);
-}
-
-.cynx-sidebar--dark .cynx-sidebar__item-badge.is-active {
-  background: rgba(255, 255, 255, 0.2);
-  color: #ffffff;
-  border: none;
-}
-
-.cynx-sidebar__footer {
-  flex-shrink: 0;
-}
-
-.cynx-sidebar__user-text {
-  font-size: 0.72rem;
-  margin-bottom: 8px;
-  padding: 0 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.cynx-sidebar__footer-actions {
-  display: flex;
-  gap: 6px;
-}
-
-.cynx-sidebar__footer-btn {
-  flex: 1;
-  justify-content: center;
-}
-
-.cynx-sidebar__footer-btn--danger {
-  color: var(--danger, #ef4444) !important;
-}
-
-.cynx-sidebar__collapsed-footer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-}
-
-.cynx-sidebar__collapsed-btn {
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  border-radius: var(--rads, 8px);
-  color: var(--t2, #71717a);
-  cursor: pointer;
-  transition: all 0.14s;
-}
-
-.cynx-sidebar__collapsed-btn:hover {
-  background: var(--grey-1, #fafafa);
-  color: var(--primary-text, #09090b);
-}
-
-.cynx-sidebar__collapsed-btn--danger {
-  color: var(--danger, #ef4444);
-}
-
-.cynx-sidebar__collapsed-btn--danger:hover {
-  background: var(--danger-bg, rgba(239, 68, 68, 0.1));
-}
-</style>
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
+import {
+  PanelLeftClose,
+  PanelLeftOpen,
+  LogOut,
+  ChevronDown,
+  Lock,
+} from 'lucide-vue-next';
+import Button from './Button.vue';
+
+const props = defineProps({
+  brand: {
+    type: Object,
+    default: () => ({}),
+  },
+  navSections: {
+    type: Array,
+    default: () => [],
+  },
+  navItems: {
+    type: Array,
+    default: () => [],
+  },
+  user: {
+    type: Object,
+    default: null,
+  },
+  collapsible: {
+    type: Boolean,
+    default: true,
+  },
+  collapsed: {
+    type: Boolean,
+    default: undefined,
+  },
+  defaultCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+  defaultSectionsExpanded: {
+    type: Boolean,
+    default: false,
+  },
+  sectionsCollapsible: {
+    type: Boolean,
+    default: true,
+  },
+  autoExpandActive: {
+    type: Boolean,
+    default: true,
+  },
+  modelValue: {
+    type: Boolean,
+    default: undefined,
+  },
+  storageKey: {
+    type: String,
+    default: 'app_sidebar_collapsed',
+  },
+  sidebarBg: {
+    type: String,
+    default: '',
+  },
+  sidebarColor: {
+    type: String,
+    default: '',
+  },
+  sidebarMutedColor: {
+    type: String,
+    default: '',
+  },
+  sidebarBorder: {
+    type: String,
+    default: '',
+  },
+  sidebarStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  sidebarClass: {
+    type: [String, Object, Array],
+    default: '',
+  },
+  activeBg: {
+    type: String,
+    default: '',
+  },
+  activeColor: {
+    type: String,
+    default: '',
+  },
+  activeSubBg: {
+    type: String,
+    default: '',
+  },
+  activeSubColor: {
+    type: String,
+    default: '',
+  },
+  subItemsIndent: {
+    type: Number,
+    default: 12,
+  },
+  hasPermission: {
+    type: Function,
+    default: () => true,
+  },
+  isItemActive: {
+    type: Function,
+    default: null,
+  },
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'update:collapsed',
+  'toggle-collapse',
+  'toggle-section',
+  'logout',
+  'lock',
+  'item-click',
+]);
+
+const internalCollapsed = ref(props.defaultCollapsed);
+const isDocumentDark = ref(false);
+
+const updateDarkThemeState = () => {
+  if (typeof document !== 'undefined') {
+    const cl = document.documentElement.classList;
+    isDocumentDark.value = cl.contains('dark') || cl.contains('dark1') || cl.contains('dark2');
+  }
+};
+
+let darkObserver = null;
+
+onMounted(() => {
+  updateDarkThemeState();
+  if (typeof MutationObserver !== 'undefined' && typeof document !== 'undefined') {
+    darkObserver = new MutationObserver(updateDarkThemeState);
+    darkObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+  }
+
+  if (typeof window !== 'undefined' && props.storageKey) {
+    const saved = localStorage.getItem(props.storageKey);
+    if (saved !== null) {
+      internalCollapsed.value = saved === 'true';
+    } else {
+      internalCollapsed.value = props.defaultCollapsed;
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  if (darkObserver) darkObserver.disconnect();
+});
+
+const isCollapsed = computed(() => {
+  if (typeof props.modelValue === 'boolean') return props.modelValue;
+  if (typeof props.collapsed === 'boolean') return props.collapsed;
+  return internalCollapsed.value;
+});
+
+const toggleSidebarCollapse = (e) => {
+  if (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  const next = !isCollapsed.value;
+  internalCollapsed.value = next;
+  emit('update:modelValue', next);
+  emit('update:collapsed', next);
+  emit('toggle-collapse', next);
+  if (typeof window !== 'undefined' && props.storageKey) {
+    localStorage.setItem(props.storageKey, String(next));
+  }
+};
+
+const expandedSections = ref({});
+
+const isSectionCollapsible = (sec) => {
+  if (typeof sec.isCollapsible === 'boolean') return sec.isCollapsible;
+  if (typeof sec.collapsible === 'boolean') return sec.collapsible;
+  return props.sectionsCollapsible;
+};
+
+const isSectionExpanded = (sec, secIdx) => {
+  // If section is configured as not collapsible, it is ALWAYS open/expanded
+  if (!isSectionCollapsible(sec)) {
+    return true;
+  }
+
+  // Check if user manually toggled this section
+  if (typeof expandedSections.value[secIdx] === 'boolean') {
+    return expandedSections.value[secIdx];
+  }
+
+  // Check if any child item is active (auto-expand active section)
+  if (props.autoExpandActive && props.isItemActive && Array.isArray(sec.items)) {
+    const hasActiveChild = sec.items.some((item) => props.isItemActive(item));
+    if (hasActiveChild) {
+      return true;
+    }
+  }
+
+  // Section level defaults
+  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;
+
+  // Component level default (default: false / collapsed)
+  return props.defaultSectionsExpanded;
+};
+
+const toggleSection = (sec, secIdx) => {
+  if (!isSectionCollapsible(sec)) return;
+  const current = isSectionExpanded(sec, secIdx);
+  expandedSections.value[secIdx] = !current;
+  emit('toggle-section', { section: sec, index: secIdx, expanded: !current });
+};
+
+const sections = computed(() => {
+  if (Array.isArray(props.navSections) && props.navSections.length > 0) return props.navSections;
+  if (Array.isArray(props.navItems) && props.navItems.length > 0) return [{ items: props.navItems }];
+  return [];
+});
+
+function isDark(color) {
+  if (!color || typeof color !== 'string') return false;
+  let c = color.trim().toLowerCase();
+  if (c === 'transparent' || c === 'inherit') return false;
+  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;
+    }
+  }
+  if (c.includes('dark') || c.includes('black') || c === '#141629' || c === '#18181b') return true;
+  return false;
+}
+
+const isDarkSidebar = computed(() => {
+  if (props.sidebarBg) return isDark(props.sidebarBg);
+  return isDocumentDark.value;
+});
+
+const effectiveSidebarBg = computed(() => {
+  if (props.sidebarBg) return props.sidebarBg;
+  return isDarkSidebar.value ? '#141629' : 'var(--sidebar-bg, var(--surface, #ffffff))';
+});
+
+const effectiveSidebarBorder = computed(() => {
+  if (props.sidebarBorder) return props.sidebarBorder;
+  return isDarkSidebar.value
+    ? '1px solid var(--sidebar-border, rgba(255, 255, 255, 0.08))'
+    : '1px solid var(--sidebar-border, var(--border-light, #f4f4f5))';
+});
+
+const brandTitleColor = computed(() => {
+  if (props.sidebarColor) return props.sidebarColor;
+  return isDarkSidebar.value
+    ? 'var(--sidebar-text, #ffffff)'
+    : 'var(--sidebar-text, var(--primary-text, #09090b))';
+});
+
+const brandSubtitleColor = computed(() => {
+  if (props.sidebarMutedColor) return props.sidebarMutedColor;
+  return isDarkSidebar.value
+    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
+    : 'var(--sidebar-text-muted, var(--muted, #71717a))';
+});
+
+const toggleBtnColor = computed(() => {
+  return isDarkSidebar.value
+    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.65))'
+    : 'var(--sidebar-text-muted, var(--t2, #71717a))';
+});
+
+const sectionHeaderColor = computed(() => {
+  if (props.sidebarMutedColor) return props.sidebarMutedColor;
+  return isDarkSidebar.value
+    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
+    : 'var(--sidebar-text-muted, var(--muted, #71717a))';
+});
+
+const inactiveItemColor = computed(() => {
+  return isDarkSidebar.value
+    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.65))'
+    : 'var(--sidebar-text-muted, var(--t2, #71717a))';
+});
+
+const defaultActiveBg = computed(() => {
+  return isDarkSidebar.value
+    ? 'var(--sidebar-item-active-bg, rgba(255, 255, 255, 0.12))'
+    : 'var(--sidebar-item-active-bg, var(--grey-1, #fafafa))';
+});
+
+const defaultActiveColor = computed(() => {
+  return isDarkSidebar.value
+    ? 'var(--sidebar-item-active-text, #ffffff)'
+    : 'var(--sidebar-item-active-text, var(--primary-text, #09090b))';
+});
+
+const userFullNameColor = computed(() => {
+  return isDarkSidebar.value
+    ? 'var(--sidebar-text, rgba(255, 255, 255, 0.85))'
+    : 'var(--sidebar-text-muted, var(--muted, #71717a))';
+});
+
+const userUsernameColor = computed(() => {
+  return isDarkSidebar.value
+    ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
+    : 'var(--sidebar-text-muted, var(--t3, #a1a1aa))';
+});
+
+const handleItemClick = (item, event) => {
+  emit('item-click', item, event);
+  if (typeof item.onSelect === 'function') {
+    item.onSelect(item, event);
+  }
+};
+</script>
+
+<template>
+  <aside
+    class="cynx-sidebar"
+    :class="[
+      sidebarClass,
+      {
+        'cynx-sidebar--collapsed': isCollapsed,
+        'cynx-sidebar--dark': isDarkSidebar,
+      },
+    ]"
+    :style="[
+      {
+        width: isCollapsed ? '64px' : '240px',
+        minWidth: isCollapsed ? '64px' : '240px',
+        background: effectiveSidebarBg,
+        borderRight: effectiveSidebarBorder,
+      },
+      sidebarStyle,
+    ]"
+  >
+    <!-- Header Slot or Default Brand Header -->
+    <slot name="header" :is-collapsed="isCollapsed" :toggle-collapse="toggleSidebarCollapse">
+      <div
+        class="cynx-sidebar__header"
+        :style="{
+          borderBottom: effectiveSidebarBorder,
+          justifyContent: isCollapsed ? 'center' : 'space-between',
+          padding: isCollapsed ? '0 8px' : '0 12px 0 16px',
+        }"
+      >
+        <template v-if="!isCollapsed">
+          <slot name="brand">
+            <div class="cynx-sidebar__brand">
+              <img
+                v-if="brand?.logoUrl"
+                :src="brand.logoUrl"
+                alt=""
+                class="cynx-sidebar__brand-logo"
+              />
+              <template v-else>
+                <div v-if="brand?.icon" class="cynx-sidebar__brand-icon">
+                  <component :is="brand.icon" />
+                </div>
+                <div class="cynx-sidebar__brand-text">
+                  <span class="cynx-sidebar__brand-title" :style="{ color: brandTitleColor }">
+                    {{ brand?.title || 'Приложение' }}
+                  </span>
+                  <span
+                    v-if="brand?.subtitle"
+                    class="cynx-sidebar__brand-subtitle"
+                    :style="{ color: brandSubtitleColor }"
+                  >
+                    {{ brand.subtitle }}
+                  </span>
+                </div>
+              </template>
+            </div>
+          </slot>
+
+          <button
+            v-if="collapsible"
+            type="button"
+            class="cynx-sidebar__toggle-btn"
+            :style="{ color: toggleBtnColor }"
+            title="Свернуть меню"
+            @click="toggleSidebarCollapse"
+          >
+            <PanelLeftClose :size="18" />
+          </button>
+        </template>
+
+        <template v-else>
+          <slot
+            name="brand-collapsed"
+            :is-collapsed="isCollapsed"
+            :toggle-collapse="toggleSidebarCollapse"
+          >
+            <button
+              v-if="collapsible"
+              type="button"
+              class="cynx-sidebar__toggle-btn"
+              :style="{ color: toggleBtnColor, width: '36px', height: '36px' }"
+              title="Развернуть меню"
+              @click="toggleSidebarCollapse"
+            >
+              <PanelLeftOpen :size="18" />
+            </button>
+          </slot>
+        </template>
+      </div>
+    </slot>
+
+    <!-- Sidebar Navigation -->
+    <nav class="cynx-sidebar__nav" :style="{ padding: isCollapsed ? '12px 8px' : '12px' }">
+      <template v-for="(sec, secIdx) in sections" :key="secIdx">
+        <div
+          v-if="sec.items && sec.items.filter((it) => !it.permission || hasPermission(it.permission)).length > 0"
+          class="cynx-sidebar__section"
+          :style="{ marginTop: secIdx > 0 && !isCollapsed ? '6px' : '0px' }"
+        >
+          <!-- Section Header: Accordion Button (if collapsible) or Static Title (if not collapsible) -->
+          <template v-if="sec.title && !isCollapsed">
+            <button
+              v-if="isSectionCollapsible(sec)"
+              type="button"
+              class="cynx-sidebar__section-title cynx-sidebar__section-title--clickable"
+              :style="{ color: sectionHeaderColor }"
+              @click="toggleSection(sec, secIdx)"
+            >
+              <span>{{ sec.title }}</span>
+              <ChevronDown
+                :size="13"
+                class="cynx-sidebar__chevron"
+                :class="{ 'cynx-sidebar__chevron--expanded': isSectionExpanded(sec, secIdx) }"
+              />
+            </button>
+
+            <div
+              v-else
+              class="cynx-sidebar__section-title cynx-sidebar__section-title--static"
+              :style="{ color: sectionHeaderColor }"
+            >
+              <span>{{ sec.title }}</span>
+            </div>
+          </template>
+
+          <!-- Separator when collapsed -->
+          <div
+            v-if="sec.title && isCollapsed && secIdx > 0"
+            class="cynx-sidebar__separator"
+            :style="{ background: effectiveSidebarBorder }"
+          />
+
+          <!-- Accordion Grid -->
+          <div
+            class="cynx-sidebar__accordion-grid"
+            :style="{
+              gridTemplateRows: isCollapsed || isSectionExpanded(sec, secIdx) ? '1fr' : '0fr',
+            }"
+          >
+            <div
+              class="cynx-sidebar__items-wrapper"
+              :style="{
+                paddingTop: sec.title && !isCollapsed ? '2px' : '0px',
+                paddingLeft: sec.title && !isCollapsed && subItemsIndent ? `${subItemsIndent}px` : '0px',
+              }"
+            >
+              <template
+                v-for="item in sec.items.filter((it) => !it.permission || hasPermission(it.permission))"
+                :key="item.to?.name || item.to?.path || item.to || item.label || item.text"
+              >
+                <slot
+                  name="item"
+                  :item="item"
+                  :is-collapsed="isCollapsed"
+                  :is-accordion="Boolean(sec.title)"
+                >
+                  <!-- Router Link Navigation Item -->
+                  <router-link
+                    v-if="item.to"
+                    :to="item.to"
+                    custom
+                    v-slot="{ isActive, isExactActive, href, navigate }"
+                  >
+                    <a
+                      :href="href"
+                      class="cynx-sidebar__link"
+                      :class="{
+                        'is-active': isItemActive ? isItemActive(item) : (item.exact ? isExactActive : isActive),
+                      }"
+                      :title="isCollapsed ? (item.label || item.text) : undefined"
+                      :style="{
+                        justifyContent: isCollapsed ? 'center' : 'space-between',
+                        padding: isCollapsed
+                          ? '9px 0'
+                          : sec.title
+                          ? '6px 8px'
+                          : '8px 10px',
+                        background: (isItemActive ? isItemActive(item) : (item.exact ? isExactActive : isActive))
+                          ? (item.activeBg || (sec.title ? activeSubBg : null) || activeBg || defaultActiveBg)
+                          : 'transparent',
+                        color: (isItemActive ? isItemActive(item) : (item.exact ? isExactActive : isActive))
+                          ? (item.activeColor || (sec.title ? activeSubColor : null) || activeColor || defaultActiveColor)
+                          : inactiveItemColor,
+                      }"
+                      @click="navigate($event); handleItemClick(item, $event)"
+                    >
+                      <div class="cynx-sidebar__item-content">
+                        <component
+                          :is="item.icon"
+                          v-if="item.icon"
+                          :size="isCollapsed ? 18 : sec.title ? 15 : 16"
+                          class="cynx-sidebar__item-icon"
+                        />
+                        <span v-if="!isCollapsed" class="cynx-sidebar__item-label">
+                          {{ item.label || item.text }}
+                        </span>
+                      </div>
+
+                      <span
+                        v-if="!isCollapsed && (typeof item.count === 'number' || item.badge)"
+                        class="cynx-sidebar__item-badge"
+                        :class="{ 'is-active': isItemActive ? isItemActive(item) : (item.exact ? isExactActive : isActive) }"
+                      >
+                        {{ typeof item.count === 'number' ? item.count : item.badge }}
+                      </span>
+                    </a>
+                  </router-link>
+
+                  <!-- Normal Click Item -->
+                  <button
+                    v-else
+                    type="button"
+                    class="cynx-sidebar__link"
+                    :style="{
+                      justifyContent: isCollapsed ? 'center' : 'space-between',
+                      padding: isCollapsed ? '9px 0' : sec.title ? '6px 8px' : '8px 10px',
+                      color: inactiveItemColor,
+                    }"
+                    @click="handleItemClick(item, $event)"
+                  >
+                    <div class="cynx-sidebar__item-content">
+                      <component
+                        :is="item.icon"
+                        v-if="item.icon"
+                        :size="isCollapsed ? 18 : sec.title ? 15 : 16"
+                        class="cynx-sidebar__item-icon"
+                      />
+                      <span v-if="!isCollapsed" class="cynx-sidebar__item-label">
+                        {{ item.label || item.text }}
+                      </span>
+                    </div>
+                  </button>
+                </slot>
+              </template>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Slot for custom navigation content -->
+      <slot />
+    </nav>
+
+    <!-- Footer Slot or Default User Profile -->
+    <slot
+      name="footer"
+      :user="user"
+      :is-collapsed="isCollapsed"
+      :on-logout="() => emit('logout')"
+      :on-lock="() => emit('lock')"
+    >
+      <div
+        v-if="user"
+        class="cynx-sidebar__footer"
+        :style="{
+          padding: isCollapsed ? '12px 8px' : '12px',
+          borderTop: effectiveSidebarBorder,
+        }"
+      >
+        <template v-if="!isCollapsed">
+          <div class="cynx-sidebar__user-text" :style="{ color: userFullNameColor }">
+            <template v-if="user.fullName">
+              {{ user.fullName }}
+              <span v-if="user.username" :style="{ color: userUsernameColor }">
+                ({{ user.username }})
+              </span>
+            </template>
+            <template v-else>
+              {{ user.username }}
+            </template>
+          </div>
+
+          <div class="cynx-sidebar__footer-actions">
+            <Button
+              variant="ghost"
+              size="md"
+              title="Заблокировать"
+              class="cynx-sidebar__footer-btn"
+              @click="emit('lock')"
+            >
+              <template #icon>
+                <Lock :size="13" />
+              </template>
+              Блок
+            </Button>
+
+            <Button
+              variant="ghost"
+              size="md"
+              title="Выйти"
+              class="cynx-sidebar__footer-btn cynx-sidebar__footer-btn--danger"
+              @click="emit('logout')"
+            >
+              <template #icon>
+                <LogOut :size="14" />
+              </template>
+              Выйти
+            </Button>
+          </div>
+        </template>
+
+        <template v-else>
+          <div class="cynx-sidebar__collapsed-footer">
+            <button
+              type="button"
+              class="cynx-sidebar__collapsed-btn"
+              title="Заблокировать экран"
+              @click="emit('lock')"
+            >
+              <Lock :size="16" />
+            </button>
+
+            <button
+              type="button"
+              class="cynx-sidebar__collapsed-btn cynx-sidebar__collapsed-btn--danger"
+              :title="`Выйти (${user?.username || user?.fullName || ''})`"
+              @click="emit('logout')"
+            >
+              <LogOut :size="17" />
+            </button>
+          </div>
+        </template>
+      </div>
+    </slot>
+  </aside>
+</template>
+
+<style scoped>
+.cynx-sidebar {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  user-select: 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;
+  flex-shrink: 0;
+  font-family: var(--sans, inherit);
+}
+
+.cynx-sidebar__header {
+  height: 56px;
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.cynx-sidebar__brand {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  overflow: hidden;
+}
+
+.cynx-sidebar__brand-logo {
+  max-height: 32px;
+  max-width: 145px;
+  object-fit: contain;
+}
+
+.cynx-sidebar__brand-icon {
+  flex-shrink: 0;
+}
+
+.cynx-sidebar__brand-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.cynx-sidebar__brand-title {
+  font-weight: 700;
+  font-size: 0.88rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cynx-sidebar__brand-subtitle {
+  font-size: 0.64rem;
+  font-weight: 600;
+}
+
+.cynx-sidebar__toggle-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radxs, 6px);
+  padding: 0;
+  transition: background 0.14s, color 0.14s;
+  flex-shrink: 0;
+  margin-left: 8px;
+}
+
+.cynx-sidebar__toggle-btn:hover {
+  background: var(--sidebar-item-hover, var(--grey-1, #fafafa));
+  color: var(--sidebar-text, var(--primary-text, #09090b));
+}
+
+.cynx-sidebar--dark .cynx-sidebar__toggle-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #ffffff;
+}
+
+.cynx-sidebar__nav {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.cynx-sidebar__section {
+  display: flex;
+  flex-direction: column;
+}
+
+.cynx-sidebar__section-title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  border-radius: var(--rads, 8px);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  background: transparent;
+  border: none;
+  box-sizing: border-box;
+}
+
+.cynx-sidebar__section-title--clickable {
+  cursor: pointer;
+}
+
+.cynx-sidebar__section-title--clickable:hover {
+  background: var(--sidebar-item-hover, var(--grey-1, #fafafa));
+}
+
+.cynx-sidebar--dark .cynx-sidebar__section-title--clickable:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.cynx-sidebar__section-title--static {
+  cursor: default;
+}
+
+.cynx-sidebar__chevron {
+  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 0.6;
+}
+
+.cynx-sidebar__chevron--expanded {
+  transform: rotate(180deg);
+}
+
+.cynx-sidebar__separator {
+  height: 1px;
+  margin: 4px 0;
+}
+
+.cynx-sidebar__accordion-grid {
+  display: grid;
+  transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.cynx-sidebar__items-wrapper {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cynx-sidebar__link {
+  display: flex;
+  align-items: center;
+  border-radius: var(--rads, 8px);
+  font-size: 0.82rem;
+  font-weight: 600;
+  border: none;
+  text-decoration: none;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  transition: all 0.14s;
+  box-sizing: border-box;
+  outline: none;
+  width: 100%;
+}
+
+.cynx-sidebar__link.is-active {
+  font-weight: 600;
+}
+
+.cynx-sidebar__link:not(.is-active):hover {
+  background: var(--sidebar-item-hover, var(--grey-1, #fafafa));
+  color: var(--sidebar-text, var(--primary-text, #09090b));
+}
+
+.cynx-sidebar--dark .cynx-sidebar__link:not(.is-active):hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: #ffffff;
+}
+
+.cynx-sidebar__item-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.cynx-sidebar__item-icon {
+  flex-shrink: 0;
+}
+
+.cynx-sidebar__item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cynx-sidebar__item-badge {
+  font-size: 0.68rem;
+  padding: 1px 6px;
+  border-radius: var(--radxs, 4px);
+  font-family: var(--sans, inherit);
+  font-weight: 600;
+  background: var(--grey-1, #fafafa);
+  color: var(--muted, #71717a);
+  border: 1px solid var(--border-light, #f4f4f5);
+}
+
+.cynx-sidebar__item-badge.is-active {
+  background: var(--border, #e4e4e7);
+  color: var(--primary-text, #09090b);
+}
+
+.cynx-sidebar--dark .cynx-sidebar__item-badge {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.6);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.cynx-sidebar--dark .cynx-sidebar__item-badge.is-active {
+  background: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+  border: none;
+}
+
+.cynx-sidebar__footer {
+  flex-shrink: 0;
+}
+
+.cynx-sidebar__user-text {
+  font-size: 0.72rem;
+  margin-bottom: 8px;
+  padding: 0 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cynx-sidebar__footer-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.cynx-sidebar__footer-btn {
+  flex: 1;
+  justify-content: center;
+}
+
+.cynx-sidebar__footer-btn--danger {
+  color: var(--danger, #ef4444) !important;
+}
+
+.cynx-sidebar__collapsed-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.cynx-sidebar__collapsed-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--rads, 8px);
+  color: var(--t2, #71717a);
+  cursor: pointer;
+  transition: all 0.14s;
+}
+
+.cynx-sidebar__collapsed-btn:hover {
+  background: var(--grey-1, #fafafa);
+  color: var(--primary-text, #09090b);
+}
+
+.cynx-sidebar__collapsed-btn--danger {
+  color: var(--danger, #ef4444);
+}
+
+.cynx-sidebar__collapsed-btn--danger:hover {
+  background: var(--danger-bg, rgba(239, 68, 68, 0.1));
+}
+</style>