@nextcloud/vue 9.0.0-alpha.3 → 9.0.0-alpha.4

package/dist/chunks/NcAppSettingsDialog-CjpGb_I4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsDialog-CjpGb_I4.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcDialog v-if=\"open\"\n\t\t:navigation-aria-label=\"settingsNavigationAriaLabel\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul v-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link': true,\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click.prevent=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport NcDialog from '../NcDialog/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\nimport { warn } from 'vue'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.unregisterSection,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Determines the open / closed state of the modal\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Shows the navigation on desktop if true\n\t\t */\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Name of the settings\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Additional elements to add to the focus trap\n\t\t */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t\t/**\n\t\t\t * Currently registered settings sections\n\t\t\t * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}\n\t\t\t */\n\t\t\tsections: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tcloseOnClickOutside: true,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Check if one or more navigation entries provide icons\n\t\t */\n\t\thasNavigationIcons() {\n\t\t\treturn this.sections.some(({ icon }) => !!icon)\n\t\t},\n\n\t\thasNavigation() {\n\t\t\tif (this.isMobile || !this.showNavigation) {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\tsettingsNavigationAriaLabel() {\n\t\t\treturn t('Settings navigation')\n\t\t},\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Called when a new section is registered\n\t\t * @param {string} id The section ID\n\t\t * @param {string} name The section name\n\t\t * @param {import('vue').VNode[]|undefined} icon Optional icon component\n\t\t */\n\t\tregisterSection(id, name, icon) {\n\t\t\t// Check for the uniqueness of section names\n\t\t\tif (this.sections.some(({ id: otherId }) => id === otherId)) {\n\t\t\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t\t\t}\n\t\t\tif (this.sections.some(({ name: otherName }) => name === otherName)) {\n\t\t\t\twarn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t\t\t}\n\n\t\t\tconst newSections = [...this.sections, { id, name, icon }]\n\t\t\t// Sort sections by order in slots\n\t\t\tthis.sections = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\t\t\tconst indexOf = (id) => this.$slots.default?.().indexOf(vnode => vnode?.props?.id === id) ?? -1\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\n\t\t\t// If this is the first section registered, set it as selected\n\t\t\tif (this.sections.length === 1) {\n\t\t\t\tthis.selectedSection = id\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Called when a section is unregistered to remove it from dialog\n\t\t * @param {string} id The section ID\n\t\t */\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id !== otherId)\n\n\t\t\t// If the current section is unregistered, set the first section as selected\n\t\t\tif (this.selectedSection === id) {\n\t\t\t\tthis.selectedSection = this.sections[0]?.id ?? ''\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Scrolls the content to the selected settings section.absolute\n\t\t *\n\t\t * @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: 20px;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\t:deep &__content {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: 16px;\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: 12px;\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: $clickable-area;\n\t\tmargin: 4px 0;\n\t\tline-height: $clickable-area;\n\t\tborder-radius: var(--border-radius-pill);\n\t\tfont-weight: bold;\n\t\tpadding: 0 20px;\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: 8px;\n\t\t\tgap: 4px;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: 36px;\n\t\t\tmax-width: 36px;\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-settings {\n\t\t:deep .dialog__name {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcVNodes","id","_openBlock","_createBlock","_mergeProps","_createSlots","_withCtx","_createElementVNode","_renderSlot","_createElementBlock","_Fragment","_renderList","_normalizeClass","_withModifiers","_withKeys","_createCommentVNode","_toDisplayString"],"mappings":"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"}

package/dist/chunks/{NcAppSettingsSection-PG8OLRbP.mjs → NcAppSettingsSection-a7OfJ9GT.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcAppSettingsSection-BUxPrhYB.css';
+import '../assets/NcAppSettingsSection-CcRbdcD-.css';
 import { openBlock, createElementBlock, createElementVNode, toDisplayString, renderSlot, createCommentVNode } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
@@ -53,7 +53,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createCommentVNode("", true)
   ], 8, _hoisted_1);
 }
