From 5b52db605762ef526c95ed98643db4009f8716da Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Sat, 11 May 2024 17:40:53 +0200 Subject: [PATCH 1/2] feat(NcAppSidebar): Allow to set `open` state to prevent focus trap issues on mobile Signed-off-by: Ferdinand Thiessen --- src/components/NcAppSidebar/NcAppSidebar.vue | 107 +++++++++++++++++-- 1 file changed, 100 insertions(+), 7 deletions(-) diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue index 71e4afbf12..495f161d78 100644 --- a/src/components/NcAppSidebar/NcAppSidebar.vue +++ b/src/components/NcAppSidebar/NcAppSidebar.vue @@ -27,6 +27,10 @@ This component provides a way to include the standardised sidebar. The standard properties like name, subname, starred, etc. allow to automatically include a standard-header like it's used by the files app. +To conditionally show the sidebar either use `v-if` on the sidebar component, +or use the `open` property of the component to controll the state. +Using `v-show` directly will result in usability issues due to internal focus trap handling. + ### Standard usage ```vue @@ -366,6 +370,74 @@ A working alternative would be using an icon together with an `aria-label`: } ``` + +### Conditionally show the sidebar + +If the sidebar should be shown conditionally (e.g. using a button) +and the users are expected to open and close the sidebar multiple times, +then using `v-if` might result in bad performance. +So instead use the `open` property: + +```vue + + + +```