diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_image-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_image-secondary_button-editable_true.png
index 8030c0c07d..88c10251d2 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_image-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_image-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_image-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_image-secondary_none-editable_true.png
index 45e5ac79ee..408246dff5 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_image-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_image-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_none-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_none-secondary_button-editable_true.png
index cc903d76c8..e429195f69 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_none-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_none-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_none-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_none-secondary_none-editable_true.png
index b797dda06c..4d85eb4a10 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_none-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_true-header_none-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_image-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_image-secondary_button-editable_true.png
index bdd136b111..caf2cf3b98 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_image-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_image-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_image-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_image-secondary_none-editable_true.png
index 6a7f7d700e..d9b59412ad 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_image-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_image-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_none-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_none-secondary_button-editable_true.png
index 4ea67a36f6..cb960355cc 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_none-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_none-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_none-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_none-secondary_none-editable_true.png
index 7dd0d982d5..5183e1463e 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_none-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_true-header_none-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_image-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_image-secondary_button-editable_true.png
index 5fee81fae1..ecb158aafa 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_image-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_image-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_image-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_image-secondary_none-editable_true.png
index 552dc2f043..ea988b32b6 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_image-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_image-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_none-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_none-secondary_button-editable_true.png
index 1bf6d4ee24..2c4b4446f9 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_none-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_none-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_none-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_none-secondary_none-editable_true.png
index 1428c0dc7b..db95b5c216 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_none-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_true-header_none-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_image-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_image-secondary_button-editable_true.png
index a86872fe89..c1e1cdce40 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_image-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_image-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_image-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_image-secondary_none-editable_true.png
index e343aa3913..9a4c0c036e 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_image-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_image-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_none-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_none-secondary_button-editable_true.png
index ffe8fa2e6d..b2c1d325b7 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_none-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_none-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_none-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_none-secondary_none-editable_true.png
index 0917555f3f..f0e81023d9 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_none-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_true-header_none-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_image-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_image-secondary_button-editable_true.png
index bd3b352460..222026abfe 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_image-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_image-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_image-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_image-secondary_none-editable_true.png
index 4d91a47ad7..ba91e1d31e 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_image-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_image-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_none-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_none-secondary_button-editable_true.png
index 5a35dcedc3..a5c999ca3b 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_none-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_none-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_none-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_none-secondary_none-editable_true.png
index a66715bdcb..c2436cc216 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_none-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_true-header_none-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_image-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_image-secondary_button-editable_true.png
index 3bdc40ef32..a32e5df7b1 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_image-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_image-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_image-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_image-secondary_none-editable_true.png
index 37225df4e6..14e138a8e5 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_image-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_image-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_none-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_none-secondary_button-editable_true.png
index adbe5adee2..6b69f03efe 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_none-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_none-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_none-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_none-secondary_none-editable_true.png
index 8a50577fdd..1a456a735a 100644
Binary files a/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_none-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar-compact.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_true-header_none-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_image-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_image-secondary_button-editable_true.png
index 66ecfd4a9e..081a3344f6 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_image-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_image-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_image-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_image-secondary_none-editable_true.png
index 5e69aad01a..9b3decb471 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_image-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_image-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_none-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_none-secondary_button-editable_true.png
index cc903d76c8..e429195f69 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_none-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_none-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_none-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_none-secondary_none-editable_true.png
index b797dda06c..4d85eb4a10 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_none-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_false-compact_false-header_none-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_image-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_image-secondary_button-editable_true.png
index ad0f93d2c2..b556e850ae 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_image-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_image-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_image-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_image-secondary_none-editable_true.png
index e5660d47ce..fc20ffa1ad 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_image-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_image-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_none-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_none-secondary_button-editable_true.png
index 4ea67a36f6..cb960355cc 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_none-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_none-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_none-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_none-secondary_none-editable_true.png
index 7dd0d982d5..5183e1463e 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_none-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_null-compact_false-header_none-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_image-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_image-secondary_button-editable_true.png
index 2295b8f309..e054473361 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_image-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_image-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_image-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_image-secondary_none-editable_true.png
index 84b396a553..1c4d0b1af6 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_image-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_image-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_none-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_none-secondary_button-editable_true.png
index 1bf6d4ee24..2c4b4446f9 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_none-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_none-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_none-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_none-secondary_none-editable_true.png
index 1428c0dc7b..db95b5c216 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_none-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_null-starred_true-compact_false-header_none-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_image-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_image-secondary_button-editable_true.png
index d6cd11551a..cbd1a809bf 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_image-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_image-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_image-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_image-secondary_none-editable_true.png
index cbab025094..2e3c450e48 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_image-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_image-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_none-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_none-secondary_button-editable_true.png
index ffe8fa2e6d..b2c1d325b7 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_none-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_none-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_none-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_none-secondary_none-editable_true.png
index 0917555f3f..f0e81023d9 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_none-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_false-compact_false-header_none-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_image-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_image-secondary_button-editable_true.png
index 6842fa080e..eed97560aa 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_image-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_image-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_image-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_image-secondary_none-editable_true.png
index c70ff4cf48..e4aa309baa 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_image-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_image-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_none-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_none-secondary_button-editable_true.png
index 5a35dcedc3..a5c999ca3b 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_none-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_none-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_none-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_none-secondary_none-editable_true.png
index a66715bdcb..c2436cc216 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_none-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_null-compact_false-header_none-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_image-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_image-secondary_button-editable_true.png
index 608c6c991e..8414c3c303 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_image-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_image-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_image-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_image-secondary_none-editable_true.png
index 98a41602a6..268d711a8c 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_image-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_image-secondary_none-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_none-secondary_button-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_none-secondary_button-editable_true.png
index adbe5adee2..6b69f03efe 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_none-secondary_button-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_none-secondary_button-editable_true.png differ
diff --git a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_none-secondary_none-editable_true.png b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_none-secondary_none-editable_true.png
index 8a50577fdd..1a456a735a 100644
Binary files a/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_none-secondary_none-editable_true.png and b/cypress/snapshots/base/NcAppSidebar.cy.js/NcAppSidebar.vue-subname_true-starred_true-compact_false-header_none-secondary_none-editable_true.png differ
diff --git a/l10n/messages.pot b/l10n/messages.pot
index 70a6639a33..a5069f7070 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -238,6 +238,9 @@ msgstr ""
 msgid "Open navigation"
 msgstr ""
 