-const NcAppSettingsSection = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-9bc88a91"]]);
+const NcAppSettingsSection = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-43bcc28f"]]);
 export {
   NcAppSettingsSection as N
 };

package/dist/chunks/NcAppSettingsSection-a7OfJ9GT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSection-a7OfJ9GT.mjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div :id=\"htmlId\" class=\"app-settings-section\">\n\t\t<h3 class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t\t<!-- @slot Optonal icon to for the secion in the navigation -->\n\t\t<slot v-if=\"false\" name=\"icon\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\n\tinject: ['registerSection', 'unregisterSection'],\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(id) {\n\t\t\t\t// Only alphanumeric, dash and underscore\n\t\t\t\treturn /^[a-z0-9\\-_]+$/.test(id)\n\t\t\t},\n\t\t},\n\t},\n\tcomputed: {\n\t\t// generate an id for each settingssection based on the name without whitespaces\n\t\thtmlId() {\n\t\t\treturn 'settings-section_' + this.id\n\t\t},\n\t},\n\t// Reactive changes for section navigation\n\twatch: {\n\t\tid(newId, oldId) {\n\t\t\tthis.unregisterSection(oldId)\n\t\t\tthis.registerSection(newId, this.name, this.$slots?.icon?.())\n\t\t},\n\t\tname(newName) {\n\t\t\tthis.unregisterSection(this.id)\n\t\t\tthis.registerSection(this.id, newName, this.$slots?.icon?.())\n\t\t},\n\t},\n\tmounted() {\n\t\t// register section for navigation\n\t\tthis.registerSection(this.id, this.name, this.$slots?.icon?.())\n\t},\n\tbeforeUnmount() {\n\t\tthis.unregisterSection(this.id)\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\tmargin-bottom: 80px;\n\t&__name {\n\t\tfont-size: 20px;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_toDisplayString","_renderSlot","_createCommentVNode"],"mappings":";;AAiBA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EACN,QAAQ,CAAC,mBAAmB,mBAAmB;AAAA,EAE/C,OAAO;AAAA,IACN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA,IAED,IAAI;AAAA,MACH,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU,IAAI;AAEb,eAAO,iBAAiB,KAAK,EAAE;AAAA,MAC/B;AAAA,IACD;AAAA,EACD;AAAA,EACD,UAAU;AAAA;AAAA,IAET,SAAS;AACR,aAAO,sBAAsB,KAAK;AAAA,IAClC;AAAA,EACD;AAAA;AAAA,EAED,OAAO;AAAA,IACN,GAAG,OAAO,OAAO;AAChB,WAAK,kBAAkB,KAAK;AAC5B,WAAK,gBAAgB,OAAO,KAAK,MAAM,KAAK,QAAQ,QAAQ;AAAA,IAC5D;AAAA,IACD,KAAK,SAAS;AACb,WAAK,kBAAkB,KAAK,EAAE;AAC9B,WAAK,gBAAgB,KAAK,IAAI,SAAS,KAAK,QAAQ,QAAQ;AAAA,IAC5D;AAAA,EACD;AAAA,EACD,UAAU;AAET,SAAK,gBAAgB,KAAK,IAAI,KAAK,MAAM,KAAK,QAAQ,QAAQ;AAAA,EAC9D;AAAA,EACD,gBAAgB;AACf,SAAK,kBAAkB,KAAK,EAAE;AAAA,EAC9B;AACF;AA5DA,MAAA,aAAA,CAAA,IAAA;AAOM,MAAA,aAAA,EAAA,OAAM,6BAA4B;;sBADvCA,mBAOM,OAAA;AAAA,IAPA,IAAI,SAAM;AAAA,IAAE,OAAM;AAAA;IACvBC,mBAEK,MAFL,YAEKC,gBADD,OAAI,IAAA,GAAA,CAAA;AAAA,IAERC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,IAVVC,mBAAA,IAAA,IAAA;AAAA,EAAA,GAAA,GAAA,UAAA;;;"}

package/dist/chunks/{NcAppSidebar-B0pjWsoI.mjs → NcAppSidebar-BGCuCKk_.mjs}

