fix: Fix modal responsiveness (#4149)

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -19,23 +19,6 @@
       :current-role="currentRole"
       @add-label="showAddLabelPopup"
     />
-    <woot-key-shortcut-modal
-      v-if="showShortcutModal"
-      @close="closeKeyShortcutModal"
-      @clickaway="closeKeyShortcutModal"
-    />
-    <account-selector
-      :show-account-modal="showAccountModal"
-      @close-account-modal="toggleAccountModal"
-      @show-create-account-modal="openCreateAccountModal"
-    />
-    <add-account-modal
-      :show="showCreateAccountModal"
-      @close-account-create-modal="closeCreateAccountModal"
-    />
-    <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
-      <add-label-modal @close="hideAddLabelPopup" />
-    </woot-modal>
   </aside>
 </template>
 
@@ -46,12 +29,8 @@ import adminMixin from '../../mixins/isAdmin';
 import { getSidebarItems } from './config/default-sidebar';
 import alertMixin from 'shared/mixins/alertMixin';
 
-import AccountSelector from './sidebarComponents/AccountSelector.vue';
-import AddAccountModal from './sidebarComponents/AddAccountModal.vue';
-import AddLabelModal from '../../routes/dashboard/settings/labels/AddLabel';
 import PrimarySidebar from './sidebarComponents/Primary';
 import SecondarySidebar from './sidebarComponents/Secondary';
-import WootKeyShortcutModal from 'components/widgets/modal/WootKeyShortcutModal';
 import {
   hasPressedAltAndCKey,
   hasPressedAltAndRKey,
@@ -65,21 +44,13 @@ import router from '../../routes';
 
 export default {
   components: {
-    AccountSelector,
-    AddAccountModal,
-    AddLabelModal,
     PrimarySidebar,
     SecondarySidebar,
-    WootKeyShortcutModal,
   },
   mixins: [adminMixin, alertMixin, eventListenerMixins],
   data() {
     return {
       showOptionsMenu: false,
-      showAccountModal: false,
-      showCreateAccountModal: false,
-      showAddLabelModal: false,
-      showShortcutModal: false,
     };
   },
 
@@ -162,10 +133,10 @@ export default {
       }
     },
     toggleKeyShortcutModal() {
-      this.showShortcutModal = true;
+      this.$emit('open-key-shortcut-modal');
     },
     closeKeyShortcutModal() {
-      this.showShortcutModal = false;
+      this.$emit('close-key-shortcut-modal');
     },
     handleKeyEvents(e) {
       if (hasPressedCommandAndForwardSlash(e)) {
@@ -200,20 +171,10 @@ export default {
       window.$chatwoot.toggle();
     },
     toggleAccountModal() {
-      this.showAccountModal = !this.showAccountModal;
-    },
-    openCreateAccountModal() {
-      this.showAccountModal = false;
-      this.showCreateAccountModal = true;
-    },
-    closeCreateAccountModal() {
-      this.showCreateAccountModal = false;
+      this.$emit('toggle-account-modal');
     },
     showAddLabelPopup() {
-      this.showAddLabelModal = true;
-    },
-    hideAddLabelPopup() {
-      this.showAddLabelModal = false;
+      this.$emit('show-add-label-popup');
     },
   },
 };