+msgid "Open sidebar"
+msgstr ""
+
 msgid "Options"
 msgstr ""
 
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index 495f161d78..fd7a93a6aa 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -441,153 +441,171 @@ export default {
 </docs>
 
 <template>
-	<transition appear
-		name="slide-right"
-		@before-enter="onBeforeEnter"
-		@after-enter="onAfterEnter"
-		@before-leave="onBeforeLeave"
-		@after-leave="onAfterLeave">
-		<aside v-show="open"
-			id="app-sidebar-vue"
-			ref="sidebar"
-			class="app-sidebar"
-			:aria-labelledby="`app-sidebar-vue-${uid}__header`"
-			@keydown.esc="onKeydownEsc">
-			<header :class="{
-					'app-sidebar-header--with-figure': hasFigure,
-					'app-sidebar-header--compact': compact,
-				}"
-				class="app-sidebar-header">
-				<!-- container for figure and description, allows easy switching to compact mode -->
-				<div class="app-sidebar-header__info">
-					<!-- sidebar header illustration/figure -->
-					<div v-if="hasFigure && !empty"
-						:class="{
-							'app-sidebar-header__figure--with-action': hasFigureClickListener
-						}"
-						class="app-sidebar-header__figure"
-						:style="{
-							backgroundImage: `url(${background})`
-						}"
-						tabindex="0"
-						@click="onFigureClick"
-						@keydown.enter="onFigureClick">
-						<slot class="app-sidebar-header__background" name="header" />
-					</div>
-
-					<!-- sidebar details -->
-					<div v-if="!empty"
-						:class="{
-							'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],
-							'app-sidebar-header__desc--editable': nameEditable && !subname,
-							'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,
-							'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],
-						}"
-						class="app-sidebar-header__desc">
-						<!-- favourite icon -->
-						<div v-if="canStar || $slots['tertiary-actions']" class="app-sidebar-header__tertiary-actions">
-							<slot name="tertiary-actions">
-								<NcButton v-if="canStar"
-									:aria-label="favoriteTranslated"
-									:pressed="isStarred"
-									class="app-sidebar-header__star"
-									type="secondary"
-									@click.prevent="toggleStarred">
-									<template #icon>
-										<NcLoadingIcon v-if="starLoading" />
-										<Star v-else-if="isStarred" :size="20" />
-										<StarOutline v-else :size="20" />
-									</template>
-								</NcButton>
-							</slot>
+	<Fragment>
+		<!-- With vue3 we can move this inside the transition, but vue2 does not allow v-show in transition -->
+		<NcButton v-show="!open"
+			:aria-label="t('Open sidebar')"
+			class="app-sidebar__toggle"
+			:class="toggleClasses"
+			type="tertiary"
+			@click="$emit('update:open', true)">
+			<template #icon>
+				<!-- @slot Custom icon for the toggle button, defaults to the dock-right icon from MDI -->
+				<slot name="icon">
+					<IconDockRight :size="20" />
+				</slot>
+			</template>
+		</NcButton>
+		<transition appear
+			name="slide-right"
+			v-bind="$attrs"
+			v-on="$listeners"
+			@before-enter="onBeforeEnter"
+			@after-enter="onAfterEnter"
+			@before-leave="onBeforeLeave"
+			@after-leave="onAfterLeave">
+			<aside v-show="open"
+				id="app-sidebar-vue"
+				ref="sidebar"
+				class="app-sidebar"
+				:aria-labelledby="`app-sidebar-vue-${uid}__header`"
+				@keydown.esc="onKeydownEsc">
+				<header :class="{
+						'app-sidebar-header--with-figure': hasFigure,
+						'app-sidebar-header--compact': compact,
+					}"
+					class="app-sidebar-header">
+					<!-- container for figure and description, allows easy switching to compact mode -->
+					<div class="app-sidebar-header__info">
+						<!-- sidebar header illustration/figure -->
+						<div v-if="hasFigure && !empty"
+							:class="{
+								'app-sidebar-header__figure--with-action': hasFigureClickListener
+							}"
+							class="app-sidebar-header__figure"
+							:style="{
+								backgroundImage: `url(${background})`
+							}"
+							tabindex="0"
+							@click="onFigureClick"
+							@keydown.enter="onFigureClick">
+							<slot class="app-sidebar-header__background" name="header" />
 						</div>
 
