\n\n\n\n\n","\n \n \n \n\n\n","\n \n \n \n\n\n","\n \n \n \n\n\n","\n\n\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\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\tSearch tab content\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\tSettings tab content\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\tSharing tab content\n\t\t\n\t\n\n\n```\n\n### One tab\n\nSingle tab is rendered without navigation.\n\n```vue\n\n\t
\n\n\n```\n\n### Editable name\n\n```vue\n\n\t\n\t\t\n\t\n\n\n```\n\n### Editable name after click with custom tertiary action\n\n```vue\n\n\t\n\t\t\n\t\t\t\n\t\t\n\t\n\n\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\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t123 KiB, a month ago\n\t\t\t\n\t\t\n\t\n\t\n```\n\n### Empty sidebar for e.g. empty content component.\n\n```vue\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n\t\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\n\t\n\t\n\t\t\n\t\t\t
\n\t\t\t\tStart a call\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\tSingle tab content\n\t\t\t\n\t\t\n\t\n\n\n\n\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\n\t\n\t\n\t\t\n\t\t\t