diff --git a/app/assets/javascripts/sidebar/components/toggle/toggle_sidebar.vue b/app/assets/javascripts/sidebar/components/toggle/toggle_sidebar.vue
index 6dacf4e10d3c77af54934fb7db408a9f4a4bed92..ba0bf783315a302163a92e1eb66eaf005d7d3eb8 100644
--- a/app/assets/javascripts/sidebar/components/toggle/toggle_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/toggle/toggle_sidebar.vue
@@ -32,9 +32,22 @@ export default {
       return [this.cssClasses, { 'js-sidebar-collapsed': this.collapsed }];
     },
   },
+  watch: {
+    collapsed(value) {
+      this.updateLayout(value);
+    },
+  },
+  mounted() {
+    this.page = document.querySelector('.layout-page');
+  },
   methods: {
     toggle() {
       this.$emit('toggle');
+      this.updateLayout();
+    },
+    updateLayout(collapsed) {
+      this.page?.classList.remove(collapsed ? 'right-sidebar-expanded' : 'right-sidebar-collapsed');
+      this.page?.classList.add(collapsed ? 'right-sidebar-collapsed' : 'right-sidebar-expanded');
     },
   },
 };