-						<!-- name -->
-						<div class="app-sidebar-header__name-container">
-							<div class="app-sidebar-header__mainname-container">
-								<!-- main name -->
-								<h2 v-show="!nameEditable"
-									:id="`app-sidebar-vue-${uid}__header`"
-									ref="header"
-									v-linkify="{text: name, linkify: linkifyName}"
-									:aria-label="title"
-									:title="title"
-									class="app-sidebar-header__mainname"
-									:tabindex="nameEditable ? 0 : -1"
-									@click.self="editName">
-									{{ name }}
-								</h2>
-								<template v-if="nameEditable">
-									<form v-click-outside="() => onSubmitName()"
-										class="app-sidebar-header__mainname-form"
-										@submit.prevent="onSubmitName">
-										<input ref="nameInput"
-											v-focus
-											class="app-sidebar-header__mainname-input"
-											type="text"
-											:placeholder="namePlaceholder"
-											:value="name"
-											@keydown.esc.stop="onDismissEditing"
-											@input="onNameInput">
-										<NcButton type="tertiary-no-background"
-											:aria-label="changeNameTranslated"
-											native-type="submit">
-											<template #icon>
-												<ArrowRight :size="20" />
-											</template>
-										</NcButton>
-									</form>
-								</template>
-								<!-- header main menu -->
-								<NcActions v-if="$slots['secondary-actions']"
-									class="app-sidebar-header__menu"
-									:force-menu="forceMenu">
-									<slot name="secondary-actions" />
-								</NcActions>
-							</div>
-							<!-- secondary name -->
-							<p v-if="subname.trim() !== '' || $slots['subname']"
-								:title="subtitle || undefined"
-								class="app-sidebar-header__subname">
-								<!-- @slot Alternative to the `subname` prop can be used for more complex conent. It will be rendered within a `p` tag. -->
-								<slot name="subname">
-									{{ subname }}
+						<!-- sidebar details -->
+						<div v-if="!empty"
+							:class="{
+								'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],
+								'app-sidebar-header__desc--editable': nameEditable && !subname,
+								'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,
+								'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],
+							}"
+							class="app-sidebar-header__desc">
+							<!-- favourite icon -->
+							<div v-if="canStar || $slots['tertiary-actions']" class="app-sidebar-header__tertiary-actions">
+								<slot name="tertiary-actions">
+									<NcButton v-if="canStar"
+										:aria-label="favoriteTranslated"
+										:pressed="isStarred"
+										class="app-sidebar-header__star"
+										type="secondary"
+										@click.prevent="toggleStarred">
+										<template #icon>
+											<NcLoadingIcon v-if="starLoading" />
+											<Star v-else-if="isStarred" :size="20" />
+											<StarOutline v-else :size="20" />
+										</template>
+									</NcButton>
 								</slot>
