fix admin bar spacer height when context bar is conditionally displayed (#4424)

* fix admin bar spacer height with context bar

* changelog

* Update CHANGELOG.md

Author: ETLaurent

CHANGELOG.md

@@ -20,6 +20,7 @@
 * Copy requires create and edit permission.
 * Display a more informative error message when publishing a page because the parent page is not published and the current user has no permission to publish the parent page (while having permission to publish the current one).
 * The `content-changed` event for the submit draft action now uses a complete document.
+* Fix the context bar overlap on palette for non-admin users that have the permission to modify it.
 
 ### Changes
 

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBar.vue

@@ -16,7 +16,7 @@
           :items="userItems"
         />
       </div>
-      <TheAposContextBar @mounted="setSpacer" />
+      <TheAposContextBar @visibility-changed="setSpacer" />
       <component
         v-for="bar in bars"
         v-bind="bar.props || {}"

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue

@@ -42,7 +42,7 @@ import AposAdvisoryLockMixin from 'Modules/@apostrophecms/ui/mixins/AposAdvisory
 export default {
   name: 'TheAposContextBar',
   mixins: [ AposPublishMixin, AposAdvisoryLockMixin ],
-  emits: [ 'mounted' ],
+  emits: [ 'visibility-changed' ],
   data() {
     const query = apos.http.parseQuery(location.search);
     // If the URL references a draft, go into draft mode but then clean up the URL
@@ -137,6 +137,11 @@ export default {
   watch: {
     editMode(newVal) {
       window.apos.adminBar.editMode = newVal;
+    },
+    contextBarActive() {
+      this.$nextTick(() => {
+        this.$emit('visibility-changed');
+      });
     }
   },
   async mounted() {
@@ -173,9 +178,6 @@ export default {
     await this.updateDraftIsEditable();
     this.rememberLastBaseContext();
     this.published = await this.getPublished();
-    this.$nextTick(() => {
-      this.$emit('mounted');
-    });
 
     apos.util.onReadyAndRefresh(() => {
       if (window.apos.adminBar.scrollPosition) {