@@ -1,18 +1,18 @@
-import '../assets/NcAppSidebar-v-H-37nV.css';
+import '../assets/NcAppSidebar-CxMCtTtn.css';
 import _sfc_main$5 from "../Components/NcVNodes.mjs";
-import { N as NcCheckboxRadioSwitch } from "./NcCheckboxRadioSwitch-DdG8AL_h.mjs";
-import { resolveComponent, openBlock, createElementBlock, withKeys, withModifiers, Fragment, renderList, createBlock, normalizeClass, withCtx, createVNode, createElementVNode, toDisplayString, createCommentVNode, renderSlot, mergeProps, resolveDirective, Transition, withDirectives, normalizeStyle, createTextVNode, vShow } from "vue";
+import { N as NcCheckboxRadioSwitch } from "./NcCheckboxRadioSwitch-BW7W0ToW.mjs";
+import { resolveComponent, openBlock, createElementBlock, withKeys, withModifiers, Fragment, renderList, createBlock, normalizeClass, withCtx, createVNode, createElementVNode, toDisplayString, createCommentVNode, renderSlot, mergeProps, resolveDirective, Transition, withDirectives, Teleport, normalizeStyle, createTextVNode, vShow } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcActions } from "./NcActions-B6QL_4DD.mjs";
-import { N as NcLoadingIcon } from "./NcLoadingIcon-DwbO7gAy.mjs";
-import { N as NcButton, i as isSlotPopulated } from "./NcButton-B27fpd1m.mjs";
-import { N as NcEmptyContent } from "./NcEmptyContent-CdgacgQe.mjs";
+import { N as NcActions } from "./NcActions-COaRMDe5.mjs";
+import { N as NcLoadingIcon } from "./NcLoadingIcon-DREmHXr2.mjs";
+import { N as NcButton, i as isSlotPopulated } from "./NcButton-DvO0XwJf.mjs";
+import { N as NcEmptyContent } from "./NcEmptyContent-BoGB3vFC.mjs";
 import { directive } from "../Directives/Focus.mjs";
 import { directive as directive$1 } from "../Directives/Linkify.mjs";
 import { useIsSmallMobile } from "../Composables/useIsMobile.mjs";
-import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
-import { g as getTrapStack } from "./focusTrap-hWDNhn4t.mjs";
-import { r as register, L as t13, a as t } from "./_l10n-ipRV_dfs.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { g as getTrapStack } from "./focusTrap-Cecv_gjR.mjs";
+import { r as register, L as t13, a as t } from "./_l10n-C3nxU4O-.mjs";
 import { A as ArrowRight } from "./ArrowRight-Cg6xGDcS.mjs";
 import { C as Close } from "./Close-pmiXntgw.mjs";
 import { vOnClickOutside } from "@vueuse/components";
@@ -232,7 +232,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2)
   ]);
 }