-							</p>
+							</div>
+
+							<!-- name -->
+							<div class="app-sidebar-header__name-container">
+								<div class="app-sidebar-header__mainname-container">
+									<!-- main name -->
+									<h2 v-show="!nameEditable"
+										:id="`app-sidebar-vue-${uid}__header`"
+										ref="header"
+										v-linkify="{text: name, linkify: linkifyName}"
+										:aria-label="title"
+										:title="title"
+										class="app-sidebar-header__mainname"
+										:tabindex="nameEditable ? 0 : -1"
+										@click.self="editName">
+										{{ name }}
+									</h2>
+									<template v-if="nameEditable">
+										<form v-click-outside="() => onSubmitName()"
+											class="app-sidebar-header__mainname-form"
+											@submit.prevent="onSubmitName">
+											<input ref="nameInput"
+												v-focus
+												class="app-sidebar-header__mainname-input"
+												type="text"
+												:placeholder="namePlaceholder"
+												:value="name"
+												@keydown.esc.stop="onDismissEditing"
+												@input="onNameInput">
+											<NcButton type="tertiary-no-background"
+												:aria-label="changeNameTranslated"
+												native-type="submit">
+												<template #icon>
+													<ArrowRight :size="20" />
+												</template>
+											</NcButton>
+										</form>
+									</template>
+									<!-- header main menu -->
+									<NcActions v-if="$slots['secondary-actions']"
+										class="app-sidebar-header__menu"
+										:force-menu="forceMenu">
+										<slot name="secondary-actions" />
+									</NcActions>
+								</div>
+								<!-- secondary name -->
+								<p v-if="subname.trim() !== '' || $slots['subname']"
+									:title="subtitle || undefined"
+									class="app-sidebar-header__subname">
+									<!-- @slot Alternative to the `subname` prop can be used for more complex conent. It will be rendered within a `p` tag. -->
+									<slot name="subname">
+										{{ subname }}
+									</slot>
+								</p>
+							</div>
 						</div>
 					</div>
