[{"data":1,"prerenderedAt":283},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fsidebar":3,"component-meta:UiSidebar":141},{"id":4,"title":5,"body":6,"component":122,"dependsOn":123,"description":127,"emitDescriptions":128,"extension":132,"meta":133,"navigation":134,"order":135,"path":136,"seo":137,"status":138,"stem":139,"__hash__":140},"docs\u002Fdocs\u002Fcomponents\u002Fsidebar.md","Sidebar",{"type":7,"value":8,"toc":111},"minimark",[9,14,19,23,26,30,47,51,54,58,69,73,88,92],[10,11,13],"h2",{"id":12},"приклад","Приклад",[15,16],"component-preview",{"name":17,"stage":18},"sidebar-basic","min-h-80",[10,20,22],{"id":21},"api","API",[24,25],"component-api",{},[10,27,29],{"id":28},"персистентність-стану-згортання","Персистентність стану згортання",[31,32,33,34,38,39,42,43,46],"p",{},"Передайте ",[35,36,37],"code",{},"storage-key",", і стан ",[35,40,41],{},"collapsed"," житиме між сесіями — той самий\nпринцип, що й у ",[35,44,45],{},"UiResizablePanels",". Значення читається при монтуванні\n(щоб не розійшлися server і client рендери) і записується при кожній зміні.\nСховище недоступне (private mode) — персистентність мовчки вимикається,\nстан працює в межах сторінки.",[10,48,50],{"id":49},"коли-використовувати","Коли використовувати",[31,52,53],{},"Для постійної навігації dashboard, admin або складного продукту. На desktop\nпанель бере участь у layout і може згортатися; на mobile відкривається поверх\nконтенту.",[10,55,57],{"id":56},"коли-не-використовувати","Коли НЕ використовувати",[31,59,60,61,64,65,68],{},"Не використовуйте для тимчасової форми або деталей сутності — це сценарій\n",[35,62,63],{},"UiDrawer",". На простому сайті з трьома посиланнями достатньо звичайного ",[35,66,67],{},"nav",".",[10,70,72],{"id":71},"доступність","Доступність",[31,74,75,76,79,80,83,84,87],{},"На mobile панель отримує роль dialog, блокує прокрутку фону, утримує фокус і\nзакривається через Escape незалежно від того, де зараз фокус. Фокус при\nвідкритті отримує кнопка закриття (або елемент з ",[35,77,78],{},"initial-focus",") — не сам\nконтейнер, тож Tab починається з реальної дії, а не з панелі. На desktop\nзалишається звичайним ",[35,81,82],{},"aside"," landmark. Кнопка collapse оголошує поточний\nстан через ",[35,85,86],{},"aria-expanded",", а її шеврон вказує в бік, куди панель згорнеться.",[10,89,91],{"id":90},"деталі-реалізації","Деталі реалізації",[31,93,94,95,98,99,102,103,106,107,110],{},"Компонент бере шар зі спільного стеку оверлеїв, тож ",[35,96,97],{},"UiModal",", відкритий із\nсайдбару, завжди поверх. ",[35,100,101],{},"prefers-reduced-motion"," вимикає анімацію панелі й\nблюр фону — тривалість Transition задана явно, бо вона керує двома дітьми\n(backdrop + панель). Невидима зона дотику кнопок шапки — 45×45 через\n",[35,104,105],{},"pointer-coarse:after:",". Логіка сховища живе в ",[35,108,109],{},"app\u002Futils\u002FuiSidebar.ts"," —\nтестується без рендеру.",{"title":112,"searchDepth":113,"depth":113,"links":114},"",2,[115,116,117,118,119,120,121],{"id":12,"depth":113,"text":13},{"id":21,"depth":113,"text":22},{"id":28,"depth":113,"text":29},{"id":49,"depth":113,"text":50},{"id":56,"depth":113,"text":57},{"id":71,"depth":113,"text":72},{"id":90,"depth":113,"text":91},"UiSidebar",[124,125,126,109],"app\u002Fcomposables\u002FuseFocusTrap.ts","app\u002Fcomposables\u002FuseReducedMotion.ts","app\u002Fcomposables\u002FuseScrollLock.ts","Адаптивна бічна навігація з desktop collapse та mobile focus trap.",{"update:modelValue":129,"update:collapsed":130,"close":131},"Мобільну панель відкрито або закрито.","Desktop-панель згорнуто або розгорнуто — змінено користувачем або прочитано зі сховища.","Мобільну панель закрито.","md",{},true,48,"\u002Fdocs\u002Fcomponents\u002Fsidebar",{"title":5,"description":127},"stable","docs\u002Fcomponents\u002Fsidebar","Dfojmq8O4Wa-s-nQlb6Ks00AXrd3kmw5x8PBnckfpJU",{"mode":142,"prefetch":143,"preload":143,"filePath":144,"declarationPath":145,"pascalName":122,"kebabName":146,"chunkName":147,"priority":148,"_scanned":134,"meta":149},"all",false,"app\u002Fcomponents\u002Fui\u002FUiSidebar.vue","\u002Fapp\u002Fapp\u002Fcomponents\u002Fui\u002FUiSidebar.vue","ui-sidebar","components\u002Fui-sidebar",1,{"type":148,"props":150,"slots":210,"events":253,"exposed":274,"hash":282},[151,157,167,172,177,182,186,190,199,204],{"name":152,"global":143,"default":153,"description":154,"tags":155,"required":143,"type":156,"schema":156},"storageKey","undefined","Ключ localStorage, під яким стан згортання живе між сесіями.\nЧитається в onMounted — як у UiResizablePanels, щоб не розійшлися\nserver і client рендери. Недоступне сховище (private mode) мовчки\nпропускає персистентність.",[],"string",{"name":158,"global":143,"default":159,"description":160,"tags":161,"required":143,"type":162,"schema":163},"side","\"left\"","З якого боку екрана панель.",[],"\"left\" | \"right\"",{"kind":164,"type":162,"schema":165},"enum",{"0":159,"1":166},"\"right\"",{"name":168,"global":143,"default":169,"description":170,"tags":171,"required":143,"type":156,"schema":156},"width","\"17rem\"","Ширина розгорнутої панелі, будь-яка CSS-величина.",[],{"name":173,"global":143,"default":174,"description":175,"tags":176,"required":143,"type":156,"schema":156},"collapsedWidth","\"4.5rem\"","Ширина згорнутої панелі, будь-яка CSS-величина.",[],{"name":178,"global":143,"default":179,"description":180,"tags":181,"required":143,"type":156,"schema":156},"ariaLabel","\"Бічна навігація\"","Доступна назва панелі — вона є орієнтиром `navigation` на сторінці.",[],{"name":183,"global":143,"default":153,"description":184,"tags":185,"required":143,"type":156,"schema":156},"initialFocus","CSS-селектор усередині панелі, якому віддати фокус при відкритті на\nмобільному. Типово фокус отримує кнопка закриття, а без неї — сама\nпанель: автофокус в інпуті піднімає клавіатуру.",[],{"name":187,"global":143,"description":188,"tags":189,"required":143,"type":156,"schema":156},"sidebarId","Стабільний id шару в стеку оверлеїв. Задавати не обов'язково:\nбез нього генерується автоматично.",[],{"name":191,"global":143,"default":192,"description":193,"tags":194,"required":143,"type":195,"schema":196},"modelValue","false","Відкрито на мобільному. На десктопі панель видима завжди.\nВикористовуйте через `v-model`.",[],"boolean",{"kind":164,"type":195,"schema":197},{"0":192,"1":198},"true",{"name":41,"global":143,"default":192,"description":200,"tags":201,"required":143,"type":195,"schema":202},"Згорнуто до вузької смуги з іконками. Лише десктоп. Використовуйте\nчерез `v-model:collapsed`.",[],{"kind":164,"type":195,"schema":203},{"0":192,"1":198},{"name":205,"global":143,"default":198,"description":206,"tags":207,"required":143,"type":195,"schema":208},"collapsible","Показувати кнопку згортання. Вимкніть, якщо ширина панелі фіксована\nдизайном.",[],{"kind":164,"type":195,"schema":209},{"0":192,"1":198},[211,229,241],{"name":212,"type":213,"description":112,"tags":214,"schema":215},"header","{ collapsed: boolean; close: () => void; }",[],{"kind":216,"type":213,"schema":217},"object",{"collapsed":218,"close":222},{"name":41,"global":143,"description":112,"tags":219,"required":134,"type":195,"schema":220},[],{"kind":164,"type":195,"schema":221},{"0":192,"1":198},{"name":223,"global":143,"description":112,"tags":224,"required":134,"type":225,"schema":226},"close",[],"() => void",{"kind":227,"type":228},"event","(): void",{"name":230,"type":213,"description":112,"tags":231,"schema":232},"default",[],{"kind":216,"type":213,"schema":233},{"collapsed":234,"close":238},{"name":41,"global":143,"description":112,"tags":235,"required":134,"type":195,"schema":236},[],{"kind":164,"type":195,"schema":237},{"0":192,"1":198},{"name":223,"global":143,"description":112,"tags":239,"required":134,"type":225,"schema":240},[],{"kind":227,"type":228},{"name":242,"type":213,"description":112,"tags":243,"schema":244},"footer",[],{"kind":216,"type":213,"schema":245},{"collapsed":246,"close":250},{"name":41,"global":143,"description":112,"tags":247,"required":134,"type":195,"schema":248},[],{"kind":164,"type":195,"schema":249},{"0":192,"1":198},{"name":223,"global":143,"description":112,"tags":251,"required":134,"type":225,"schema":252},[],{"kind":227,"type":228},[254,262,269],{"name":255,"description":112,"tags":256,"type":257,"signature":258,"schema":259},"update:modelValue",[],"[value: boolean]","(event: \"update:modelValue\", value: boolean): void",[260],{"kind":164,"type":195,"schema":261},[192,198],{"name":263,"description":112,"tags":264,"type":257,"signature":265,"schema":266},"update:collapsed",[],"(event: \"update:collapsed\", value: boolean): void",[267],{"kind":164,"type":195,"schema":268},[192,198],{"name":223,"description":112,"tags":270,"type":271,"signature":272,"schema":273},[],"[]","(event: \"close\"): void",[],[275,278],{"name":223,"type":225,"description":112,"tags":276,"schema":277},[],{"kind":227,"type":228},{"name":279,"type":225,"description":112,"tags":280,"schema":281},"toggleCollapsed",[],{"kind":227,"type":228},"U1wHkJRlUuGB6ycINgiO8FoG6VgWTBI3M26bemBghQs",1789660506382]