-const NcAppSidebarTabs = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__scopeId", "data-v-be5cc033"]]);
+const NcAppSidebarTabs = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__scopeId", "data-v-5e6cbd37"]]);
 register(t13);
 const _sfc_main$3 = {
   name: "DockRightIcon",
@@ -382,7 +382,12 @@ const _sfc_main = {
     linkify: directive$1,
     ClickOutside: vOnClickOutside
   },
-  inheritAttrs: false,
+  inject: {
+    ncContentSelector: {
+      from: "NcContent:selector",
+      default: void 0
+    }
+  },
   props: {
     active: {
       type: String,
@@ -486,22 +491,36 @@ const _sfc_main = {
     /**
      * Allow to conditionally show the sidebar
      * You can also use `v-if` on the sidebar, but using the open prop allow to keep
-     * the sidebar inside the DOM for performance if it is opened and closed multple times.
+     * the sidebar inside the DOM for performance if it is opened and closed multiple times.
      *
      * When using the `open` property to close the sidebar a built-in toggle button will be shown to reopen it,
-     * similar to the app navigation.
+     * similar to the app navigation. You can remove this button with the `no-toggle` prop.
      */
     open: {
       type: Boolean,
       default: true
     },
     /**
-     * Custom classes to assign to the sidebar toggle button
+     * Custom classes to assign to the sidebar toggle button.
      * If needed this can be used to assign styles to the button using `:deep()` selector.
      */
     toggleClasses: {
       type: [String, Array, Object],
       default: ""
+    },
+    /**
+     * Custom attrs to assign to the sidebar toggle button.
+     */
+    toggleAttrs: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Do not add the built-in toggle button with `open` prop.
+     */
+    noToggle: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -550,10 +569,12 @@ const _sfc_main = {
     },
     open() {
       this.toggleFocusTrap();
+      this.checkToggleButtonContainerAvailability();
     }
   },
   created() {
     this.preserveElementToReturnFocus();
+    this.checkToggleButtonContainerAvailability();
   },
   mounted() {
     if (this.elementToReturnFocus) {
@@ -673,6 +694,16 @@ const _sfc_main = {
       this.preserveElementToReturnFocus();
       this.$refs.tabs.focusActiveTabContent();
     },
+    /**
+     * Check if the toggle button container is available
+     */
+    checkToggleButtonContainerAvailability() {
+      if (this.open === false && !this.noToggle && !this.ncContentSelector) {
+        console.warn(
+          "[NcAppSidebar] It looks like you want to use NcAppSidebar with the built-in toggle button. This feature is only available when NcAppSidebar is used in NcContent."
+        );
+      }
+    },
     /**
      * Emit name change event to parent component
      *
@@ -729,202 +760,203 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_linkify = resolveDirective("linkify");
   const _directive_focus = resolveDirective("focus");
   const _directive_click_outside = resolveDirective("click-outside");
-  return openBlock(), createElementBlock(Fragment, null, [
-    !$props.open ? (openBlock(), createBlock(_component_NcButton, {
-      key: 0,
-      "aria-label": $options.t("Open sidebar"),
-      class: normalizeClass(["app-sidebar__toggle", $props.toggleClasses]),
-      type: "tertiary",
-      ref: "toggle",
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:open", true))
-    }, {
-      icon: withCtx(() => [
-        renderSlot(_ctx.$slots, "toggle-icon", {}, () => [
-          createVNode(_component_IconDockRight, { size: 20 })
-        ], true)
-      ]),
-      _: 3
-    }, 8, ["aria-label", "class"])) : createCommentVNode("", true),
-    createVNode(Transition, mergeProps({
-      appear: "",
-      name: "slide-right"
-    }, _ctx.$attrs, {
-      onAfterEnter: $options.onAfterEnter,
-      onAfterLeave: $options.onAfterLeave
-    }), {
-      default: withCtx(() => [
-        withDirectives(createElementVNode("aside", {
-          id: "app-sidebar-vue",
-          ref: "sidebar",
-          class: "app-sidebar",
-          "aria-labelledby": `app-sidebar-vue-${$setup.uid}__header`,
-          onKeydown: _cache[7] || (_cache[7] = withKeys((...args) => $options.onKeydownEsc && $options.onKeydownEsc(...args), ["esc"]))
+  return openBlock(), createBlock(Transition, {
+    appear: "",
+    name: "slide-right",
+    onAfterEnter: $options.onAfterEnter,
+    onAfterLeave: $options.onAfterLeave
+  }, {
+    default: withCtx(() => [
+      withDirectives(createElementVNode("aside", {
+        id: "app-sidebar-vue",
+        ref: "sidebar",
+        class: "app-sidebar",
+        "aria-labelledby": `app-sidebar-vue-${$setup.uid}__header`,
+        onKeydown: _cache[7] || (_cache[7] = withKeys((...args) => $options.onKeydownEsc && $options.onKeydownEsc(...args), ["esc"]))
+      }, [
+        $options.ncContentSelector && !$props.open && !$props.noToggle ? (openBlock(), createBlock(Teleport, {
+          key: 0,
+          to: $options.ncContentSelector
+        }, [
+          createVNode(_component_NcButton, mergeProps({
+            "aria-label": $options.t("Open sidebar"),
+            class: ["app-sidebar__toggle", $props.toggleClasses],
+            type: "tertiary"
+          }, $props.toggleAttrs, {
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:open", true))
+          }), {
+            icon: withCtx(() => [
+              renderSlot(_ctx.$slots, "toggle-icon", {}, () => [
+                createVNode(_component_IconDockRight, { size: 20 })
+              ], true)
+            ]),
+            _: 3
+          }, 16, ["aria-label", "class"])
+        ], 8, ["to"])) : createCommentVNode("", true),
+        createElementVNode("header", {
+          class: normalizeClass([{
+            "app-sidebar-header--with-figure": $options.isSlotPopulated(_ctx.$slots.header?.()) || $props.background,
+            "app-sidebar-header--compact": $props.compact
+          }, "app-sidebar-header"])
         }, [
-          createElementVNode("header", {
-            class: normalizeClass([{
-              "app-sidebar-header--with-figure": $options.isSlotPopulated(_ctx.$slots.header?.()) || $props.background,
-              "app-sidebar-header--compact": $props.compact
-            }, "app-sidebar-header"])
-          }, [
-            createElementVNode("div", _hoisted_2, [
-              ($options.isSlotPopulated(_ctx.$slots.header?.()) || $props.background) && !$props.empty ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: normalizeClass([{
-                  "app-sidebar-header__figure--with-action": $options.hasFigureClickListener
-                }, "app-sidebar-header__figure"]),
-                style: normalizeStyle({
-                  backgroundImage: `url(${$props.background})`
-                }),
-                tabindex: "0",
-                onClick: _cache[1] || (_cache[1] = (...args) => $options.onFigureClick && $options.onFigureClick(...args)),
-                onKeydown: _cache[2] || (_cache[2] = withKeys((...args) => $options.onFigureClick && $options.onFigureClick(...args), ["enter"]))
-              }, [
-                renderSlot(_ctx.$slots, "header", { class: "app-sidebar-header__background" }, void 0, true)
-              ], 38)) : createCommentVNode("", true),
-              !$props.empty ? (openBlock(), createElementBlock("div", {
-                key: 1,
-                class: normalizeClass([{
-                  "app-sidebar-header__desc--with-tertiary-action": $options.canStar || $options.isSlotPopulated(_ctx.$slots["tertiary-actions"]?.()),
-                  "app-sidebar-header__desc--editable": $props.nameEditable && !$props.subname,
-                  "app-sidebar-header__desc--with-subname--editable": $props.nameEditable && $props.subname,
-                  "app-sidebar-header__desc--without-actions": !$options.isSlotPopulated(_ctx.$slots["secondary-actions"]?.())
-                }, "app-sidebar-header__desc"])
-              }, [
-                $options.canStar || $options.isSlotPopulated(_ctx.$slots["tertiary-actions"]?.()) ? (openBlock(), createElementBlock("div", _hoisted_3, [
-                  renderSlot(_ctx.$slots, "tertiary-actions", {}, () => [
-                    $options.canStar ? (openBlock(), createBlock(_component_NcButton, {
-                      key: 0,
-                      "aria-label": $data.favoriteTranslated,
-                      pressed: $data.isStarred,
-                      class: "app-sidebar-header__star",
-                      type: "secondary",
-                      onClick: withModifiers($options.toggleStarred, ["prevent"])
+          createElementVNode("div", _hoisted_2, [
+            ($options.isSlotPopulated(_ctx.$slots.header?.()) || $props.background) && !$props.empty ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass([{
+                "app-sidebar-header__figure--with-action": $options.hasFigureClickListener
+              }, "app-sidebar-header__figure"]),
+              style: normalizeStyle({
+                backgroundImage: `url(${$props.background})`
+              }),
+              tabindex: "0",
+              onClick: _cache[1] || (_cache[1] = (...args) => $options.onFigureClick && $options.onFigureClick(...args)),
+              onKeydown: _cache[2] || (_cache[2] = withKeys((...args) => $options.onFigureClick && $options.onFigureClick(...args), ["enter"]))
+            }, [
+              renderSlot(_ctx.$slots, "header", { class: "app-sidebar-header__background" }, void 0, true)
+            ], 38)) : createCommentVNode("", true),
+            !$props.empty ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass([{
+                "app-sidebar-header__desc--with-tertiary-action": $options.canStar || $options.isSlotPopulated(_ctx.$slots["tertiary-actions"]?.()),
+                "app-sidebar-header__desc--editable": $props.nameEditable && !$props.subname,
+                "app-sidebar-header__desc--with-subname--editable": $props.nameEditable && $props.subname,
+                "app-sidebar-header__desc--without-actions": !$options.isSlotPopulated(_ctx.$slots["secondary-actions"]?.())
+              }, "app-sidebar-header__desc"])
+            }, [
+              $options.canStar || $options.isSlotPopulated(_ctx.$slots["tertiary-actions"]?.()) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                renderSlot(_ctx.$slots, "tertiary-actions", {}, () => [
+                  $options.canStar ? (openBlock(), createBlock(_component_NcButton, {
+                    key: 0,
+                    "aria-label": $data.favoriteTranslated,
+                    pressed: $data.isStarred,
+                    class: "app-sidebar-header__star",
+                    type: "secondary",
+                    onClick: withModifiers($options.toggleStarred, ["prevent"])
+                  }, {
+                    icon: withCtx(() => [
+                      $props.starLoading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : $data.isStarred ? (openBlock(), createBlock(_component_IconStar, {
+                        key: 1,
+                        size: 20
+                      })) : (openBlock(), createBlock(_component_IconStarOutline, {
+                        key: 2,
+                        size: 20
+                      }))
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "pressed", "onClick"])) : createCommentVNode("", true)
+                ], true)
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_4, [
+                createElementVNode("div", _hoisted_5, [
+                  withDirectives((openBlock(), createElementBlock("h2", {
+                    id: `app-sidebar-vue-${$setup.uid}__header`,
+                    ref: "header",
+                    "aria-label": $props.title,
+                    title: $props.title,
+                    class: "app-sidebar-header__mainname",
+                    tabindex: $props.nameEditable ? 0 : -1,
+                    onClick: _cache[3] || (_cache[3] = withModifiers((...args) => $options.editName && $options.editName(...args), ["self"]))
+                  }, [
+                    createTextVNode(toDisplayString($props.name), 1)
+                  ], 8, _hoisted_6)), [
+                    [vShow, !$props.nameEditable],
+                    [_directive_linkify, { text: $props.name, linkify: $props.linkifyName }]
+                  ]),
+                  $props.nameEditable ? withDirectives((openBlock(), createElementBlock("form", {
+                    key: 0,
+                    class: "app-sidebar-header__mainname-form",
+                    onSubmit: _cache[6] || (_cache[6] = withModifiers((...args) => $options.onSubmitName && $options.onSubmitName(...args), ["prevent"]))
+                  }, [
+                    withDirectives(createElementVNode("input", {
+                      ref: "nameInput",
+                      class: "app-sidebar-header__mainname-input",
+                      type: "text",
+                      placeholder: $props.namePlaceholder,
+                      value: $props.name,
+                      onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers((...args) => $options.onDismissEditing && $options.onDismissEditing(...args), ["stop"]), ["esc"])),
+                      onInput: _cache[5] || (_cache[5] = (...args) => $options.onNameInput && $options.onNameInput(...args))
+                    }, null, 40, _hoisted_7), [
+                      [_directive_focus]
+                    ]),
+                    createVNode(_component_NcButton, {
+                      type: "tertiary-no-background",
+                      "aria-label": $data.changeNameTranslated,
+                      "native-type": "submit"
                     }, {
                       icon: withCtx(() => [
-                        $props.starLoading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : $data.isStarred ? (openBlock(), createBlock(_component_IconStar, {
-                          key: 1,
-                          size: 20
-                        })) : (openBlock(), createBlock(_component_IconStarOutline, {
-                          key: 2,
-                          size: 20
-                        }))
+                        createVNode(_component_IconArrowRight, { size: 20 })
                       ]),
                       _: 1
-                    }, 8, ["aria-label", "pressed", "onClick"])) : createCommentVNode("", true)
-                  ], true)
-                ])) : createCommentVNode("", true),
-                createElementVNode("div", _hoisted_4, [
-                  createElementVNode("div", _hoisted_5, [
-                    withDirectives((openBlock(), createElementBlock("h2", {
-                      id: `app-sidebar-vue-${$setup.uid}__header`,
-                      ref: "header",
-                      "aria-label": $props.title,
-                      title: $props.title,
-                      class: "app-sidebar-header__mainname",
-                      tabindex: $props.nameEditable ? 0 : -1,
-                      onClick: _cache[3] || (_cache[3] = withModifiers((...args) => $options.editName && $options.editName(...args), ["self"]))
-                    }, [
-                      createTextVNode(toDisplayString($props.name), 1)
-                    ], 8, _hoisted_6)), [
-                      [vShow, !$props.nameEditable],
-                      [_directive_linkify, { text: $props.name, linkify: $props.linkifyName }]
+                    }, 8, ["aria-label"])
+                  ], 32)), [
+                    [_directive_click_outside, () => $options.onSubmitName()]
+                  ]) : createCommentVNode("", true),
+                  $options.isSlotPopulated(_ctx.$slots["secondary-actions"]?.()) ? (openBlock(), createBlock(_component_NcActions, {
+                    key: 1,
+                    class: "app-sidebar-header__menu",
+                    "force-menu": $props.forceMenu
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "secondary-actions", {}, void 0, true)
                     ]),
-                    $props.nameEditable ? withDirectives((openBlock(), createElementBlock("form", {
-                      key: 0,
-                      class: "app-sidebar-header__mainname-form",
-                      onSubmit: _cache[6] || (_cache[6] = withModifiers((...args) => $options.onSubmitName && $options.onSubmitName(...args), ["prevent"]))
-                    }, [
-                      withDirectives(createElementVNode("input", {
-                        ref: "nameInput",
-                        class: "app-sidebar-header__mainname-input",
-                        type: "text",
-                        placeholder: $props.namePlaceholder,
-                        value: $props.name,
-                        onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers((...args) => $options.onDismissEditing && $options.onDismissEditing(...args), ["stop"]), ["esc"])),
-                        onInput: _cache[5] || (_cache[5] = (...args) => $options.onNameInput && $options.onNameInput(...args))
-                      }, null, 40, _hoisted_7), [
-                        [_directive_focus]
-                      ]),
-                      createVNode(_component_NcButton, {
-                        type: "tertiary-no-background",
-                        "aria-label": $data.changeNameTranslated,
-                        "native-type": "submit"
-                      }, {
-                        icon: withCtx(() => [
-                          createVNode(_component_IconArrowRight, { size: 20 })
-                        ]),
-                        _: 1
-                      }, 8, ["aria-label"])
-                    ], 32)), [
-                      [_directive_click_outside, () => $options.onSubmitName()]
-                    ]) : createCommentVNode("", true),
-                    $options.isSlotPopulated(_ctx.$slots["secondary-actions"]?.()) ? (openBlock(), createBlock(_component_NcActions, {
-                      key: 1,
-                      class: "app-sidebar-header__menu",
-                      "force-menu": $props.forceMenu
-                    }, {
-                      default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "secondary-actions", {}, void 0, true)
-                      ]),
-                      _: 3
-                    }, 8, ["force-menu"])) : createCommentVNode("", true)
-                  ]),
-                  $props.subname.trim() !== "" || _ctx.$slots["subname"] ? (openBlock(), createElementBlock("p", {
-                    key: 0,
-                    title: $props.subtitle || void 0,
-                    class: "app-sidebar-header__subname"
-                  }, [
-                    renderSlot(_ctx.$slots, "subname", {}, () => [
-                      createTextVNode(toDisplayString($props.subname), 1)
-                    ], true)
-                  ], 8, _hoisted_8)) : createCommentVNode("", true)
-                ])
-              ], 2)) : createCommentVNode("", true)
-            ]),
-            createVNode(_component_NcButton, {
-              ref: "closeButton",
-              title: $data.closeTranslated,
-              "aria-label": $data.closeTranslated,
-              type: "tertiary",
-              class: "app-sidebar__close",
-              onClick: withModifiers($options.closeSidebar, ["prevent"])
-            }, {
-              icon: withCtx(() => [
-                createVNode(_component_IconClose, { size: 20 })
-              ]),
-              _: 1
-            }, 8, ["title", "aria-label", "onClick"]),
-            $options.isSlotPopulated(_ctx.$slots.description?.()) && !$props.empty ? (openBlock(), createElementBlock("div", _hoisted_9, [
-              renderSlot(_ctx.$slots, "description", {}, void 0, true)
-            ])) : createCommentVNode("", true)
-          ], 2),
-          withDirectives(createVNode(_component_NcAppSidebarTabs, {
-            ref: "tabs",
-            active: $props.active,
-            "onUpdate:active": $options.onUpdateActive
-          }, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ]),
-            _: 3
-          }, 8, ["active", "onUpdate:active"]), [
-            [vShow, !$props.loading]
+                    _: 3
+                  }, 8, ["force-menu"])) : createCommentVNode("", true)
+                ]),
+                $props.subname.trim() !== "" || _ctx.$slots["subname"] ? (openBlock(), createElementBlock("p", {
+                  key: 0,
+                  title: $props.subtitle || void 0,
+                  class: "app-sidebar-header__subname"
+                }, [
+                  renderSlot(_ctx.$slots, "subname", {}, () => [
+                    createTextVNode(toDisplayString($props.subname), 1)
+                  ], true)
+                ], 8, _hoisted_8)) : createCommentVNode("", true)
+              ])
+            ], 2)) : createCommentVNode("", true)
           ]),
-          $props.loading ? (openBlock(), createBlock(_component_NcEmptyContent, { key: 0 }, {
+          createVNode(_component_NcButton, {
+            ref: "closeButton",
+            title: $data.closeTranslated,
+            "aria-label": $data.closeTranslated,
+            type: "tertiary",
+            class: "app-sidebar__close",
+            onClick: withModifiers($options.closeSidebar, ["prevent"])
+          }, {
             icon: withCtx(() => [
-              createVNode(_component_NcLoadingIcon, { size: 64 })
+              createVNode(_component_IconClose, { size: 20 })
             ]),
             _: 1
-          })) : createCommentVNode("", true)
-        ], 40, _hoisted_1), [
-          [vShow, $props.open]
-        ])
-      ]),
-      _: 3
-    }, 16, ["onAfterEnter", "onAfterLeave"])
-  ], 64);
+          }, 8, ["title", "aria-label", "onClick"]),
+          $options.isSlotPopulated(_ctx.$slots.description?.()) && !$props.empty ? (openBlock(), createElementBlock("div", _hoisted_9, [
+            renderSlot(_ctx.$slots, "description", {}, void 0, true)
+          ])) : createCommentVNode("", true)
+        ], 2),
+        withDirectives(createVNode(_component_NcAppSidebarTabs, {
+          ref: "tabs",
+          active: $props.active,
+          "onUpdate:active": $options.onUpdateActive
+        }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ]),
+          _: 3
+        }, 8, ["active", "onUpdate:active"]), [
+          [vShow, !$props.loading]
+        ]),
+        $props.loading ? (openBlock(), createBlock(_component_NcEmptyContent, { key: 1 }, {
+          icon: withCtx(() => [
+            createVNode(_component_NcLoadingIcon, { size: 64 })
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ], 40, _hoisted_1), [
+        [vShow, $props.open]
+      ])
+    ]),
+    _: 3
+  }, 8, ["onAfterEnter", "onAfterLeave"]);
 }
-const NcAppSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-de628e21"]]);
+const NcAppSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-24231626"]]);
 export {
   NcAppSidebar as N
 };