cynx-lib 1.3.51 → 1.3.53

package/vue/components/Sidebar.vue

@@ -0,0 +1,954 @@
+<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: 500;
+}
+
+.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: 500;
+  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(--mono, monospace);
+  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>