@nextcloud/vue 8.30.0 → 8.32.0

package/dist/chunks/NcAppSidebar-AR-D7HSj.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppSidebar-AR-D7HSj.mjs","sources":["../../src/components/NcAppSidebar/NcAppSidebarTabs.vue","../../node_modules/vue-material-design-icons/DockRight.vue","../../node_modules/vue-material-design-icons/Star.vue","../../node_modules/vue-material-design-icons/StarOutline.vue","../../src/components/NcAppSidebar/NcAppSidebar.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<!-- Follows the tab aria guidelines\n\thttps://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->\n<template>\n\t<div class=\"app-sidebar-tabs\">\n\t\t<!-- tabs navigation -->\n\t\t<!-- 33 and 34 code is for page up and page down -->\n\t\t<div v-if=\"hasMultipleTabs || showForSingleTab\"\n\t\t\trole=\"tablist\"\n\t\t\tclass=\"app-sidebar-tabs__nav\"\n\t\t\t@keydown.left.exact.prevent.stop=\"focusPreviousTab\"\n\t\t\t@keydown.right.exact.prevent.stop=\"focusNextTab\"\n\t\t\t@keydown.tab.exact.prevent.stop=\"focusActiveTabContent\"\n\t\t\t@keydown.home.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.end.exact.prevent.stop=\"focusLastTab\"\n\t\t\t@keydown.page-up.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.page-down.exact.prevent.stop=\"focusLastTab\">\n\t\t\t<NcCheckboxRadioSwitch v-for=\"tab in tabs\"\n\t\t\t\t:key=\"tab.id\"\n\t\t\t\t:aria-controls=\"`tab-${tab.id}`\"\n\t\t\t\t:aria-selected=\"String(activeTab === tab.id)\"\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:checked=\"activeTab === tab.id\"\n\t\t\t\t:wrapper-id=\"`tab-button-${tab.id}`\"\n\t\t\t\t:tabindex=\"activeTab === tab.id ? 0 : -1\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\"\n\t\t\t\tclass=\"app-sidebar-tabs__tab\"\n\t\t\t\t:class=\"{ active: tab.id === activeTab }\"\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t@update:checked=\"setActive(tab.id)\">\n\t\t\t\t<span class=\"app-sidebar-tabs__tab-caption\">\n\t\t\t\t\t{{ tab.name }}\n\t\t\t\t</span>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcVNodes :vnodes=\"tab.renderIcon()\">\n\t\t\t\t\t\t<span class=\"app-sidebar-tabs__tab-icon\" :class=\"tab.icon\" />\n\t\t\t\t\t</NcVNodes>\n\t\t\t\t</template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\n\t\t<!-- tabs content -->\n\t\t<div :class=\"{'app-sidebar-tabs__content--multiple': hasMultipleTabs}\"\n\t\t\tclass=\"app-sidebar-tabs__content\">\n\t\t\t<!-- @slot Tabs content - NcAppSidebarTab components or any content if there is no tabs -->\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport NcVNodes from '../NcVNodes/index.js'\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/index.js'\n\nexport default {\n\tname: 'NcAppSidebarTabs',\n\n\tcomponents: {\n\t\tNcCheckboxRadioSwitch,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterTab: this.registerTab,\n\t\t\tunregisterTab: this.unregisterTab,\n\t\t\t// Getter as an alternative to Vue 2.7 computed(() => this.activeTab)\n\t\t\tgetActiveTab: () => this.activeTab,\n\t\t\t// Used to check whether the tab header is shown so the tabs can reference the tab header for `aria-labelledby` or not\n\t\t\tisTablistShown: () => this.hasMultipleTabs,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Id of the tab to activate\n\t\t */\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Force the tab navigation to display even if there is only one tab\n\t\t */\n\t\tforceTabs: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: ['update:active'],\n\n\tdata() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.\n\t\t\t */\n\t\t\ttabs: [],\n\t\t\t/**\n\t\t\t * Local active (open) tab's ID. It allows to use component without active.sync\n\t\t\t */\n\t\t\tactiveTab: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Has multiple tabs. If only one tab - its content is shown without navigation\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\thasMultipleTabs() {\n\t\t\treturn this.tabs.length > 1\n\t\t},\n\n\t\tshowForSingleTab() {\n\t\t\treturn this.forceTabs && this.tabs.length === 1\n\t\t},\n\n\t\tcurrentTabIndex() {\n\t\t\treturn this.tabs.findIndex((tab) => tab.id === this.activeTab)\n\t\t},\n\t},\n\n\twatch: {\n\t\tactive(active) {\n\t\t\t// Prevent running it twice\n\t\t\tif (active !== this.activeTab) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\n\t\t/**\n\t\t * Set the current active tab\n\t\t *\n\t\t * @param {string} id the id of the tab\n\t\t */\n\t\tsetActive(id) {\n\t\t\tthis.activeTab = id\n\t\t\t/**\n\t\t\t * @property {string} active - active tab's id\n\t\t\t */\n\t\t\tthis.$emit('update:active', this.activeTab)\n\t\t},\n\n\t\t/**\n\t\t * Focus the previous tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusPreviousTab() {\n\t\t\tif (this.currentTabIndex > 0) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex - 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the next tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusNextTab() {\n\t\t\tif (this.currentTabIndex < this.tabs.length - 1) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex + 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the first tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusFirstTab() {\n\t\t\tthis.setActive(this.tabs[0].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the last tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusLastTab() {\n\t\t\tthis.setActive(this.tabs[this.tabs.length - 1].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the current active tab\n\t\t */\n\t\tfocusActiveTab() {\n\t\t\tthis.$el.querySelector(`#tab-button-${this.activeTab}`).focus()\n\t\t},\n\n\t\t/**\n\t\t * Focus the content on tab\n\t\t * see aria accessibility guidelines\n\t\t */\n\t\tfocusActiveTabContent() {\n\t\t\tthis.$el.querySelector('#tab-' + this.activeTab).focus()\n\t\t},\n\n\t\t/**\n\t\t * Update the current active tab\n\t\t */\n\t\tupdateActive() {\n\t\t\tthis.activeTab = this.active\n\t\t\t&& this.tabs.some(tab => tab.id === this.active)\n\t\t\t\t? this.active\n\t\t\t\t: this.tabs.length > 0\n\t\t\t\t\t? this.tabs[0].id\n\t\t\t\t\t: ''\n\t\t},\n\n\t\t/**\n\t\t * Register child tab in the tabs\n\t\t *\n\t\t * @param {object} tab child tab passed to slot\n\t\t */\n\t\tregisterTab(tab) {\n\t\t\tthis.tabs.push(tab)\n\t\t\tthis.tabs.sort((a, b) => {\n\t\t\t\tif (a.order === b.order) {\n\t\t\t\t\treturn OC.Util.naturalSortCompare(a.name, b.name)\n\t\t\t\t}\n\t\t\t\treturn a.order - b.order\n\t\t\t})\n\t\t\tthis.updateActive()\n\t\t},\n\n\t\t/**\n\t\t * Unregister child tab from the tabs\n\t\t *\n\t\t * @param {string} id tab's id\n\t\t */\n\t\tunregisterTab(id) {\n\t\t\tconst tabIndex = this.tabs.findIndex((tab) => tab.id === id)\n\t\t\tif (tabIndex !== -1) {\n\t\t\t\tthis.tabs.splice(tabIndex, 1)\n\t\t\t}\n\t\t\tif (this.activeTab === id) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.app-sidebar-tabs {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 0;\n\tflex: 1 1 100%;\n\n\t&__nav {\n\t\tdisplay: flex;\n\t\tjustify-content: stretch;\n\t\tmargin: 10px 8px 0 8px;\n\t\tborder-bottom: 1px solid var(--color-border);\n\n\t\t// Override checkbox-radio-switch styles so that it looks like tabs\n\t\t& :deep(.checkbox-radio-switch--button-variant) {\n\t\t\tborder: unset !important;\n\t\t\tborder-radius: 0 !important;\n\t\t\t.checkbox-content {\n\t\t\t\tpadding: var(--default-grid-baseline);\n\t\t\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0 !important;\n\t\t\t\tmargin: 0 !important;\n\t\t\t\tborder-bottom: var(--default-grid-baseline) solid transparent !important;\n\t\t\t\t.checkbox-content__icon > * {\n\t\t\t\t\tcolor: var(--color-main-text) !important;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&.checkbox-radio-switch--checked .checkbox-radio-switch__content{\n\t\t\t\tbackground: transparent !important;\n\t\t\t\tcolor: var(--color-main-text) !important;\n\t\t\t\tborder-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__tab {\n\t\tflex: 1 1;\n\t\t&.active {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t&-caption {\n\t\t\tflex: 0 1 100%;\n\t\t\twidth: 100%;\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tbackground-size: 20px;\n\t\t}\n\n\t\t// Override max-width to use all available space\n\t\t:deep(.checkbox-radio-switch__content) {\n\t\t\tmax-width: unset;\n\t\t}\n\t}\n\n\t&__content {\n\t\tposition: relative;\n\t\tmin-height: 256px;\n\t\theight: 100%;\n\t\t// force the use of the tab component if more than one tab\n\t\t// you can just put raw content if you don't use tabs\n\t\t&--multiple > :not(section) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n</style>\n","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon dock-right-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M15 18H4V6H15Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"DockRightIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon star-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"StarIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon star-outline-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"StarOutlineIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component provides a way to include the standardised sidebar.\nThe standard properties like name, subname, starred, etc. allow to automatically\ninclude a standard-header like it's used by the files app.\n\nTo conditionally show the sidebar either use `v-if` on the sidebar component,\nor use the `open` property of the component to controll the state.\nUsing `v-show` directly will result in usability issues due to internal focus trap handling.\n\n### Standard usage\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:starred=\"starred\"\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\n\timport Magnify from 'vue-material-design-icons/Magnify.vue'\n\timport Cog from 'vue-material-design-icons/Cog.vue'\n\timport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t\tCog,\n\t\t\tShareVariant,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tstarred: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### One tab\n\nSingle tab is rendered without navigation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"forceTabs\">Force tab navigation</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:force-tabs=\"forceTabs\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Cog from 'vue-material-design-icons/Cog.vue'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tforceTabs: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Dynamic tabs\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[0]\">Show search tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[1]\">Show settings tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"showTabs[2]\">Show sharing tab</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[0]\" name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[1]\" name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[2]\" name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowTabs: [true, true, false],\n\t\t}\n\t},\n}\n</script>\n```\n\n### Custom order\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\" :order=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\" :order=\"2\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\" :order=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n}\n</script>\n```\n\n### Activating tab programmatically\n\n```vue\n<template>\n\t<div>\n\t\t<NcSelect v-model=\"active\" :options=\"['search-tab', 'settings-tab', 'share-tab']\" />\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\t:active.sync=\"active\">\n\t\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tactive: 'search-tab',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Editable name\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name.sync=\"name\"\n\t\t:name-editable=\"true\"\n\t\tname-placeholder=\"Filename\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<!-- Insert your slots and tabs here -->\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Editable name after click with custom tertiary action\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name=\"name\"\n\t\t:name-editable.sync=\"nameEditable\"\n\t\t:name-placeholder=\"namePlaceholder\"\n\t\t:subname=\"subname\"\n\t\t@update:name=\"nameUpdate\">\n\t\t<template #tertiary-actions>\n\t\t\t<form>\n\t\t\t\t<input type=\"checkbox\" @click=\"toggledCheckbox\"/>\n\t\t\t</form>\n\t\t</template>\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t\tnamePlaceholder: 'Filename',\n\t\t\t\tsubname: 'last edited 3 weeks ago',\n\t\t\t\tnameEditable: false\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tnameUpdate(e) {\n\t\t\t\tthis.name = e\n\t\t\t},\n\t\t\ttoggledCheckbox() {\n\t\t\t\talert('toggle')\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Custom subname\n\nInstead of using the `subname` prop you can use the same called slot. This is handy if you need to add accessible information.\nLike in the following example where the goal is to show a star icon to mark the file a favorite.\nSimplying adding `★` would not work as screen readers might not or wrongly announce the icon meaning this information is lost.\n\nA working alternative would be using an icon together with an `aria-label`:\n\n```vue\n\t<template>\n\t\t<NcAppSidebar name=\"cat-picture.jpg\">\n\t\t\t<template #subname>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiStar\" name=\"Favorite\" />\n\t\t\t\t123 KiB, a month ago\n\t\t\t</template>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport { mdiStar } from '@mdi/js'\n\n\texport default {\n\t\tsetup() {\n\t\t\treturn {\n\t\t\t\tmdiStar,\n\t\t\t}\n\t\t}\n\t}\n\t</script>\n```\n\n### Empty sidebar for e.g. empty content component.\n\n```vue\n\t<template>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:empty=\"true\">\n\t\t\t<NcEmptyContent name=\"Content not found.\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport Magnify from 'vue-material-design-icons/Magnify.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t},\n\t}\n\t</script>\n```\n\n### Conditionally show the sidebar with `open`\n\nIf the sidebar should be shown conditionally, you can use `open` prop to define sidebar visibility.\nIt automatically shows a toggle button to open the sidebar if it is closed.\n\nYou can also use `--app-sidebar-offset` CSS variable to preserve space\nfor the toggle button, for example, in top bar of `NcAppContent`.\n\nThe built-in toggle button can be removed with `no-toggle` prop.\n\nNote: the built-in toggle button is only available then NcAppSidebar is used in NcContent.\n\n```vue\n<template>\n\t<!-- This is in most cases NcContent -->\n\t<NcContent app-name=\"styleguidist\" class=\"content-styleguidist\">\n\t\t<NcAppContent>\n\t\t\t<div class=\"top-bar\">\n\t\t\t\t<NcButton variant=\"primary\">Start a call</NcButton>\n\t\t\t</div>\n\t\t</NcAppContent>\n\t\t<!-- The sidebar -->\n\t\t<NcAppSidebar\n\t\t\t:open.sync=\"showSidebar\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</NcContent>\n</template>\n\n<script>\nimport Cog from 'vue-material-design-icons/Cog.vue'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowSidebar: true,\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\t/* Just to prevent jumping when the sidebar is hidden */\n\tmin-height: 360px;\n}\n\n.main-content {\n\tposition: absolute;\n\theight: 100%;\n\twidth: 100%;\n}\n\n/* Fix styles on this style guide page */\n@media only screen and (max-width: 512px) {\n\t:deep(aside) {\n\t\twidth: calc(100vw - 64px) !important;\n\t}\n}\n\n.top-bar {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\t/* preserve space for toggle button */\n\tpadding-inline-end: var(--app-sidebar-offset);\n\t/* same as on toggle button, but doesn't have to be the same */\n\tmargin: var(--app-sidebar-padding);\n}\n</style>\n```\n\n### Conditionally show the sidebar programmatically with `v-if`\n\nIf the sidebar should be shown conditionally without any explicit toggle button, you can use `v-if`.\n\n**Note about performance**: using `v-if` might result in bad performance and loosing sidebar content state.\n\n**Note about `v-show`**: using `v-show` to hide sidebar will result in usability issues due to active focus trap on mobile.\n\n```vue\n<template>\n\t<!-- This is in most cases NcContent -->\n\t<NcContent app-name=\"styleguidist\" class=\"content-styleguidist\">\n\t\t<NcAppContent>\n\t\t\t<div class=\"top-bar\">\n\t\t\t\t<NcButton @click.prevent=\"showSidebar = true\">\n\t\t\t\t\tToggle sidebar\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</NcAppContent>\n\t\t<!-- The sidebar -->\n\t\t<NcAppSidebar\n\t\t\tv-if=\"showSidebar\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\t@close=\"showSidebar = false\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</NcContent>\n</template>\n\n<script>\nimport Cog from 'vue-material-design-icons/Cog.vue'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowSidebar: true,\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\t/* Just to prevent jumping when the sidebar is hidden */\n\tmin-height: 360px;\n}\n\n.main-content {\n\tposition: absolute;\n\theight: 100%;\n\twidth: 100%;\n}\n\n/* Fix styles on this style guide page */\n@media only screen and (max-width: 512px) {\n\t:deep(aside) {\n\t\twidth: calc(100vw - 64px) !important;\n\t}\n}\n\n.top-bar {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\t/* preserve space for toggle button */\n\tpadding-inline-end: var(--app-sidebar-offset);\n\t/* same as on toggle button, but doesn't have to be the same */\n\tmargin: var(--app-sidebar-padding);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<transition appear\n\t\tname=\"slide-right\"\n\t\t@before-enter=\"onBeforeEnter\"\n\t\t@after-enter=\"onAfterEnter\"\n\t\t@before-leave=\"onBeforeLeave\"\n\t\t@after-leave=\"onAfterLeave\">\n\t\t<aside v-show=\"open\"\n\t\t\tid=\"app-sidebar-vue\"\n\t\t\tref=\"sidebar\"\n\t\t\tclass=\"app-sidebar\"\n\t\t\t:aria-labelledby=\"`app-sidebar-vue-${uid}__header`\"\n\t\t\t@keydown.esc=\"onKeydownEsc\">\n\t\t\t<!--\n\t\t\t\tWe cannot render toggle button inside sidebar (aside#app-sidebar-vue), because it is hidden then the toggle is needed.\n\t\t\t\tBut we also need transition with the sidebar to be the root of this component to use it as a single UI element, allowing to use `v-show`.\n\t\t\t\tSo we cannot render the toggle button directly in this component.\n\t\t\t\tAs a simple solution - render it in the content to keep correct position.\n\t\t\t-->\n\t\t\t<Teleport v-if=\"ncContentSelector && !open && !noToggle\" :selector=\"ncContentSelector\">\n\t\t\t\t<NcButton ref=\"toggle\"\n\t\t\t\t\t:aria-label=\"t('Open sidebar')\"\n\t\t\t\t\tclass=\"app-sidebar__toggle\"\n\t\t\t\t\t:class=\"toggleClasses\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tv-bind=\"toggleAttrs\"\n\t\t\t\t\t@click=\"$emit('update:open', true)\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<!-- @slot Custom icon for the toggle button, defaults to the dock-right icon from MDI -->\n\t\t\t\t\t\t<slot name=\"toggle-icon\">\n\t\t\t\t\t\t\t<IconDockRight :size=\"20\" />\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</Teleport>\n\n\t\t\t<header :class=\"{\n\t\t\t\t\t'app-sidebar-header--with-figure': hasFigure,\n\t\t\t\t\t'app-sidebar-header--compact': compact,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-sidebar-header\">\n\t\t\t\t<!-- @slot Alternative to the default header info: use for bare NcAppSidebar with tabs.\n\t\t\t\t\tNcAppSidebarHeader would be required to use for accessibility reasons.\n\t\t\t\t\tThis will be overridden by `empty` prop.\n\t\t\t\t-->\n\t\t\t\t<slot v-if=\"!empty\" name=\"info\">\n\t\t\t\t\t<!-- container for figure and description, allows easy switching to compact mode -->\n\t\t\t\t\t<div class=\"app-sidebar-header__info\">\n\t\t\t\t\t\t<!-- sidebar header illustration/figure -->\n\t\t\t\t\t\t<div v-if=\"hasFigure\"\n\t\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t\t'app-sidebar-header__figure--with-action': hasFigureClickListener\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\tclass=\"app-sidebar-header__figure\"\n\t\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\t\tbackgroundImage: `url(${background})`\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t@click=\"onFigureClick\"\n\t\t\t\t\t\t\t@keydown.enter=\"onFigureClick\">\n\t\t\t\t\t\t\t<slot class=\"app-sidebar-header__background\" name=\"header\" />\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- sidebar details -->\n\t\t\t\t\t\t<div :class=\"{\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--editable': nameEditable && !subname,\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,\n\t\t\t\t\t\t\t\t'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\tclass=\"app-sidebar-header__desc\">\n\t\t\t\t\t\t\t<!-- favourite icon -->\n\t\t\t\t\t\t\t<div v-if=\"canStar || $slots['tertiary-actions']\" class=\"app-sidebar-header__tertiary-actions\">\n\t\t\t\t\t\t\t\t<slot name=\"tertiary-actions\">\n\t\t\t\t\t\t\t\t\t<NcButton v-if=\"canStar\"\n\t\t\t\t\t\t\t\t\t\t:aria-label=\"favoriteTranslated\"\n\t\t\t\t\t\t\t\t\t\t:pressed=\"isStarred\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__star\"\n\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t@click.prevent=\"toggleStarred\">\n\t\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"starLoading\" />\n\t\t\t\t\t\t\t\t\t\t\t<Star v-else-if=\"isStarred\" :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t<StarOutline v-else :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- name -->\n\t\t\t\t\t\t\t<div class=\"app-sidebar-header__name-container\">\n\t\t\t\t\t\t\t\t<div class=\"app-sidebar-header__mainname-container\">\n\t\t\t\t\t\t\t\t\t<!-- main name -->\n\t\t\t\t\t\t\t\t\t<NcAppSidebarHeader v-show=\"!nameEditable\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname\"\n\t\t\t\t\t\t\t\t\t\t:name=\"name\"\n\t\t\t\t\t\t\t\t\t\t:linkify=\"linkifyName\"\n\t\t\t\t\t\t\t\t\t\t:title=\"title\"\n\t\t\t\t\t\t\t\t\t\t:tabindex=\"nameEditable ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t\t@click.self.native=\"editName\" />\n\t\t\t\t\t\t\t\t\t<template v-if=\"nameEditable\">\n\t\t\t\t\t\t\t\t\t\t<form v-click-outside=\"() => onSubmitName()\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-form\"\n\t\t\t\t\t\t\t\t\t\t\t@submit.prevent=\"onSubmitName\">\n\t\t\t\t\t\t\t\t\t\t\t<input ref=\"nameInput\"\n\t\t\t\t\t\t\t\t\t\t\t\tv-focus\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-input\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\t:placeholder=\"namePlaceholder\"\n\t\t\t\t\t\t\t\t\t\t\t\t:value=\"name\"\n\t\t\t\t\t\t\t\t\t\t\t\t@keydown.esc.stop=\"onDismissEditing\"\n\t\t\t\t\t\t\t\t\t\t\t\t@input=\"onNameInput\">\n\t\t\t\t\t\t\t\t\t\t\t<NcButton :aria-label=\"changeNameTranslated\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t<!-- header main menu -->\n\t\t\t\t\t\t\t\t\t<NcActions v-if=\"$slots['secondary-actions']\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__menu\"\n\t\t\t\t\t\t\t\t\t\t:force-menu=\"forceMenu\">\n\t\t\t\t\t\t\t\t\t\t<slot name=\"secondary-actions\" />\n\t\t\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<!-- secondary name -->\n\t\t\t\t\t\t\t\t<p v-if=\"subname.trim() !== '' || $slots['subname']\"\n\t\t\t\t\t\t\t\t\t:title=\"subtitle || undefined\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__subname\">\n\t\t\t\t\t\t\t\t\t<!-- @slot Alternative to the `subname` prop can be used for more complex conent. It will be rendered within a `p` tag. -->\n\t\t\t\t\t\t\t\t\t<slot name=\"subname\">\n\t\t\t\t\t\t\t\t\t\t{{ subname }}\n\t\t\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</slot>\n\t\t\t\t<!-- a11y fallback for empty content -->\n\t\t\t\t<NcAppSidebarHeader v-else\n\t\t\t\t\tclass=\"app-sidebar-header__mainname--hidden\"\n\t\t\t\t\t:name=\"name\"\n\t\t\t\t\ttabindex=\"-1\" />\n\n\t\t\t\t<NcButton ref=\"closeButton\"\n\t\t\t\t\t:aria-label=\"closeTranslated\"\n\t\t\t\t\t:title=\"closeTranslated\"\n\t\t\t\t\tclass=\"app-sidebar__close\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t@click.prevent=\"closeSidebar\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\n\t\t\t\t<div v-if=\"$slots['description'] && !empty\" class=\"app-sidebar-header__description\">\n\t\t\t\t\t<slot name=\"description\" />\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t<NcAppSidebarTabs v-show=\"!loading\"\n\t\t\t\tref=\"tabs\"\n\t\t\t\t:active=\"active\"\n\t\t\t\t:force-tabs=\"forceTabs\"\n\t\t\t\t@update:active=\"onUpdateActive\">\n\t\t\t\t<slot />\n\t\t\t</NcAppSidebarTabs>\n\n\t\t\t<NcEmptyContent v-if=\"loading\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon :size=\"64\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</aside>\n\t</transition>\n</template>\n\n<script>\n// TODO: This is built-in for vue3 just drop the import\nimport { Portal as Teleport } from '@linusborg/vue-simple-portal'\n\nimport NcAppSidebarTabs from './NcAppSidebarTabs.vue'\nimport NcActions from '../NcActions/index.js'\nimport NcAppSidebarHeader from '../NcAppSidebarHeader/index.ts'\nimport NcButton from '../NcButton/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport Focus from '../../directives/Focus/index.ts'\nimport { useIsSmallMobile } from '../../composables/useIsMobile/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport IconDockRight from 'vue-material-design-icons/DockRight.vue'\nimport Star from 'vue-material-design-icons/Star.vue'\nimport StarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\nimport Vue, { provide, ref } from 'vue'\n\nexport default {\n\tname: 'NcAppSidebar',\n\n\tcomponents: {\n\t\tTeleport,\n\t\tNcActions,\n\t\tNcAppSidebarHeader,\n\t\tNcAppSidebarTabs,\n\t\tArrowRight,\n\t\tIconDockRight,\n\t\tNcButton,\n\t\tNcLoadingIcon,\n\t\tNcEmptyContent,\n\t\tClose,\n\t\tStar,\n\t\tStarOutline,\n\t},\n\n\tdirectives: {\n\t\tfocus: Focus,\n\t\tClickOutside,\n\t},\n\n\tinject: {\n\t\tncContentSelector: {\n\t\t\tfrom: 'NcContent:selector',\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tprops: {\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Allow to edit the sidebar name.\n\t\t */\n\t\tnameEditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tnamePlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Title to display for the subname.\n\t\t */\n\t\tsubtitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Url to the top header background image\n\t\t * Applied with css\n\t\t */\n\t\tbackground: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Enable the favourite icon if not null\n\t\t * See fired events\n\t\t */\n\t\tstarred: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Show loading spinner instead of the star icon\n\t\t */\n\t\tstarLoading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Show loading spinner instead of tabs\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Display the sidebar in compact mode\n\t\t */\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Only display close button and default slot content.\n\t\t * Don't display other header content and primary and secondary actions.\n\t\t * Useful when showing the EmptyContent component as content.\n\t\t */\n\t\tempty: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Force the tab navigation to display even if there is only one tab\n\t\t */\n\t\tforceTabs: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Linkify the name\n\t\t */\n\t\tlinkifyName: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Title to display for the name.\n\t\t * Can be set to the same text in case it's too long.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Allow to conditionally show the sidebar\n\t\t * You can also use `v-if` on the sidebar, but using the open prop allow to keep\n\t\t * the sidebar inside the DOM for performance if it is opened and closed multiple times.\n\t\t *\n\t\t * When using the `open` property to close the sidebar a built-in toggle button will be shown to reopen it,\n\t\t * similar to the app navigation. You can remove this button with the `no-toggle` prop.\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Custom classes to assign to the sidebar toggle button.\n\t\t * If needed this can be used to assign styles to the button using `:deep()` selector.\n\t\t */\n\t\ttoggleClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Custom attrs to assign to the sidebar toggle button.\n\t\t */\n\t\ttoggleAttrs: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Do not add the built-in toggle button with `open` prop.\n\t\t */\n\t\tnoToggle: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closing',\n\t\t'closed',\n\t\t'opening',\n\t\t'opened',\n\t\t'figure-click',\n\t\t'update:active',\n\t\t'update:name',\n\t\t'update:nameEditable',\n\t\t'update:open',\n\t\t'update:starred',\n\t\t'submit-name',\n\t\t'dismiss-editing',\n\t],\n\n\tsetup() {\n\t\tconst headerRef = ref(null)\n\t\tprovide('NcAppSidebar:header:ref', headerRef)\n\n\t\treturn {\n\t\t\tuid: GenRandomId(),\n\t\t\tisMobile: useIsSmallMobile(),\n\t\t\theaderRef,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tchangeNameTranslated: t('Change name'),\n\t\t\tcloseTranslated: t('Close sidebar'),\n\t\t\tfavoriteTranslated: t('Favorite'),\n\t\t\tisStarred: this.starred,\n\t\t\tfocusTrap: null,\n\t\t\telementToReturnFocus: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcanStar() {\n\t\t\treturn this.isStarred !== null\n\t\t},\n\t\thasFigure() {\n\t\t\treturn this.$slots.header || this.background\n\t\t},\n\t\thasFigureClickListener() {\n\t\t\treturn this.$listeners['figure-click']\n\t\t},\n\t},\n\n\twatch: {\n\t\tstarred() {\n\t\t\tthis.isStarred = this.starred\n\t\t},\n\n\t\tisMobile() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\n\t\topen() {\n\t\t\tthis.checkToggleButtonContainerAvailability()\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.preserveElementToReturnFocus()\n\n\t\tthis.checkToggleButtonContainerAvailability()\n\t},\n\n\tbeforeDestroy() {\n\t\t// Make sure that the 'closed' event is dispatched even if this element is destroyed before the 'after-leave' event is received.\n\t\tthis.$emit('closed')\n\t\tthis.focusTrap?.deactivate()\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tpreserveElementToReturnFocus() {\n\t\t\t// Save the element that had focus before the sidebar was opened to return back on close\n\t\t\tif (document.activeElement && document.activeElement !== document.body) {\n\t\t\t\tthis.elementToReturnFocus = document.activeElement\n\n\t\t\t\t// Special case for menus (NcActions)\n\t\t\t\t// If a sidebar was opened from a menu item, we want to return focus to the menu trigger instead of the item\n\t\t\t\tif (this.elementToReturnFocus.getAttribute('role') === 'menuitem') {\n\t\t\t\t\tconst menu = this.elementToReturnFocus.closest('[role=\"menu\"]')\n\t\t\t\t\tif (menu) {\n\t\t\t\t\t\tconst menuTrigger = document.querySelector(`[aria-controls=\"${menu.id}\"]`)\n\t\t\t\t\t\tthis.elementToReturnFocus = menuTrigger\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tinitFocusTrap() {\n\t\t\tif (this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.focusTrap = createFocusTrap([\n\t\t\t\t// The sidebar itself\n\t\t\t\tthis.$refs.sidebar,\n\t\t\t\t// Nextcloud Server header navigarion\n\t\t\t\tdocument.querySelector('#header'),\n\t\t\t], {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tfallbackFocus: this.$refs.closeButton.$el,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tescapeDeactivates: false,\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Activate focus trap if it is currently needed, otherwise deactivate\n\t\t */\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.open && this.isMobile) {\n\t\t\t\tthis.initFocusTrap()\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap?.deactivate()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the sidebar on pressing the escape key on mobile\n\t\t *\n\t\t * @param {KeyboardEvent} event key down event\n\t\t */\n\t\tonKeydownEsc(event) {\n\t\t\tif (this.isMobile) {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\tthis.closeSidebar()\n\t\t\t}\n\t\t},\n\n\t\tonBeforeEnter(element) {\n\t\t\t/**\n\t\t\t * The sidebar is opening and the transition is in progress\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\tthis.$emit('opening', element)\n\t\t},\n\t\tonAfterEnter(element) {\n\t\t\t// Focus sidebar on open only if it was opened by a user interaction\n\t\t\tif (this.elementToReturnFocus) {\n\t\t\t\tthis.focus()\n\t\t\t}\n\n\t\t\tthis.toggleFocusTrap()\n\n\t\t\t/**\n\t\t\t * The sidebar is opened and the transition is complete\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t */\n\t\t\tthis.$emit('opened', element)\n\t\t},\n\t\tonBeforeLeave(element) {\n\t\t\t/**\n\t\t\t * The sidebar is closing and the transition is in progress\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\tthis.$emit('closing', element)\n\t\t},\n\t\tonAfterLeave(element) {\n\t\t\t/**\n\t\t\t * The sidebar is closed and the transition is complete\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t */\n\t\t\tthis.$emit('closed', element)\n\n\t\t\tthis.toggleFocusTrap()\n\n\t\t\t// Return focus to the element that had focus before the sidebar was opened\n\t\t\tthis.elementToReturnFocus?.focus({ focusVisible: true })\n\t\t\tthis.elementToReturnFocus = null\n\t\t},\n\n\t\t/**\n\t\t * Used to tell parent component the user asked to close the sidebar\n\t\t *\n\t\t * @param {Event} e close icon click event\n\t\t */\n\t\tcloseSidebar(e) {\n\t\t\t/**\n\t\t\t * The user clicked to closed the sidebar\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('close', e)\n\t\t\t/**\n\t\t\t * Current open state emitted after the transitions are finished\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/**\n\t\t * Emit figure click event to parent component\n\t\t *\n\t\t * @param {Event} e click event\n\t\t */\n\t\tonFigureClick(e) {\n\t\t\t/**\n\t\t\t * The figure/background header has been clicked\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('figure-click', e)\n\t\t},\n\n\t\t/**\n\t\t * Toggle the favourite state\n\t\t * and emit to the parent component\n\t\t */\n\t\ttoggleStarred() {\n\t\t\tthis.isStarred = !this.isStarred\n\t\t\t/**\n\t\t\t * Emitted when the starred value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:starred', this.isStarred)\n\t\t},\n\n\t\teditName() {\n\t\t\t/**\n\t\t\t * Emitted when the nameEditable value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:nameEditable', true)\n\t\t\t// Focus the name input\n\t\t\tif (this.nameEditable) {\n\t\t\t\tthis.$nextTick(\n\t\t\t\t\t() => this.$refs.nameInput.focus(),\n\t\t\t\t)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Focus the sidebar\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tif (!this.open && !this.noToggle) {\n\t\t\t\tthis.$refs.toggle.$el.focus()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tthis.headerRef.focus()\n\t\t\t} catch {\n\t\t\t\tVue.util.warn('NcAppSidebar should have focusable header for accessibility reasons. Use NcAppSidebarHeader component.')\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Focus the active tab\n\t\t * @public\n\t\t */\n\t\tfocusActiveTabContent() {\n\t\t\t// If a tab is focused then probably a new trigger element moved the focus to the sidebar\n\t\t\tthis.preserveElementToReturnFocus()\n\n\t\t\tthis.$refs.tabs.focusActiveTabContent()\n\t\t},\n\n\t\t/**\n\t\t * Check if the toggle button container is available\n\t\t */\n\t\tcheckToggleButtonContainerAvailability() {\n\t\t\t// Toggle button must be rendered, but there is no element to teleport it to\n\t\t\tif (this.open === false && !this.noToggle && !this.ncContentSelector) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'[NcAppSidebar] It looks like you want to use NcAppSidebar with the built-in toggle button. '\n\t\t\t\t\t+ 'This feature is only available when NcAppSidebar is used in NcContent.',\n\t\t\t\t)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Emit name change event to parent component\n\t\t *\n\t\t * @param {Event} event input event\n\t\t */\n\t\tonNameInput(event) {\n\t\t\t/**\n\t\t\t * Emitted when the name value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:name', event.target.value)\n\t\t},\n\n\t\t/**\n\t\t * Emit when the name form edit confirm button is pressed in order\n\t\t * to change the name.\n\t\t *\n\t\t * @param {Event} event submit event\n\t\t */\n\t\tonSubmitName(event) {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/**\n\t\t\t * Emitted when the name edit input has been submitted\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('submit-name', event)\n\t\t},\n\t\tonDismissEditing() {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/**\n\t\t\t * Emitted when the name edit has been cancelled\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('dismiss-editing')\n\t\t},\n\t\tonUpdateActive(activeTab) {\n\t\t\t/**\n\t\t\t * The active tab changed\n\t\t\t *\n\t\t\t * @type {string}\n\t\t\t */\n\t\t\tthis.$emit('update:active', activeTab)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n// Allows to use transition over a custom CSS property (CSS Variable)\n// Ignored on old browsers resulting in slightly noticeable jump\n@property --app-sidebar-offset {\n  syntax: '<length>';\n  initial-value: 0;\n  inherits: true;\n}\n\n.content {\n\t// A padding between the toggle button and the page border\n\t--app-sidebar-padding: #{$app-navigation-padding};\n\t// A padding between the toggle button and the page border\n\t--app-sidebar-offset: 0;\n\t// Explicitly disable transition by default to enable it only when sidebar animation is active\n\t// !important to override styles from an older version, because it's global non-scoped styles\n\ttransition: --app-sidebar-offset 0ms !important;\n}\n\n// When AppSidebar is animation is active - also apply transition for the toggle button offset\n.content:has(.app-sidebar.slide-right-enter-active),\n.content:has(.app-sidebar.slide-right-leave-active) {\n\ttransition: --app-sidebar-offset var(--animation-quick);\n}\n\n.content:has(.app-sidebar__toggle) {\n\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n}\n</style>\n\n<style lang=\"scss\" scoped>\n$desc-input-padding: 7px;\n\n// name and subname\n$desc-name-height: 30px;\n$desc-subname-height: 22px;\n$desc-height: $desc-name-height + $desc-subname-height;\n\n$top-buttons-spacing: $app-navigation-padding; // align with app navigation\n\n/*\n\tSidebar: to be used within #content\n\tapp-content will be shrinked properly\n*/\n.app-sidebar {\n\t--app-sidebar-width: clamp(300px, 27vw, 500px);\n\twidth: var(--app-sidebar-width);\n\n\tz-index: 1500;\n\ttop: 0;\n\tinset-inline-end: 0;\n\tdisplay: flex;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tflex-direction: column;\n\tflex-shrink: 0;\n\theight: 100%;\n\tborder-inline-start: 1px solid var(--color-border);\n\tbackground: var(--color-main-background);\n\t// Make close button positioned relative to the header\n\tposition: relative;\n\n\t&__toggle {\n\t\tposition: absolute !important;\n\t\tinset-block-start: var(--app-sidebar-padding);\n\t\tinset-inline-end: var(--app-sidebar-padding);\n\t\t// app-content has z-index 1000 so we need 1001\n\t\tz-index: 1001;\n\t}\n\n\t.app-sidebar-header {\n\t\t// Variable for custom content to be aware of space taken by close button (from top-right corner)\n\t\t--app-sidebar-close-button-offset: calc(var(--default-clickable-area) + #{$top-buttons-spacing});\n\n\t\t> .app-sidebar__close {\n\t\t\tposition: absolute;\n\t\t\tz-index: 100;\n\t\t\ttop: $top-buttons-spacing;\n\t\t\tinset-inline-end: $top-buttons-spacing;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t}\n\n\t\t// Compact mode only affects a sidebar with a figure\n\t\t&--compact.app-sidebar-header--with-figure {\n\t\t\t.app-sidebar-header__info {\n\t\t\t\tflex-direction: row;\n\n\t\t\t\t.app-sidebar-header__figure {\n\t\t\t\t\t--figure-size: calc($desc-height + var(--app-sidebar-padding));\n\t\t\t\t\tz-index: 2;\n\t\t\t\t\twidth: var(--figure-size);\n\t\t\t\t\theight: var(--figure-size);\n\t\t\t\t\tmargin: calc(var(--app-sidebar-padding) / 2);\n\t\t\t\t\tborder-radius: 3px;\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t}\n\t\t\t\t.app-sidebar-header__desc {\n\t\t\t\t\tpadding-inline-start: 0;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\tmin-width: 0;\n\t\t\t\t\tpadding-inline-end: calc(var(--default-clickable-area) + var(--app-sidebar-close-button-offset));\n\t\t\t\t\tpadding-top: var(--app-sidebar-padding);\n\n\t\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\t\tpadding-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\t\t\tz-index: 3; // above star\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\ttop: calc(var(--app-sidebar-padding) / 2);\n\t\t\t\t\t\tinset-inline-start: calc(-1 * var(--default-clickable-area));\n\t\t\t\t\t\tgap: 0; // override gap\n\t\t\t\t\t}\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\t\t\tinset-inline-end: var(--app-sidebar-close-button-offset); // left of the close button\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// sidebar without figure\n\t\t&:not(.app-sidebar-header--with-figure) {\n\t\t\t// align the menu with the close button\n\t\t\t.app-sidebar-header__menu {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\tinset-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t}\n\t\t\t// increase the padding to not overlap the menu\n\t\t\t.app-sidebar-header__desc {\n\t\t\t\tpadding-inline-end: calc(var(--default-clickable-area) + var(--app-sidebar-close-button-offset));\n\n\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\tpadding-inline-end: var(--app-sidebar-close-button-offset);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// the container with the figure and the description\n\t\t.app-sidebar-header__info {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t// header background\n\t\t&__figure {\n\t\t\twidth: 100%;\n\t\t\theight: 250px;\n\t\t\tmax-height: 250px;\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: contain;\n\t\t\t&--with-action {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t}\n\n\t\t// description\n\t\t&__desc {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tpadding-inline: var(--app-sidebar-padding);\n\t\t\tpadding-block: #{$top-buttons-spacing} calc(var(--app-sidebar-padding) / 2);\n\t\t\tgap: 0 4px;\n\n\t\t\t// custom overrides\n\t\t\t&--with-tertiary-action {\n\t\t\t\tpadding-inline-start: 6px;\n\t\t\t}\n\n\t\t\t&--editable .app-sidebar-header__mainname-form,\n\t\t\t&--with-subname--editable .app-sidebar-header__mainname-form {\n\t\t\t\tmargin-top: -2px;\n\t\t\t\tmargin-bottom: -2px;\n\t\t\t}\n\n\t\t\t&--with-subname--editable .app-sidebar-header__subname {\n\t\t\t\tmargin-top: -2px;\n\t\t\t}\n\n\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex: 0 0 auto;\n\n\t\t\t\t.app-sidebar-header__star {\n\t\t\t\t\t// Override default Button component styles\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t&:not([aria-pressed='true']):hover {\n\t\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// names\n\t\t\t.app-sidebar-header__name-container {\n\t\t\t\tflex: 1 1 auto;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\t\t\t\tmin-width: 0;\n\n\t\t\t\t.app-sidebar-header__mainname-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tmin-height: var(--default-clickable-area);\n\n\t\t\t\t\t// main name\n\t\t\t\t\t.app-sidebar-header__mainname {\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\tmin-height: 30px;\n\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\tline-height: $desc-name-height;\n\n\t\t\t\t\t\t// Needs 'deep' as the link is generated by the linkify directive\n\t\t\t\t\t\t&:deep(.linkified) {\n\t\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\t\ttext-decoration: underline;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__mainname-form {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\talign-items: center;\n\n\t\t\t\t\t\tinput.app-sidebar-header__mainname-input {\n\t\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\tpadding: $desc-input-padding;\n\t\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// main menu\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\tmargin-inline-start: 5px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// shared between main and subname\n\t\t\t\t.app-sidebar-header__mainname,\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t}\n\n\t\t\t\t// subname\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\t\tpadding: 0;\n\n\t\t\t\t\t* {\n\t\t\t\t\t\tvertical-align: text-bottom;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Hidden a11y fallback\n\t\t.app-sidebar-header__mainname--hidden {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tinset-inline-start: 0;\n\t\t\tmargin: 0;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t// sidebar description slot\n\t\t&__description {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmargin: 0 10px;\n\t\t}\n\t}\n}\n\n// Make the sidebar full-width on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-sidebar {\n\t\tposition: absolute;\n\t\t--app-sidebar-width: 100vw;\n\t}\n}\n\n.slide-right-leave-active,\n.slide-right-enter-active {\n\ttransition-duration: var(--animation-quick);\n\ttransition-property: margin-inline-end;\n}\n\n.slide-right-enter-to,\n.slide-right-leave {\n\tmargin-inline-end: 0;\n}\n\n.slide-right-enter,\n.slide-right-leave-to {\n\tmargin-inline-end: calc(-1 * var(--app-sidebar-width));\n}\n</style>\n"],"names":["_sfc_main","Teleport","Focus","ClickOutside"],"mappings":"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","x_google_ignoreList":[1,2,3]}