-				</div>
-
-				<NcButton ref="closeButton"
-					:title="closeTranslated"
-					:aria-label="closeTranslated"
-					type="tertiary"
-					class="app-sidebar__close"
-					@click.prevent="closeSidebar">
-					<template #icon>
-						<Close :size="20" />
-					</template>
-				</NcButton>
 
-				<div v-if="$slots['description'] && !empty" class="app-sidebar-header__description">
-					<slot name="description" />
-				</div>
-			</header>
+					<NcButton ref="closeButton"
+						:title="closeTranslated"
+						:aria-label="closeTranslated"
+						type="tertiary"
+						class="app-sidebar__close"
+						@click.prevent="closeSidebar">
+						<template #icon>
+							<Close :size="20" />
+						</template>
+					</NcButton>
+
+					<div v-if="$slots['description'] && !empty" class="app-sidebar-header__description">
+						<slot name="description" />
+					</div>
+				</header>
 
-			<NcAppSidebarTabs v-show="!loading"
-				ref="tabs"
-				:active="active"
-				@update:active="onUpdateActive">
-				<slot />
-			</NcAppSidebarTabs>
+				<NcAppSidebarTabs v-show="!loading"
+					ref="tabs"
+					:active="active"
+					@update:active="onUpdateActive">
+					<slot />
+				</NcAppSidebarTabs>
 
-			<NcEmptyContent v-if="loading">
-				<template #icon>
-					<NcLoadingIcon :size="64" />
-				</template>
-			</NcEmptyContent>
-		</aside>
-	</transition>
+				<NcEmptyContent v-if="loading">
+					<template #icon>
+						<NcLoadingIcon :size="64" />
+					</template>
+				</NcEmptyContent>
+			</aside>
+		</transition>
+	</Fragment>
 </template>
 
 <script>
@@ -603,8 +621,10 @@ import GenRandomId from '../../utils/GenRandomId.js'
 import { getTrapStack } from '../../utils/focusTrap.js'
 import { t } from '../../l10n.js'
 
+import { Fragment } from 'vue-frag'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Close from 'vue-material-design-icons/Close.vue'
+import IconDockRight from 'vue-material-design-icons/DockRight.vue'
 import Star from 'vue-material-design-icons/Star.vue'
 import StarOutline from 'vue-material-design-icons/StarOutline.vue'
 
@@ -615,9 +635,11 @@ export default {
 	name: 'NcAppSidebar',
 
 	components: {
+		Fragment,
 		NcActions,
 		NcAppSidebarTabs,
 		ArrowRight,
+		IconDockRight,
 		NcButton,
 		NcLoadingIcon,
 		NcEmptyContent,
@@ -632,6 +654,8 @@ export default {
 		ClickOutside,
 	},
 
+	inheritAttrs: false,
+
 	props: {
 		active: {
 			type: String,
@@ -743,11 +767,23 @@ export default {
 		 * 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.
+		 *
+		 * 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.
 		 */
 		open: {
 			type: Boolean,
 			default: true,
 		},
+
+		/**
+		 * 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: '',
+		},
 	},
 
 	emits: [
@@ -830,6 +866,8 @@ export default {
 	},
 
 	methods: {
+		t,
+
 		preserveElementToReturnFocus() {
 			// Save the element that had focus before the sidebar was opened to return back on close
 			if (document.activeElement && document.activeElement !== document.body) {
@@ -1098,6 +1136,15 @@ $top-buttons-spacing: 6px;
 	border-left: 1px solid var(--color-border);
 	background: var(--color-main-background);
 
+	&__toggle {
+		--sidebar-toggle-position: #{$app-navigation-padding};
+		position: absolute !important;
+		inset-block-start: var(--sidebar-toggle-position);
+		inset-inline-end: var(--sidebar-toggle-position);
+		// app-content has z-index 1000 so we need 1001
+		z-index: 1001;
+	}
+
 	.app-sidebar-header {
 		> .app-sidebar__close {
 			position: absolute;